/* These styles achieve equal column heights by absolute positioning to the bottom. */
/* Combined 07-Jul-2009 from "Equal Height Columns with CSS" at http://www.couzinhub.com/en/node/146 */
/* the UC template, and COE template, */
/* EXCEPT some styles are renamed for syntax rather than position */
/* and changed .column, markup for .
/* Column widths are controlled in these styles:
	body
	#content-outer
	#content-inner
	.sidemenu
	.displaycanvas
	.sidebar
	#bgdisplaycanvas
*/
/* 1024x768 http://www.useit.com/alertbox/screen_resolution.html */
/* Font sizes for paragraphs are controlled in local styles rather than globally in the body style */
/* Student Vehicle Team colors are used for these styles:
    #navaudience
    #content-inner h1
    #pageheader
    .sidemenu
    .sidebar
    #footer p.slogan
*/
/* Reset all margins and padding from the HTML defaults to 0. */
*{
	margin: 0;
	padding: 0;
}

html {
	color: #000000;
	background: #ffffff url(images/verticalgradientgrays.jpg) repeat;
}

div#uwmadison { 
	padding:0;
}

div#uwmadisoncontent1 {
	padding:0; 
	float:left;
}

div#uwmadisoncontent2 a {
	color:#c7c8ca; /* 40% black -- changed to 25% black */ 
	font-size: 100%;
	text-decoration: none;
}

div#uwmadisoncontent2 a:link {
	color:#c7c8ca; /* 25% black */ 
}

div#uwmadisoncontent2 a:visited {
	color:#c7c8ca; /* 25% black */ 
}

div#uwmadisoncontent2 a:hover {
	color:#990000;
	text-decoration: none;
}

div#uwmadisoncontent2 a:active {
	color:#c7c8ca; /* 40% black */ 
}

/* START INTERACTIVE UW CREST */
a#interactiveUWcrest img {
	border-width: 0;
	background: url(http://www.engr.wisc.edu/logos/pics/UWcrest13x20gray.png);
}

a#interactiveUWcrest:hover img {
	background: url(http://www.engr.wisc.edu/logos/pics/UWcrest13x20.png);
}

/* END INTERACTIVE UW CREST */
body { 
	position: relative; 
	top: 20px; /* Sets the distance of the small gray UW crest from the top. */
	margin: 0 auto;
	padding: 0;
	font: 0.9em/1.25 "Trebuchet MS","Lucida Grande",arial,helvetica,sans-serif; 
	width: 1024px;
}

.screenreader {
	position:absolute;
		top:-1000px;
	left:-1000px;
	width:1px;
	height:1px;
	overflow:hidden;
	visibility:hidden;
	z-index:-1000;
}

#frame {
	position: relative;
	border: 1px solid #1a1e21;
}

#navaudience {
	height: 30px;
	background-color: #1a1e21;
}

#navaudience ul {
	display: block;
	margin:0;
	padding: 0.5em 0 0 0em;
	/* padding: 0.5em 0 0 5em;  Use to insert a small UW crest */
	font-size: 80%;
	font-weight: bold;
	text-align:left;
	color: #ffffff;
}

#navaudience li {
	display: inline;
	padding: 0em 1.0em 0em 1.5em;

}

#navaudience a { text-decoration: none; padding: 0.5em 1.75em;}
#navaudience a:link { color:#cccccc; }
#navaudience a:visited { color:#cccccc; }
#navaudience a:hover { color:#ffffff;background-color:#717171; }
#navaudience a:active {
	color:#f7c825;
	font-size: 100%;
}

#navsearch {
	color: #95774c;		/* gold */
        background-color: #000000;
	font-weight: bold;
	font-size: 75%;
	position:absolute;
		top:27px;
		right:0px;
	z-index:4;
	padding: 0.25em 0.25em 0.25em 1em;
}

#navsearch input {
	vertical-align:middle;
}

#collegeindex {
	color: #95774c;		/* gold */
        background-color: #000000;
	font-weight: bold;
	font-size: 75%;
	position:absolute;
		top:20px;
		right:0px;
	z-index:4;
	padding: 0.25em 0.25em 0.25em 1em;
}

#banner {
	clear:both;  /* Maybe unnecessary */
        background-color: #ffffff;
	text-align:left;
	color: #000000;
	padding: 20px;  /* not ems, to set height for the photo */
}

#bannerphoto {
	/* NOTE: The URL below sets a default image. Use if needed. Ordinarily, an img src for this site is specified in the HTML page. */
        /* background-color: transparent url(http://slc.engr.wisc.edu/images/2008jackson_aliciaWEB.png) norepeat; */
	position:absolute;
		top:0px;
		right:0px;
	z-index:3;  /* tested */
}

