/* Style for the MSCS website

   Has 4 flow elements:
	- content
	- footer
	- vuwfooter
	- pageinfo
   and 3 absolute-positioned elements:
	- banner
	- primarynav
	- secnav

   The absolute elements are positioned in the margins of the flow elements.

   Note: Konqueror hack has the vuwlogo positioned inside a div, because 
   otherwise the background image repeats with small window-sizes
 */

/* Site banner (top) */
div#banner
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 130px;
	background: #336666 url("/images/2004/strip3.jpg") no-repeat 20px 20px;  
}

img#vuwlogo
{
	width: 125px;
	height: 89px;
	border-style: none;
}

/* Work around a bug(?) in Konqueror where the background repeats under the logo. Originally most of these properties were in the image itself */
div#vuwblock
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 125px;
	height: 89px;
	background-color: #336666;
	padding: 20px 25px 21px 25px;
}

#banner ul
{
	position: relative; /* Need for z-index? */
	top: 0px; /* also? */
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 111;
}

#banner ul li
{
	float: right;

	font-size: smaller;
	font-weight: bold;
	color: #FFFFFF;
	margin: 0;
	height: 16px;
	padding: 2px 4px;
	text-align: center;
	background-color: #336666;
}

#banner ul li ul {
	display: none;
}

#banner ul li ul li
{
	float: none;
	padding: 0px 4px;
	text-align: left;
}

#banner ul li:hover ul, #banner ul li:focus ul
{
	display: block;
}

#banner .over ul /* For IE */
{
	position: relative;
	display: block;
	width: 1px;
}

#banner a
{
	background: transparent;
	padding-right: 0px;
	color: #FFFFFF;
	text-decoration: none;
}

#banner a:hover, #banner a:focus
{
	text-decoration: underline;
}
/* Primary nav (top) */
div#primarynav
{
	position: absolute;
	top: 130px;
	left: 175px;
	right: 0px;
	height: 30px;
	
	padding: 0;
	margin: 0;

	color: #FFFFFF;
	background-color: #669999;
	font-weight: bold;
}

/* PRIMARY NAV (above content) */

#primarynav ul
{
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}
#primarynav li
{
	padding: 5px 5px 5px 10px;
	float: left;
}
#primarynav a 
{
	color: #FFFFFF;
	text-decoration: none;
	width: auto;
}
#primarynav a:hover, #primarynav a:focus
{
	color: #fdf2c5;
	text-decoration: underline;
}
#primarynav em
{
	text-decoration: underline;
	font-style: normal;
}
/*
#primarynav li a[accesskey]:hover:after, #primarynav li a[accesskey]:focus:after 
{
	content: " [" attr(accesskey) "] ";
}
*/
/* Position the secondary navigation section */
div#secnav
{
	position: absolute; 
	top: 130px;
	left: 0;
	width: 155px;

	margin: 30px 10px 10px 10px;
}

/* SECONDARY NAVIGATION (currently LHS) */


/* Turn off indentation on unordered lists */
#secnav ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Set BG Colour of list items to primary (will turn off later) */
#secnav ul li
{
	background-color: #336666;
	list-style: none;
}

/* Set bgcolor of nested uls to background, so we can have a gap between*/
#secnav ul li ul
{
	padding-bottom: 15px;
	background-color: #CCCCCC;
}


/* Pad out list items - a few pixels to the top and left */
#secnav ul li ul li
{
	display: block;
	padding: 2px 0px 0px 7px;
	margin: 0;
	color: #336666;
	background-color: #99CCCC;
}

/* Turn off bgcolor / gap for nested lists, because we don't want a gap */
#secnav ul li ul li ul
{
	padding-top: 0px;
	padding-bottom: 0px;
	background-color: transparent;
}

