/* -----------------------------------------------------------------------------------------------
 This template contains all of the styles to be used within WM2 and will be the foundation for designing new sites for JMU 
 
version:	1.0
author:		Paul Shearman
email:		shearmpj@jmu.edu
website:	http://www.jmu.edu
------------------------------------------------------------------------------------------------- */

/* The structure of this document is as follows:
	~ Left column content styles - including secondary navigation
	~ Middle column content styles - including flash object
	~ #footer style - #jmuFooter is styled in the global style sheets
		
	~ Style headings are preceeded with = (i.e. =Global styles)
	~ Styles available to tiny MCE at labled with :TinyMCE
	~ Things that need attention are labeled with :TODO
	~ Workarounds are explained with :KLUDGE
	~ Bugs are identifies with :BUG
	
--------------------------------------------------------------------------------------------------- */

/* Middle Content area - This is the box that is contained within #container and encompases the page content */

#middle {
	width: 982px;
	min-height: 100px;
	float: left;
	background: #cc9 url('//www.jmu.edu/jmuweb/wm_ssi/images/jmuAlt2.gif');
	} 

/* =Left Column content styles
------------------------------------------------------------------------------------- */
#leftcontent {
	width: 192px;
	float: left;
	padding: 10px;
	} 

#vertNav { 
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-weight: bold;
	}

#vertNav li {
	color: #fff;
	margin-left: -20px;
	font-family: Georgia, Times, serif;
	text-transform: uppercase;
	font-size: 133%;
	}

#vertNav a {
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	font-size: 80%;
	text-transform: none;
	}
#vertNav ul li {
	font-size: 90%;
	}	
	
#vertNav li a {
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 5px 0 5px 5px;
	border-bottom: 1px solid #ffc;
	}
		
#vertNav li ul {
	font-weight: normal;
	text-indent: 20px;
	list-style-type: none;
	}

#vertNav li a:link, #vertNav li a:visited { 
	color: #450084;
	text-decoration: none;
	}

#vertNav li a:hover, #vertNav li a:active {
	color: #450084;
	text-decoration: none;
	background-color: #ffc;
	}
	
#vertNav li ul li a:link, #vertNav li ul li a:visited {
	color: #450084;
	text-decoration: none;
	}
	
#vertNav li ul li a:hover, #vertNav li ul li a:active {
	color: #450084;
	text-decoration: none;
	background-color: #ffc;
	}
	
#vertNav li ul, #vertNav li ul li {
	margin: 0;
	padding: 0;
	}
	
#vertNav li.active a {
	background-color: #c2ab4e;
	text-decoration: none;
	color: #450084;
	}

#leftcontent .tertiaryNav { } /* Additional navigation that can be styled differently in any content column */

#leftcontent .deptImage {
	margin-top: -10px;
	margin-left: -10px;
	margin-bottom: 10px;
	} /* Available to TinyMCE */
	
#leftcontent p { }

#leftcontent h1, #leftcontent h2, #leftcontent h3, #leftcontent h4, #leftcontent h5, #leftcontent h6 {
	margin-bottom: -10px;
	}

#leftcontent a { }

#leftcontent hr {
	border: 0;
	width: 80%;	
	color: #ffffcc;
	background-color: #ffffcc;
	height: 2px;
	margin-left: 10px;
	}

#leftcontent ul {
	margin-left: 20px;
	}
	
#leftcontent ol {
	padding-left: 25px;
	}

#leftcontent td { }

#leftcontent .pullQuote { }

/* =Middle content styles
------------------------------------------------------------------------------------------ */

#middlecontent {
	width: 750px;
	float: right;
	padding: 0 4px 10px 4px;
	}  
	
.brandFeature {
	margin: 0 0 0 -16px;
	border: 0;
	padding: 0;
	} /* Available to :TinyMCE - This style applies to the image or flash object highlighting the JMU Brand */
	
#brandFeature {
	margin: 0 0 0 -16px;
	border: 0;
	padding: 0;
	} /* This style applies to the image or flash object highlighting the JMU Brand */
	
.indentedText {
	padding: 0 50px 0 50px;
	}
	