#breadcrumbs {
	color: #464749;  /* black80pct */
	background-color: transparent;
	padding: .125em;
	height: 20px;
}

#breadcrumbs p {
	text-align:right;
	color: #464749;  /* black80pct */
	background-color: transparent;
}

/* SIDEMENU */
/* http://www.alistapart.com/articles/horizdropdowns/ */
#sidemenu {
	color: #ffffff;
	background-color: #000000;
}

#sidemenu ul {
	font-size:85%;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #cccccc;
}

#sidemenu ul li {
	position: relative;
	display: block;
}

#sidemenu li ul {
	position: absolute;
	left: 149px;
	top: 0;
	color: #ffffff;
	background-color: #000000;  /* for IE */
	font-size:100%;
	display: none;
}

#sidemenu ul li a {
	display: block;
	text-decoration: none;
	font-weight: bold;
	padding: 0.5em;
	color: #ffffff;
	background: rgb(0,0,0); /* ignored by IE */
	border: 1px solid #cccccc;
	border-bottom: 0;
}

#sidemenu ul li a:hover {
	color: #ffcc33;
	background-color: #1a1e21;
	border-right: 6px solid #ffcc33;  /* gold */
}

#sidemenu li:hover ul { 
	display: block;
	color: #ffffff;
}

#sidemenu p {
	background-color: #000000;
	font-size: 75%;
	padding: 1em;
}

#sidemenu a {
	color: #ffffff;
}


/* SIDEBAR */
#sidebar {
	color: #000000;
	background-color: #cccccc;
}

#sidebar.inner {
	font-size: 100%;
	padding: 0.5em;
}

/*
#sidebar.inner a {
	font-weight: bold;
	text-decoration: none;
}

#sidebar.inner a:visited {
	color: #666666;
	background-color: #cccccc;
}

#sidebar.inner a:hover {
	color: #cc9900;
	background-color: #cccccc;
	text-decoration: none;
}

*/

#sidebar.inner ul {
	margin: 0;
	padding: 0 0 0 1em;
	list-style: none;
}

#sidebar.inner ul li {
	font: 90%/1.2 "Trebuchet MS",arial,helvetica,sans-serif;
	position: relative;
	display: block;
}

#sidebar.inner li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
}

#sidebar.inner ul li a {
	display: block;
	text-decoration: none;
	color: #000000;
	background-color: #cccccc;
}

#sidebar.inner li:hover ul { 
	display: block;
	color: #cc9900;
}

#sidebar.inner ul li ul li {
	font-size: 75%;
}

#sidebar.inner ul li ul li a {
	text-decoration: none;
	color: #ffffff;
	background-color: #cccccc;
}

#sidebar.inner a:hover { 
	color: #be0f24;
}

/* DISPLAY CANVAS */
#content-outer {
	float: left;
	width: 100%;
	margin-right: -100%;
}

.column {
	float: left;
}

#content-inner {
	float: none;
/*	background-color: #ffffff; */
	margin-left: 150px;  /* LEFT COLUMN (sidemenu) width */
	margin-right: 150px; /* RIGHT COLUMN (sidebar) width */
	padding: 0em 1.4em 0em 1.4em;  /* adjusted for banner photo */
	border-left: 1px solid #cccccc;
}

#content-inner a { font-weight: bold; text-decoration: none; border-bottom: 1px dashed #be0f24; }
#content-inner a:link { color:#be0f24; background-color: #ffffff; }
#content-inner a:visited { color:#464749; background-color: #ffffff; } /* black80pct */
#content-inner a:hover { color:#be0f34; background-color: #ffffff; }
#content-inner a:active { color:#be0f34; background-color: #ffffff; }
#content-inner h1 {
	font-size: 140%;
	color: #000000;  /* changed for this site */
	background-color: #ffffff;
	padding-top: 1em;
	padding-bottom: 0.5em;
}

#content-inner h2, h3, h4 {
	color: #464749;  /* 80% black */
	background-color: #ffffff;
	padding-top: 1em;
	padding-bottom: 0.5em;
}

#content-inner p {
	line-height: 1.5;  /* no units -- a multiplicative factor */
	padding-top: 1em;
}

.aside {
	float: right;
	color: #464749;  /* black80pct */
	background-color: #ffffff;
	margin: 1em;
	padding: 0.5em;
	line-height: 1em;
	width: 150px;
	border: 1px solid #95774c;  /* dark gold for 16-million-color systems */
}

