/*
Theme Name      Sport and Exercise
Theme URI       http://www.st-andrews.ac.uk
Description     Sport and Exercise, University of St Andrews
Version         1.0.1
Authors         gjms1 & sde1
Last updated    Monday 14 September 2009
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}

body {
    background-color: #e3e2dd;
    color: #000;
    font-family: Verdana, Arial, Helvetica, "sans-serif";
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    margin: 0 auto;
    padding: 0 0 0 0;
    text-align: center; /* Centers the page content container in IE 5 browsers. */
    }

p{
margin-top:5px;
margin-bottom:15px;
}

/* =headings ===================================================================

h1
    see #container #header h1 below */

h2 {
  font-family: Verdana, Arial, Helvetica, "sans-serif";
  color: #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 14px;
  margin-bottom: 1.28em;    /* font-size divided by line-height in ems */
}

h3 {
  font-family: Verdana, Arial, Helvetica, "sans-serif";
  color: #000;
  font-size: 14px;
  font-weight: bold;
  line-height: 14px;
  margin: 0.64em 0;         /* font-size divided by line-height in ems */
}

h4 {
  font-family: Verdana, Arial, Helvetica, "sans-serif";
  color: #000;
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
}

/* =links ====================================================================*/
/* Sets the style for unvisited links. */
a,  a:link {
  color: #00529b;
  font-weight: bold;
  text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
  color: #3F82BD;
  font-weight: bold;
  text-decoration: none;
}
/* Sets the style for links on mouseover. */
a:hover {
  color: #3F82BD;
  text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
  color: #3F82BD;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
  color: #3F82BD;
}

/* =tables ===================================================================*/

table {
    border-collapse: collapse;
    border-top: 1px solid #a7b0c9;          /* Blue Nowhere (rgb 167, 176, 201) */
    border-bottom: 1px solid #a7b0c9;
    margin: 10px 0;
    padding: 0;
    text-align: left;
    vertical-align: top;
    width: 100%;
    }

    caption {
        caption-side: top;
        color: #000;
        font-weight: bold;
        margin-top: 15px;
        text-align: left;
        }

    thead, th {
        background-color: #a7b0c9;              /* Blue Nowhere (rgb 167, 176, 201) */
        color: #fff;
        }

    th[scope="row"] {
        background-color: #eeeeee;
		color:black;
		font-weight:bold;
        }

    tr {
        text-align: left;
        vertical-align: top;
        }

    tr.even {
        background-color: #f1f1ee;          /* Warm Grey (rgb 241, 241, 281) */
        }

    td, th {
        padding: 2px;
        text-align: left;
        vertical-align: top;
		border: 1px solid #dddddd;
        }

    tfoot {
        font-style: italic;
        }

table.noborder{
	border-top:none;
	border-bottom:none;
}

/* =container ================================================================*/
#container {
    background: transparent url('http://www.st-andrews.ac.uk/media/sport/images/background_new.png') repeat-y top left;
    clear: both;
    height: auto;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: left; /* Redefines the text alignment defined by the body element. */
    width: 1000px;
    }

/* #container is relatively positioned which means that other elements can be
absolutely positioned relative to it.  I've applied a background image to the
container, and then absolutely positioned images top and bottom, effectively on
a layer above the container.

So you have to take these into account when positioning stuff in the header and
footer as these images are taking up some of the space there.
*/

#container img#bottom {
        bottom: -10px;   /* hack for IE6 - gap shows if bottom: 0;*/
        left: 0;
        position: absolute;
        z-index: 1;
        }