.infoBox {
	float: right;
	border: #e5e5e5 solid 1px;
	width: 280px;
	padding: 4px;
	margin-left: 6px;
	background-color: #FFFFCC;
	}

#tripleDivOne {
	float: left;
	width: 236px;
	height: 317px;
	margin-left: -10px;
	padding: 0 10px 10px 0;
	border-right: #000 1px solid;
	}
	
#tripleDivOne h4 {
	color: #450084;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
#tripleDivTwo {
	float: left;
	width: 236px;
	height: 317px;
	padding: 0 10px 10px 10px;
	border-right: #000 1px solid;
	}
	
#tripleDivTwo ul {
	list-style-type: square;
	}
	
#tripleDivTwo li {
	padding-bottom: 10px;
	}
	
#tripleDivTwo h4 {
	color: #450084;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
#tripleDivThree {
	float: right;
	width: 236px;
	height: 317px;
	padding: 0 10px 10px 0;
	}
	
#tripleDivThree h4 {
	color: #450084;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
#doubleDivHeader {
	float: left;
	margin-left: -15px;
	clear: both;
	}
	
#doubleDivOne {
	float: left;
	width: 363px;
	height: 259px;
	margin-left: -12px;
	padding: 0 10px 10px 0;
	border-bottom: #000 1px solid;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
	}
	
#doubleDivOne table {
	border-collapse: collapse;
	width: 25em;
	margin-left: 40px;
	background-color: #fff;
	}
	
#doubleDivOne td {
	padding: 0.1em 1em;
	}
	
#doubleDivTwo {
	float: right;
	width: 363px;
	height: 259px;
	margin-right: 9px;
	padding: 0 10px 10px 0;
	border-bottom: #000 1px solid;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
	}
	
#topNewsFeature {
	float: left;
	width: 490px;
	padding: 0 5px 10px 5px;
	} /* Available to :TinyMCE */

#latestHeadlines { } /* currently labeled #Headlines */

#thirdColumnContent {
	float: right;
	width: 220px;
	padding: 0 10px 10px 10px;
	} /* used only when 3rd column content is needed within the 2-column template */
	
#middlecontent.tertiaryNav { } /* Additional navigation that can be styled differently in any content column */

#middlecontent p {
	margin: 10px;
	}

#middlecontent h1 {
	padding: 10px 0;
	}

#middlecontent h2, #middlecontent h3, #middlecontent h4, #middlecontent h5, #middlecontent h6 {
	margin-bottom: 0;
	margin-left: 10px;
	} /* This forces the headers 2-6 to rest just above the text it defines. */

#middlecontent a { }

#middlecontent hr {
	margin-left: 30px;
	border: 0;
	width: 70%;	
	color: #cccc99;
	background-color: #cccc99;
	height: 2px;
	border: none;
	}

#middlecontent ul {
	margin-left: 20px;
	}
	
#middlecontent ol {
	padding-left: 25px;
	}
	
#middlecontent td { }

#middlecontent .pullQuote { 
	display: block;
	width: 175px;
	float: right;
	font-size: 120%;
	color: #450084;
	background-color: #e5e5e5;
	padding:  1em;
	border-style: solid;
	border-width: 1px;
	border-color: #cccc99;
	margin: 5px;
	}

/* ***** NOTE ******* */
/* It would be great if there were an image tool that could provide the following for users:
	Image placement (left, right or center) with or without text wrap
	Border options (yes/ no, size or drop shadow)
	Caption text placed and sized automatically
	Photo by ... (if required for copyright)
	Size and optimization of the image plus saved in correct format
	*/

.floatRight { 
	float: right;
	border: 1px #000 solid;
	margin: 8px;
	}

.floatLeft {
	float: left;
	border: 1px #000 solid;
	margin: 8px;
	}
	
.floatRightNB { 
	float: right;
	margin: 8px;
	}

.floatLeftNB {
	float: left;
	margin: 8px;
	}
	
/* #footer style in content CSS sheets to be styled by look - This style is not global */

#footer {
	background-color: #cc9;
	width: 982px;
	clear: both;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0;
	text-align: center;
	font-size: 80%;
	} /* lies below #contentContainer and inside #container. Must be used to clear column floats */


#rightcontent {
	display: none;
	} /* :TODO Delete after testing on WM2 rollout complete */