.quote {
	font-style: italic;
	font-size: 120%;
	text-align: center;
}

.quoteauthor {
	font-size: 90%;
	text-align: right;
}

#sidebarright {
        float:right;
        color:#333333;
        background-color:#ffffff;
        margin:1em 0em 0em 1em;
        padding:1em;
        width:33%;
        border: 1px solid #be0f24;
}
#sidebarright h1 {
        font-size:100%;
        color:#be0f24;
        background-color:#ffffff;
}
#sidebarright p {
        font-size:90%;
}
#sidebarright img {
        display: block;
        width: 118px;
        margin: 0 auto;
}

/* Name changed from .left */
.sidemenu  {  
	width: 150px;		/* LEFT COLUMN width */
	margin-right: -150px;	/* LEFT COLUMN width */
}                        

/* Name changed from .center */
.displaycanvas  {   
	width: 625px;  /* not sure this value is OK cross-browser */
	font-size: 90%;  /* be careful with this -- possible cascading effects */
}

/* Name changed from .right */
.sidebar {
	float: right !important; /* Note in the markup that the .column style is called first. The important marker protects the float right. If the sidebar style were ever moved in the list, the float:left in the .column style might override it. */
	width: 150px;		/* RIGHT COLUMN width */
}

.bg {
	position: absolute;
	bottom: 0;
	height: 100%;
}

/* positions */
#bgsidemenu {
	left:0;
}

#bgsidebar {
	right:0;
}

#bgdisplaycanvas {
	right: 0;
	width: 100%;
}

#footer {
	clear:both;  /* Maybe unnecessary */
	position: relative;
	bottom: -50px;
	clear: both;
	text-align: center;
	color: #000000;
	background-color: transparent;
}

#footer p.slogan {
	font-size: 110%;
	font-weight: bold;
	font-style: italic;
	line-height: 1.1em;
	height: 22px;
	text-align: center;
	color: #fff5df;  /* parchment */
	background-color: #1a1e21;  /* Vehicles dark gray 1 */
	margin-bottom: 1em;
}

#footer p {
	font-size: 70%;
	line-height: 1.5em;
	text-align: center;
}

/* footer link styles same as those for content-inner */
#footer a { font-weight: bold; }
#footer a:link { color:#000000; text-decoration:underline; }
#footer a:visited { color:#222222; text-decoration:underline; }
#footer a:hover { color:#ffffff; text-decoration:underline; }
#footer a:active { color:#ffffff; text-decoration:underline; }

#content-outer, #sidemenu, #sidebar, #banner, #footer{  /* sets the content containers above the backgrounds */
	position:relative;
	z-index:2;
  }

/*
#content-outer {
	border: 1px solid #cccccc;
}

*/
/* colors */
#bgsidemenu {
	background-color: #bed2da;  /* must be the same as sidemenu */
}

#bgsidebar {
	background-color: #cccccc;  /* must be the same as sidebar */
}

#bgdisplaycanvas {
	background-color:#ffffff;  /* must be the same as content-inner */
}

div#pageheader {
	margin:0;
	padding:0;
        position:relative; top:0px; left:-25px;
        width: 730px; /* OK for all browsers */
        height: 27px;
}

div#pageheadercontent {
	padding:0em 0em 0.25em 1em;
        font: bold 120%/1.5 "Trebuchet MS",arial,helvetica,sans-serif;
        color:#ffffff;
        background-color: #be0f24;

}

div#pageheadercontent a {
        color:#ffffff;
}

div#pageheadercontent a:link {
        color:#ffffff;
}

div#pageheadercontent a:visited {
        color:#ffffff;
}

div#pageheadercontent a:hover {
        color:#8ec8ff; /*very light ocean blue */
}

div#pageheadercontent a:active {
        color:#ffffff;
}

img { border-style:none;}
ul,ol { 
	margin-left:20px;
}
ul li { list-style-type:square;}
#floatright { float:right; }
#floatleft { float:left; }
#clearboth { clear:both; }

/* Thanks to Mandarin Design for the tip: www.mandarindesign.com/dropcaps.html. */
.dropcap60 {
  float:left;
  color:#be0f24;  /* UW red */
  font-size:60px;
  line-height:45px;
  padding-top:3px;
  padding-right:1px;
  font-family: "Trebuchet MS","Lucida Grande",arial,helvetica,sans-serif;
}

.dropcap38 {
  float:left;
  color:#8ca1ad;
  font-size:38px;
  line-height:30px;
  padding-top:2px;
  font-family: "Trebuchet MS","Lucida Grande",arial,helvetica,sans-serif;
}

