/*-----------------------------------------------------------------------------------------------
Screen Style Scheet for: 
**Art Department Website**
**http://www.art.wisc.edu/**
**ANY OTHER IMPORTANT INFORMATION ABOUT WEBSITE**

css coding by **Craig Burk**
 
MAIN COLORS:
** #333333 dark gray main text, category subheadings (H4 and beyond) **
** #727272 medium gray secondary links **
** #CCCCCC gray fill boxes **
** #990000 red highlights, headings **
** #68502C gold links **

------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------
	USAGE NOTES - mostly from the W3C
------------------------------------------------------------------------------------------------*/
/* Try to use relative length units and percentages. CSS allows you to use relative units even in absolute positioning.
   Thus, you may position an image to be offset by "3em" from the top of its containing element. 
   This is a fixed distance, but is relative to the current font size, so it scales nicely.  (http://www.w3.org/TR/WCAG10-CSS-TECHS/#units)

   Try not to use absolute length units unless the physical characteristics of the output medium are known,
   such as bitmap images.  (http://www.w3.org/TR/WCAG10-CSS-TECHS/#units)
   
   "display: none;" also hides content from screen readers and should only be used to hide temporary info useful to the developer.
   We also think it is ok to use for the print style sheet.
*/

/*-----------------------------------------------------------------------------------------------
	HTML TAG-SPECIFIC STYLES
------------------------------------------------------------------------------------------------*/

/*******************
 BODY
*******************/


body {
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-color: #8C8C8C;
	text-align: center;
}

/* this must be here for firefox to stretch 
   the content for the body and html class */
body, html { height: 100%; }

/*-----------------------------------------------------------------------------------------------
	GENERIC CLASSES
------------------------------------------------------------------------------------------------*/
/*hides content when css is enabled*/
p.accessible {
	text-indent: -9000px;
	margin: 0px;
	height: 0px;
}
* html p.accessible {
	/*position: absolute;*/
	height: 1px;
	overflow:hidden;
}

.clearBoth {
	clear: both;
	display:block;
	height: 0px;
	width: 0px;	
}
* html .clearBoth {
	height:1px;
	overflow:hidden;
	margin-top: -1px;
}
	
/*-----------------------------------------------------------------------------------------------
	MAIN STRUCTURE STYLES
------------------------------------------------------------------------------------------------*/
div#Container {
	margin: 0px auto; /* auto centers the entire thing in Firefox */
	padding: 0px;
	border: 0px;
	width: 800px;
	text-align: left;
	background: #FFFFFF url(/_images/template/background.jpg) repeat-y;
}
/* we should list common container layout options here (aka, floating restricted-width content box (original CEW design), etc) */

/*
 extra container to allow footer to stick to bottom of page
*/


div#Header div{
	background-color: #CCCCCC;
	color: #666666;
}
div#CrestContainer {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	width: 0px;
	height: 0px;
	z-index: 2;
}
div#Crest {
	position: absolute;
	left: 746px;
	
}
div#Header #SearchAndOptionLinks {
	float: left;
	padding: 5px 10px 6px 10px;
}
div#Header #UWBreadcrumbLinks {
	float: right;
	padding: 8px 60px 8px 10px;	
}
div#Masthead {
	text-indent: -9000px;
	margin: 0px;
	padding: 0px;
	height: 0px;
	width: 0px;
}
* html div#Masthead  { 
/* tells IE 6 to ignore this div's height */
	height:1px;
	overflow:hidden;
	margin-top: -1px;
}
div#Masthead h1{
	text-indent: -9000px;
	margin: 0px;
	padding: 0px;
	height: 0px;
	width: 0px;
}

div#Main {
	clear: both;
	margin: 0px 10px 0px 10px;
	border-top: 10px solid #FFFFFF;
	background: #FFFFFF;
	
	
}

/* this section is probably unnessary once the flash piece is in place. will also have to remove height limitations on div#NavigationColumn */
div#Navigation {
	height: 174px; /*was 174 */
}
* html div#Navigation {
	height: 169px; /*was 169 */
}

div#NavigationColumn {
	width: 291px;
	height: 543px;
	float: left;
	border-right: 10px solid #FFFFFF;
	/*background-color: #336699;*/
}
div#NavigationColumn.interior {
	height: 693px;
}
div#Content {
	margin: 0px;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	width: 477px;
	height: 541px;
	overflow: auto; 
	
	scrollbar-base-color: #E5E3D9;
	float: left;
	
}
div#Content.interior {
	height: 691px;
}

div#ArtInfoContainer {
	clear: both;
	/*position:relative;
	top: 10px;
	background-color: #CCCCCC;*/
	margin: 0 10px 0 10px;
	border-top: 10px solid #FFFFFF;
	height: 0px;
}

div#ArtInfo {
	margin-top: 10px;
	text-align: right;
	width: 271px; /* width 291 if you want it to be right at the edge of the navigationContainerWidth */
	float: left;
}

div#PrimaryImage img { /* the square image below the menu and art logo */
 	width: 289px;
 	border: 1px solid #999999;
	overflow: hidden;
}

div#PrimaryImageCaption {
	margin: 5px 0px 0px 8px;
	color: #666666;
}
div#SecondaryImage { /* the container for the horizontal rectangular image on the splash page */
	float: right;
}
div#SecondaryImage img{
	width: 486px;
	border: 1px solid #999999;
}
div#Footer {
	clear: both;
	/*position:relative;
	top: 20px;
	margin: 10px;*/
	padding: 8px 12px 0 12px;
	border: 0px;
	background-color: #CCCCCC;
	color: #666666;
	
	margin: 0 10px 0 10px;
	border-top: 10px solid #FFFFFF;
}
* html div#Footer { /* the top padding creates too much space in IE */
	padding-top: 0px;
}
div#Footer #Copyright{
	float: left;
}
div#Footer #FooterLinks{
	float: right;
	text-align: right;
}


/*-----------------------------------------------------------------------------------------------
	NAVIGATION
------------------------------------------------------------------------------------------------*/
/* IE 5 hack for padding on a defined height or width for a div 
* html div#divName {
}
*/
div#MainMenu {
	height: 166px; /*width: 271px; /* width 291 if you want it to be right at the edge of the navigationContainerWidth; */
	overflow: hidden;
	width: 271px;
}

div#MainMenu #MainLinks {
	float: left;
}
div#MainMenu #SubMenu{
	float: right;
	
}
div#MainMenu #SubMenu.nonIE {
	margin-left: 100px;
	top: 4.7em;
}
div#SubMenu {
}


div#QuickLinks {
}

div#Resources {
}


/*-----------------------------------------------------------------------------------------------
	TESTING DURING DEVELOPMENT
------------------------------------------------------------------------------------------------*/
/* we need to hide these links when a client is reviewing the website.  We need to move those links before publishing*/
div#DevLinks { 
	margin-top: 15px; 
	font-size: .6em;
	color: #898989;
	/*display: none;*/
	/* NOTE:  "display: none;" also hides content from screen readers and should only be used to hide developer resources and info.*/
}

/*-----------------------------------------------------------------------------------------------
	SPLASH PAGE STYLES
------------------------------------------------------------------------------------------------*/
/**ANY OTHER ADDITIONAL SECTIONS HERE, USE THE SAME LABELlING FORMAT**/