/* =header ===================================================================*/
#container #header {
    background-color: #00529b;
    height: 82px;   /* remember to take into account height of the container top image */
    margin: 0px 20px 0 20px; /* accounts for container's gradient image L and R */
    padding: 0px;
    position: relative;
    top: 0px;
    width: 960px;
    }

    /* text: University of St Andrews */
    #container #header h1 {
      font-family: "Book Antiqua", "Georgia", Times, serif;
      font-size: 26px;
	  line-height:26px;
      font-weight: normal;
      padding-left: 65px;	/* indent from left for text "University of St Andrews" */
      position: absolute;
      top: 16px;
	  left:10px;
      }

    /* image: University crest */
    #container #header img {
        left: 20px;
        position: absolute;
        top: 7px;
        z-index: 99;    /* positions image above #container's top gradient - doesn't work in IE!? */
		border:none;
        }

    #container #header a {
        color: white;
        text-decoration: none;
        font-weight: normal;
        }

	#header form {
		line-height:1em;
		margin:0pt;
		padding:0pt;
		position:absolute;
		right:10px;
		top:0pt;
		width:330px;
	}
	#header form p {
		margin:10px 0pt;
		padding:0 0 0 100px;
		color:white;
		font-size:10px;
	}
	input#q {
		margin-left:57px;
		width:200px;
	}
	input#btnG {
		width:62px;
	}
	#header form p#subcollection {
		margin:0pt 0pt 0pt 57px;
		padding:0pt;
	}

/* =menu ======================================================================*/
#menu {
    /* background-color: set in internal.css, current_students.css or current_staff.css */
    /*height: contained in internal.css or external.css */
    background-color: #4895D9;
	height:36px;
	line-height:36px;
    margin: 0 20px;
    max-width: 960px;
    padding: 0;
    position: relative;
    width: 960px;
    }

#menu h1 {
    font-family: "Book Antiqua", "Georgia", Times, serif;
	display: inline;
    font-size: 1.8em;
    font-weight: normal;
    position: absolute;
    }

#menu h1 a:link, #menu h1 a:visited, #menu h1 a:hover, #menu h1 a:active, #menu h1 a:focus {
    background: #03356B url("http://www.st-andrews.ac.uk/media/sport/images/menu_arrow_staff.gif") no-repeat center right;    /* Staff Blue (rgb 72, 149, 217) */
    padding: 0 100px 0 32px;
    }

#menu h1 a:hover, #menu h1 a:active, #menu h1 a:focus {
    color: #88b3d9;         /* Blue Nowhere a7b0c9 (rgb 167, 176, 201) */
    }


#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	float:right;
	width:auto;
	font-size:14px;
	}

#menu li {
    display: inline;
    float: left;
	position: relative;
	}

#menu a:link, #menu a:visited {
	color: #fff;
	display: block;
	font-weight: normal;
    padding: 0 2px;
	border-right:17px solid #4895D9;
	text-decoration: none;
	min-height:36px;
	}

#menu li a:hover, #menu a:active, #menu a:focus{
background:transparent url(border.png) no-repeat scroll center bottom;
    color: white;
	font-weight:normal;
	}

/* =contentwrapper ===========================================================
This wraps sidebar and all main content */
#container #contentWrapper {
    margin: 0 30px 0 30px;
    position: relative;
    width: 940px;
    }

/* =content ==================================================================*/

	#container #contentWrapper #content #related p{
		margin-bottom:25px;
	}

	#container #contentWrapper #content #related #news ul{
		padding:0;
		margin-top:0;
		list-style:none;
	}

	#container #contentWrapper #content #related #news li{
		padding-bottom:10px;
	}


	#main li{
		padding-bottom:5px;
	}


#container #contentWrapper #content #main .staff{
	height:120px;
}


/* =photo menu list ==========================================================*/
    #container #contentWrapper #content #photomenu {
        clear: both;
        height: auto;
        left: 0;
        margin: 0 0 10px 0;
        padding:0;
        width: 760px;
		height:175px;
        }

	 #container #contentWrapper #content #photomenu ul li p{
			padding:5px 0 5px 5px;
			margin:0;
	 }


    #container #contentWrapper #content #photomenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
		}

    #container #contentWrapper #content #photomenu ul li {
		background-color:#4895d9;
        float: left;
        margin-right: 15px;
        }

    #container #contentWrapper #content #photomenu p{
		padding:0px 5px 2px 5px;
		font-weight:bold;
	}

    #container #contentWrapper #content #photomenu a{
		text-decoration:none;
		color:white;
	}