.imgleft {
  padding-right: 10px;
  text-align:left;
  color:#ffffff;
  float:left;
}

.imgright {
  padding-left: 10px;
  text-align:right;
  color:#ffffff;
  float:right;
}

.imgcenter {
  padding-right: 10px;
  padding-left: 10px;
  text-align:center;
  color:#ffffff;
  z-index:1000; /* for images inside gradients */
}

.caption { 
	font:bold 0.85em/1.0 "Trebuchet MS",arial,helvetica,sans-serif; 
}

.captionctr { font-size: 9pt; 
              text-align: center;
}

.captionPDF { font-size: 7pt; 
              text-align: center;
}

tr.borders {
        font-size: 95%;
        text-align:center;
        background-color: #eeeeee;
}

tr.borders th,td {
	padding: 1em;
}

/* START INTERACTIVE BUTTONS */
a#interactivebutton img {
        border-width: 0;
        background: url(http://slc.engr.wisc.edu/images/FeedbackSurveyButtonDown.gif);
}
a#interactivebutton:hover img {
        background: url(http://slc.engr.wisc.edu/images/FeedbackSurveyButtonUp.gif);
}
a#interactivegiftbutton img {
        border-width: 0;
        background: url(http://slc.engr.wisc.edu/images/MakeaGiftButtonDown.gif);
}
a#interactivegiftbutton:hover img {
        background: url(http://slc.engr.wisc.edu/images/MakeaGiftButtonUp.gif);
}
/* Thanks, Eric Meyer: http://www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html */
/* NOTE: The path of the image is relative to the location of the CSS file, not the HTML page that cal
ls it. */

/* Incipit (pronounced inchipit) is a style for the first few words in each article.     */
/* An additional style is defined in the template, which takes                           */
/* precedence over this one. It uses the color variables defined in the EMLVARS file.    */
.incipit {
	color: #333333;
	font-weight: bold;
	text-transform: uppercase;
}
.bold { font-weight: bold; }
.italic { font-style: italic; }
.bolditalic { font-weight: bold; font-style: italic; }
.small { font-size:small; }
.smaller8 { font-size: 8pt; }
.smaller9 { font-size: 9pt; }
.smallest { font-size: 7pt; }
.center { text-align: center; }

/* UW-MADISON STANDARD COLORS */
.white { color:#ffffff; }
.white_background { background-color:#ffffff; }
.red { color: #be0f24; }
.red_background { background-color: #be0f24; }
.darkgold { color: #cc9900; }
.darkgold_background { background-color: #cc9900; }
.gold { color: #ffcc33; }
.gold_background { background-color: #ffcc33; }
.black { color:#000000; }
.black_background { background-color:#000000; }

/* COE STANDARD COLORS */
.gray { color:#cccccc; }
.gray_background { background-color:#cccccc; }
.lightgray { color: #eeeeee; }
.lightgray_background { background-color: #eeeeee; }

/* THIS THEME COLORS */
.darkgold16M { color: #95774c; }  /* for 16-million-color systems */
.darkgold_background16M { background-color: #95774c; }
.darkergold16M { color: #4d3d26; }  /* darker, for text, for 16-million-color systems */
.darkergold_background16M { background-color: #4d3d26; }
.parchment { color: #fff5df; }
.parchment_background { background-color: #fff5df; }
.black25pct { color: #c7c8ca; }
.black5pct_background { background-color: #c7c8ca; }
.black40pct { color: #a7a9ac; }
.black40pct_background { background-color: #a7a9ac; }
.black80pct {color:#464749;}
.black80pct_background { background-color: #464749; }
.vehiclesdarkgray1 { color:#1a1e21; }
.vehiclesdarkgray1_background { background-color: #1a1e21; }
.vehiclesdarkgray2 { color:#717171; }
.vehiclesdarkgray2_background { background-color: #717171; }
.vehiclesdarkgray3 { color:#909090; }
.vehiclesdarkgray3_background { background-color: #909090; }
.vehiclesgold1 { color:#f7c825; }
.vehiclesgold1_background { background-color: #f7c825; }


/* UNORDERED LISTS */
.redsquare    { list-style-type:square;color:#be0f24; }
.goldsquare   { list-style-type:square;color:#ffcc33; }
.dkbluesquare { list-style-type:square;color:#000066; }
.bluesquare   { list-style-type:square;color:#66ccff; }
ul.nobullet, li.nobullet      { list-style-type:none; }