/* Headings for each set of links */
#secnav ul li div, #secnav ul li span, #secnav ul li a
{
	display: block;
	padding: 2px 7px 5px 7px;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

/* Props for each set of second-level (and below) links */
#secnav ul li ul li div, #secnav ul li ul li span, #secnav ul li ul li a
{
	display: block;
	padding: 0;
	color: #336666;
	font-weight: bold;
	text-decoration: none;
}

#secnav ul li a:hover, #secnav ul li a:focus
{
	background-color: #669999;
}

#secnav ul li ul li a:hover, #secnav ul li ul li a:focus
{
	background-color: #669999;
}

/*
#secnav ul li ul li a[accesskey]:hover:after, 
#secnav ul li ul li a[accesskey]:focus:after 
{
	content: " [" attr(accesskey) "] ";
}
*/
/* MAIN CONTENT STYLE
   Absolute-positioned content is inside the margin / padding of this element
 */

div#content
{
	margin: 125px 0px 0px 175px;
	padding: 10px;
}

#content ul
{
	margin: 0 0 4px 0;
	padding: 0;
	list-style: none;
}

#content ul li
{
	list-style: none;
	padding-left: 15px;
	background-image: url(/images/2004/bullet.gif);
	background-repeat: no-repeat;
	background-position: 0 0.2em;
}
#content ul li ul li
{
	list-style: none;
	padding-left: 12px;
	background-image: url(/images/2004/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0 0.5em;
}

/* Making Micro Icons appear after email and external links */
/* Method found here: http://web-graphics.com/ & http://my-dimension.com/article/mini_icons/ */
/* Method originated here: http://www.kryogenix.org/days/173.html */
/* Added whitespace:nowrap; to fix wrapping problem, thanks Andreas Bovens */
/* Selectors: http://www.w3.org/TR/2001/CR-css3-selectors-20011113/ */
/* white-space: nowrap; */

#content a[href^="mailto:"] {
background: transparent url(/images/2004/bullet-email.gif) 100% 50% no-repeat;
padding-right: 10px;
}

#content a[href^="http:"], #content a[href^="https:"] {
background: transparent url(/images/2004/bullet-external.gif) 100% 50% no-repeat;
padding-right: 10px;
}

/*
#content a[href^="http://www.vuw.ac.nz/"] {
background: transparent url('/images/2004/bullet-vuw.gif') 100% 50% no-repeat;
padding-right: 18px;
}

#content a[href$=".pdf"] {
background: transparent url('/images/2004/bullet-pdf.gif') 100% 50% no-repeat;
padding-right: 18px;
}

#content a[href$=".doc"] {
background: transparent url('/images/2004/bullet-doc.gif') 100% 50% no-repeat;
padding-right: 18px;
}

#content a[href$=".ps"] {
background: transparent url('/images/2004/bullet-ps.gif') 100% 50% no-repeat;
padding-right: 16px;
}
*/
table.coursetable {
    border-collapse: collapse;
    padding-bottom: 20px;
    width: 100%;
}

table.coursetable td p {
    margin-top: 0;
}

table.coursetable th  {
    width: 15%;
}
table.coursetable tr.toprow td, table.coursetable tr.toprow th {
    margin: 10px; padding: 0;
    border-bottom: 2px solid;
    border-color: black;
}
table.coursetable .crn {
    text-align: right; 
    float: right;
}
table.coursetable .coursetitle {
    font-weight: bold;
}
table.coursetable .rightcolumn {
    border-left: 2px solid; 
    padding-left: 10px;
    border-color: black;
}

.courseindexlight {
        background-color: #9cb5b5;
        color: #000000;
}
.courseindexlight a,
.courseindexlight a:link,
.courseindexlight a:visited {
        text-decoration: none;
        color: #000000;
        }
.courseindexlight a:hover {
        text-decoration: underline;
        color: #fdf2c5;
        }

.courseindexdark {
        background-color: #326462;
        text-align: center;
        color: #ffffff;
}
.courseindexdark a,
.courseindexdark a:link,
.courseindexdark a:visited {
        text-decoration: none;
        font-weight: normal;
        color: #ffffff;
        }
.courseindexdark a:hover {
        text-decoration: underline;
        color: #fdf2c5;
        }
div#footer
{
	background-color: #99CCCC;
	margin: 0 0 0 175px;
	padding: 0;
	clear: both;
}

div#vuwfooter
{
	background-color: #336666;
	margin: 0 0 0 175px;
	padding: 0;
}