/* random AU club images */

    #container #contentWrapper #content #au_clubs {
        clear: both;
        height: auto;
        left: 0;
        margin: 0 0 20px 0;
        padding:0;
        width: 600px;
		height:140px;
        }

     #container #contentWrapper #content #au_clubs ul {
        list-style: none;
        margin: 0;
        padding: 0;
		}

    #container #contentWrapper #content #au_clubs ul li {
		background-color:white;
        float: left;
        margin-right: 15px;
        }


/* =sidebar===================================================================*/
#container #contentWrapper #sidebar {
    float: left;    /* sidebar floated left within #contentWrapper */
    margin-top: 15px;
	margin-bottom:155px;
    position: relative;
    width: 170px;   /* IE6 has problems with width 200px */
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
    }

#sport_logo{
	position:absolute;
	left:15px;
	top:-140px;
	margin-bottom: 10px;
}



/* =submenu ==================================================================*/
/* Create gap above and below entire list */
#submenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 165px; /* fix for IE6 to allow hover borders  */
    }

    /* Spacer below list items */
    #submenu li, #submenu ul ul li {
        padding: 4px 0 0 0;         /* GAP BETWEEN LIST ITEMS */
		}

/* Indent sub list */
#submenu ul ul {
    margin: 0 0 0 0;
	padding:0 0 3px 0;
    width: 165px; /* fix for IE6 */
		background-color:#DDEBF9;
    }

    /* Selected item in sub-list -- class applied to the list item tag: <li class="selected"> */
    #submenu ul ul li.selected, .currentbranch3 {
        color: #5f5f5f;                     /* Dark Grey (rgb 95, 95, 95) */
        font-weight: bold;
        padding-left: 5px;
       }

    #submenu ul ul ul li a {  /* Fix for #sidebar spilling contents */
		padding-top:1px;
		padding-left: 25px;
        padding-bottom: 1px;
        width: 137px;
        }

/* Border and padding control left-hand 'tick' marker */
#submenu li a {
    /* Coloured padding found in sidebar colour css file */
    padding: 3px 3px 3px 5px;
	color: #000;
    display: block;
	font-weight: normal;
    width: 157px;  /* fix for IE6 to allow hover borders */
	}

    #submenu li a:link, #submenu li a:visited {
    	text-decoration: none;
    	}

    #submenu li a:hover, #submenu li a:active {
    	text-decoration: none;
		color:white;
		background-color:#4895d9;
		font-weight:normal;
    	}

    /* Selected item on list -- class applied to <a> tag: <a href="#" class="selected"> */
    #submenu a.selected, #submenu li a.selected {
        color: white;
        font-weight: bold;
		background-color:#4895d9;
        }

/* Start added by T4 for SiteManager link menu code */
	#submenu li .currentbranch0 {
		display: block;
		width: 158px;                           /* fix for IE6 to allow hover borders */
        color: white;
		background-color:#4895d9;
        font-weight: bold;
		padding:3px 3px 3px 5px;
	}

	#submenu li .currentbranch0 a{
        color: white;
        font-weight: bold;
		width:153px;
		padding:0;
 	}	
	
	#submenu li .currentbranch0 a:hover{
        color: white;
        font-weight: bold;
 	}

	#submenu li .currentbranch1 {
		color: #2F608C;
		font-weight: bold;
		display: block;
		padding:0 0 0 5px;
	}

	#submenu li .currentbranch1 a{
		color: #2F608C;
        font-weight: bold;
		padding:3px 3px 3px 0px;
 	}

	#submenu li .currentbranch1 a:hover{
		color:white;
	}

	#submenu li .currentbranch2 {
        color: #5f5f5f;
		font-weight: bold;
		display: block;
		padding-left:25px;
	}

	#submenu li .currentbranch2 a {
        color: #5f5f5f;
        font-weight: bold;
		padding-left:0px;
 	}

	#submenu li .currentbranch2 a:hover{
		color:white;
	}

	#submenu li .currentbranch3 {
        color: #334499;
		font-weight: bold;
		display: block;
		padding-left:25px;
	}

	#submenu li .currentbranch3 a {
        color: #5f5f5f;
        font-weight: bold;
	}

	#submenu li .currentbranch3 a:hover{
		color:white;
	}


/* End added by T4 */

        #submenu p a:link, #submenu p a:visited {
            border: 0;
            color: #5f5f5f;                 /* Dark Grey (rgb 95, 95, 95) */
            display: inline;
            margin: 0;
            padding: 0;
            text-decoration: none;
            }

        #submenu p a:hover, #submenu p a:active {
            text-decoration: underline;
            }


/* Formatting of lists in related content */

	#container #contentWrapper #content #related ul{
		list-style:none;
		margin:0;
		padding:0;
	}

	#container #contentWrapper #content #related li{
		margin-bottom:10px;
	}

	#container #contentWrapper #content #related h3{
		color:#5F5F5F;
	
	}

/* =footer ====================================================================*/
#container #footer {
    height: 30px;
    margin: 0px 20px 0px 20px;
	padding:0;
    position: relative;
    width: 960px;
	color:#fff;
	font-size:12px;
	text-align:center;
	z-index:99;
	background-color:#00529b;
    }

#container #footer p{
	padding:0;
	margin:0;
	line-height:30px;
}

#container #footer a{
	font-weight:normal;
	color:#fff;
}

.clear {
    clear: both;
}

/* The .hide class is used with the hidden accessibility link to "Skip navigation to content".
   This method exposes the link when it receives focus, as documented in
   "Web Accessibility: Web Standards and Regulatory Compliance" by Thatcher, et al (friends of ED, 2006),
   page 191 ff. */

.hide a {
    display: inline;
    font-size: 1.2em;
    left: -200em;
    padding: 0 0.5em;
	position: absolute;
    text-decoration: none;
    width: 14em;
    z-index: 2;
	}

.hide a:focus, .hide a:active {
    position: absolute;
    left: 0.5em;
    border: solid #00529b 2px;
    color: #000;
    background: #fff;
    }

.hidden{
	display:none;
	}

/* class timetable */
td.actlife, span.actlife {
background-color:#FAFAD2;
}

td.fitex, span.fitex {
background-color:#CCFFFF;
}

.warning {
background:transparent none repeat scroll 0%;
color:#CC0000;
font-weight:bold;
}


/* events */

#events td{line-height:18px;}
#events ul{
	margin:0;
	padding:0;
	margin-left:25px;
	}
#events li{
	margin:0;
	padding:0;
	margin-top:4px;
	margin-bottom:6px;
	}

.calendar {
	margin: 10px 0 20px 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	}
.calendar caption {
	margin: 0;
	padding: .3em 0;
	background: #fff;
	text-align:center;
	}
.calendar th {
	border-bottom: 1px solid #ccc;
	font-weight: normal;
	}
.calendar td {
	border: 1px solid #fff;
	padding: .1em .3em ;
	width: 1em;
	text-align: center;
	}
.calendar td a {
	color: #000;
	text-decoration: none;
	}

.calendar td.today {
	background: #ffc;
	}
.calendar td.selected {
	border: 1px dotted #ff7800;
	}
.calendar td.highlighted {
	background: #fc9;
	}
	
.calendar td:hover, .calendar td.today:hover, 
.calendar td.selected:hover, .calendar td.highlighted:hover {
	background: #cff;
	border: 1px solid #09f;
	}
	
table.calendar td.pad:hover {
	background: none;
	border: 0;
	}

/* --------------- Twitter feed ----------------------------------------------*/

#twitter_div {margin-bottom: 3em; position: relative;}
#twitter_div a[href^="http:"] {display: inline;margin: 0 !important;padding: 0 !important;}
#twitter_div img {position: absolute; top: -10px; left: 148px;}
#twitter_div a img {border: 0;}
#twitter_div ul#twitter_update_list li {margin-bottom: 1.5em}
#twitter_update_list span {display: block;}
#twitter-link {display:block; text-align:right;}