div#pageinfo
{
	background-color: #336666;
	margin: 0 0 0 175px;
	padding: 0;
}  

/* FOOTER NAV */
#footer ul, #vuwfooter ul
{
	padding: 6px;
	margin: 0;
	list-style: none;
	color: #336666;
	font-weight: bold;
}
#footer li, #vuwfooter li
{
	padding: 4px;
	display: inline;
}
#footer a
{
	color: #336666;
	text-decoration: none;
}
#footer a:hover, #footer a:focus
{
	color: #000000;
	text-decoration: underline;
}
#footer em
{
	text-decoration: underline;
	font-style: normal;
}

#vuwfooter a, #pageinfo a
{
	color: #FFFFFF;
	text-decoration: none;
}
#vuwfooter a:hover, #vuwfooter a:focus, #pageinfo a:hover, #pageinfo a:focus
{
	color: #CCCCCC;
	text-decoration: underline;
}
#pageinfo p
{
	color: #FFFFFF;
	margin: 0;
	padding: 0 10px 4px 10px;
}

body
{
	margin: 0;
	padding: 0;	

	/* Faux columns: http://www.alistapart.com/articles/fauxcolumns/ */
	background: #FFFFFF url("/images/2004/bg.gif") repeat-y 0 0;
	font-size: 80%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

table, tbody, th, td, p, input, dt, dd, dl
{
	font-size: 1em;
}

div#breadcrumbs
{
	font-size: 0.7em;
	margin-bottom: 5px;
}

div#year
{
	font-size: 0.7em;
	margin-bottom: 5px;
	float: right;
}


/* Anchor tags, site-wide */
a
{
	color: #336666;
}
a:hover, a:focus, a:visited:hover
{
	color: #000000;
}
a:visited
{
	color: #339999;
}

h1   /*  #pagetitle  removed page title from banner -Rob  */
{
 /* position: absolute;   removed page title from banner -Rob   */
	top: 45px;               
	left: 195px;    
	right: 10px;

	 z-index: 11; /* Below #banner ul */
	padding: 0px;
	margin: 0px;

	font-size: 1.9em;
	font-weight: bold;
	color: #336666 ;
}   
h2, h3, h4, h5, h6
{
	font-weight: normal;
	color: #336666;             
}
h2
{
	font-size: 1.5em;
}
h3
{
	font-size: 1.4em;
}
h4
{
	font-size: 1.2em;
}
h5
{
	font-size: 1.0em;
}
h6
{
	font-size: 0.9em;
}

hr
{
	/*clear: both; */
}

th, td
{
	text-align: left;
	vertical-align: top;
}


/* Temporary: Hide the ul's inside "hidden" list items */
li.hidden ul
{
	display: none;
}

li.hidden:hover ul
{
	display: block;
}

/* If we're wrapping an info-box (to group them together), change the padding
   and positioning */
div.infoboxwrapper
{
	position: relative;
	float: right;
	padding: 0;
	margin: 0 0 0 5px;
}
div.infoboxwrapper div.infobox, div.infoboxwrapper div.staffimagebox
{
	float: none;
	margin-bottom: 5px;
	clear: right;
}


/* Floating box, used on staff pages */
div.staffimagebox
{
	position: relative;
	float: right;
	width: 150px;
	border: 1px #336666 solid;
	margin: 0 0 5px 0;
	padding: 5px;
	clear: right;
}
div.staffimagebox p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-style: italic;
	font-size: smaller;
	text-indent: 0;
}
div.staffimagebox img {
	border: 1px #336666 solid;
	margin: 0;
	padding: 0;
	width: 134px;
}


div.infobox
{
	position: relative;
	float: right;
	width: 150px;
	border: 1px #336666 solid;
	background-color: #CCCCCC;
	margin: 0 0 5px 0;
	padding: 5px;
	clear: right;
}
div.infobox img
{
	width: 140px;
	border: 1px #336666 solid;
}

abbr[title], acronym[title], span[title], strong[title] 
{
	border-bottom: thin dotted;
	cursor: help;
}