/* ---------------------- GENERAL HTML ELEMENTS ---------------------------- */
body {color: #222; background-color:#FFF}

#site-name {
	display: none;
}

h1 {
    font-size: 250%;
}

h2 {
	font-family:"Century Schoolbook", Georgia,"Times New Roman",serif;
	text-decoration: none;
	font-weight:bold;	
}

h3 {
	font-family: sans-serif;
	font-family:"Century Schoolbook", Georgia,"Times New Roman",serif;
	font-size: 1.3em;
	font-weight:bold;}
	
code {
	    color: #444;
		font-size:14px;
		font-family: "Lucida Console", Monaco, monospace;
		font-weight:bold;}

ol li ol li {list-style:lower-alpha !important}
ol li ol li ol li {list-style:lower-roman !important}

img.border {border: 1px solid #222}


#logo a {
	border-bottom: none;
}


.blue-headers h1.title, .blue-headers h2.title {
    color: #000;
	font-weight: bold;
	font-family: "Century Schoolbook",Georgia,"Times New Roman",serif;
}

h1.title {
	font-size: 280%;
	line-height:90% !important;
		}


.blue-links a, .blue-links a:link, .blue-links a:visited {
    color: #034DA1;
	border-bottom: 1px solid #dfdfdf;
}

.blue-links a:hover {
    text-decoration: none;
	color: #F54B00;
}

.breadcrumbs {
	font-size: 12px;
    line-height: 30px;
}



#primary-menu  {background:#666; color:#EEE; 
				margin:0 5px 0 5px !important;} 



.primary-menu ul li a, .primary-menu ul li a:link, .primary-menu ul li a:visited {
    color: #fff;
font: 14px/18px "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
border-bottom: none;
}

.primary-menu ul li a:hover {
    background-color: #444;
}

#footer {
	border-top: 1px dotted #CCCCCC;
}

#footer p {
	font-size: 80%;
	color: #666; /* white + #999 fails color contrast test */
}

#sidebar-first #block-block-5 {
	border-bottom: 1px solid #e5e5e5;
}

#sidebar-first h2.title {
	font-size: 120%;
	color: #000;
}


/* Side links */
	
.block-block {
	font-size:95% !important;
	line-height:125% !important;}

.block-block ul {
	margin-left: 1em;
}

.block-block li {
	list-style-image: none !important;
	list-style: none !important;
	line-height:110% !important;
	padding-bottom: .4em; 
	margin-bottom: .4em !important;}




.block-block li a {
	border-bottom: 1px solid #DFDFDF;
}

.block-block li a:hover {
	text-decoration: none;
}


.round-corners-7 .primary-menu, .round-corners-7 h2.block-title {
    border-radius: 7px 7px 7px 7px;
}


.node div.links {
    background: none repeat scroll 0 0 #EFEFEF;
	padding: 10px;
	border-radius: 0px 0px 0px 0px !important;
}

/* Content Page */

.node-content p {
	margin-left:25px;
	line-height:150% !important;
	padding-bottom:5px !important;}

.node-content a {
    border:none;
	text-decoration: underline;
}



.node-content h1  {
	font-size: 280%;
	line-height:90% !important;
		}
		
.node-content h2 {
   /*  color: #026; */
	color: #000;
	line-height:100% !important;
	margin: 5px 0 2px 0 !important;
	font-size:1.5em;}
	
.node-content h4 {margin: 5px 0 2px 0 !important;}
	
.node-content strong {color:#F20;}


.node-content ol, .node-content ul {
	margin-bottom:8px !important;
	padding-bottom:8px !important;
	margin-left: 25px !important;
	padding-left:25px !important}
	
	
.node-content ul li p, 
.node-content ol li p {margin-left:0px !important}

.node-content ul li ul li {list-style-type:circle !important}





/* Home Page Blocks Mockup */

.tripartl {
	width:30%;
	float:left !important;
	padding:0;
	padding-bottom: 15px;
	margin:0 0 15px 15px;
	
	}


.semi {
	width:45%;
	float:left !important;
	padding:0;
	margin:0 5px;
	}
	
/* Vertical subpage nav on left */	
.tripartr {
	width:30%;
	float:right !important;
	padding:0;
	padding-bottom: 15px;
	border-bottom: 10px solid #808080;
	margin:0 0 15px 10px;
	
	}

/* Boxes with rounded corners */
.heythere /* colored boxes to highlight important content */
{   margin:0 0 10px 0; padding: 10px; 
   
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px; 
       border-radius: 10px;
       
	 border:1px #F00 dotted}
	 
.heythere h2 {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	 
    -moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
		
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	
	margin:-10px !important;
	margin-bottom: 10px !important;
	padding: 7px;}
	 
.heythere ul {list-style-type:disc !important; 
				padding-left: 1.0em !important; 
				margin-left:0px !important}
				
.heythere ul li {padding-left:0px !important; 
				margin-left:1.0em !important; }
				
.heythere ol {
				padding-left: 1.0em !important; 
				margin-left:0px !important}
				
.heythere ol li {padding-left:0px !important; 
				margin-left:1.0em !important; }



.heythere a {font-weight: bold; 
			border:none !important; 
			text-decoration:none}
	 
.heyblue {
	background-color: #DEF;
	color:#127;
	border:1px #67F dotted}
	
 .heyblue h2 {
	background-color: #238; 
	color: #DEF;
	border: 1px solid #238;
	 } 
	 
.heyblue a:hover {color: #666 !important;}
	 

.heygreen 
	{background-color: #CFD;
	border:1px #056839 dotted;
	color: #030}
	
.heygreen h2 {
	background-color: #056839; 
	color: #CFD;
	border: 1px solid #056839;
	
	 } 
.heygreen a {
	color: #157849 !important;
	text-decoration: none;}
.heygreen a:hover {color: #666 !important;}


.heyorange
	{border-color:#C10;
	background-color: #FFC;
	color:#430;	
	}

.heyorange h2 {
	background-color: #F57B20;
	color: #500;
	border: 1px solid #F57B20;
	 } 
	 

.heyorange a {
	color: #920 !important;}
.heyorange a:hover {color: #666 !important;}

.heylloyd /* Gray - Because Lloyd is gray in Welsh */ 
	{background-color: #DDD;
	border:1px #333 dotted;
	color: #333}
	
.heylloyd h2 {
	background-color: #333; 
	color: #CCC;
	border: 1px solid #333;
	 } 
.heylloyd a {
	color: #006 !important;
	text-decoration: none;}
.heylloyd a:hover {color: #f18e1e !important;}





/***CONTENT****/

.hubpage {width:65%}

/* Top of Page Links */
p.anav {
	margin-left: 0px;  
	padding-bottom:10px;
	font-size: 90%}
	
p.anav a {font-weight: normal !important; }


/* Pale blue example boxes */	
.example, .badexample
	{
	margin: 20px 15px;
	padding: 7px;
	border: 1px dotted #67F;
	background-color: #DEF;
	color:#000;
	
	-moz-box-shadow: 10px 10px 5px #AAB;
	-webkit-box-shadow: 10px 10px 5px #AAB;
	box-shadow: 10px 10px 5px #AAB;}

.example {
	border: 1px dotted #67F;
	background-color: #DEF;
	
	-moz-box-shadow: 10px 10px 5px #AAB;
	-webkit-box-shadow: 10px 10px 5px #AAB;
	box-shadow: 10px 10px 5px #AAB;}

	
/* Pink bad example boxes */	
.badexample {
	border: 1px dotted #BF1E2D;
	background-color: #FBC;
	
	-moz-box-shadow: 10px 10px 5px #BAB;
	-webkit-box-shadow: 10px 10px 5px #BAB;
	box-shadow: 10px 10px 5px #BAB;
	}
	
.badexample h3, .example h3
	{
	color: black;
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size:1.4em;
	font-weight:normal;
	padding-bottom:15px;
		
}

.badexample h4, .example h4 
	{color: black;
	font-family: "Lucida Grande", Verdana, sans-serif;
	padding-bottom:15px;}
	
.badexample code, .example code
	{	display:block;
		margin: 10px 30px 10px 30px;  
		}

.badexample code b, .example code b 
	{color: #000}
	
	


strong.myth 
	{padding-left: 3px;
	 padding-right: 3px; 
	border: 1px dotted #69C; 
	background-color: #CEF; 
	color: #006; 
	margin-bottom: 7px}
	
	
/* Hidden Text */
.hidden
{
position:absolute;
left:-5000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
} 


/* Data tables and chart tables only */
table.chart {border: 2px solid #666; margin-left:30px; margin-right:45px; width: auto !important}

table.chart caption {
			font-weight: bold; 
			font-size: 1.25em;
			font-family: "Century Schoolbook",Georgia,"Times New Roman",serif;
			color: #333; 
			text-align:center}

table.chart th {padding: 3px !important;
			border: 1px solid #666; border-collapse:collapse;
				background-color:#CCC; color: #000 }
table.chart th[scope=row] {background-color:#E8E8E8}

table.chart td {padding: 3px !important; 
			border: 1px solid #666; border-collapse:collapse;
			vertical-align:top; padding-left:15px;
			background-color:#FFF; color:#000}


/** CSS FOR DEMOS and 1-PAGERS **/

img.border {border:1px solid #000}

/* Font Sample Table */
.fsample {font-size: 1.25em; text-align:center}

/* Custom CSS Hovers for demos */
a.green {color: #006; font-weight: bold}
a:hover.green {color: #063; font-weight: bold}

a.gray {font-weight: bold; padding-left: 3px; padding-right: 3px}
a:hover.gray {background-color: #333; color: white; font-weight: bold; padding-left: 3px; padding-right: 3px}


a.answer
{
display: block;
background-color: #369; color: #369;
text-decoration: none;
padding: 0 3px 0 3px;
border: 1px solid #369;
padding: 3px
}

a:focus.answer, a:hover.answer
{
background-color: #DDD; color: #000;
text-decoration: none;
padding; 3px; border: 1px solid #369;
}



/* .mainnav means the "mainnav" class*/
a.mainnav {font-weight:bold; font-size:125%; color: #063;text-decoration: none}
a:visited.mainnav {font-weight:bold; font-size:125%; color: #063;text-decoration: none}
a:hover.mainnav {color: black; text-decoration: underline}

/* .button1 means the "button1" class*/
a.button1 {font-weight:bold; font-size: 125%; color: black;
		background-color: #FCF; text-decoration: none;
		padding-left: 3px; padding-right: 3px}

a:visited.button1 {font-weight:bold; font-size: 125%; color: black;
		background-color: #FCF; text-decoration: none;
		padding-left: 3px; padding-right: 3px}

a:hover.button1 {color: white; background-color: purple;text-decoration: none; 
	padding-left: 3px; padding-right: 3px}
	
	p.navigation {font-size: 125%; font-weight: bold; text-align: center; width: 50%}
/*p.navigation is the holder unit for the block links. It also specifies larger bold text*/
p.navigation a {display:block; color: black; background-color: #CCCCCC; 
		text-decoration: none; padding: 5px; border: 3px solid black}

p.navigation a:visited {display:block; color: black; background-color: #CCCCCC; 
		text-decoration: none; padding: 5px; border: 3px solid black}

p.navigation a:hover {display:block; color: white; background-color: black; 
		text-decoration: none; padding: 5px; border: 3px solid white}


/* CSS Rollover Effects *


/*p.surprise is the holder unit for the block links. Height and width match that of the image. It also specifies larger bold text*/

p.surprise {font-size: 125%; font-weight: bold; text-align: center;
                 width: 250px; height: 50px}

p.surprise a {display:block; color: white; 
             background-color: black; text-decoration: none;
             padding: 5px; border: 1px solid white}

p.surprise a:hover {display:block; color: black !important; 
             text-decoration: none; background-image:url(/files/webstandards/surpriseme.gif);
             padding: 5px; border: 1px solid black !important;}

p.surprise a:visited {display:block; color: white; 
             background-color: black; text-decoration: none;
             padding: 5px; border: 1px solid white}

/* Used for 321 Ignition trick layout in 'multicol.html'*/
.ignition321 {font-weight: bold; text-align: center; color: #F30; font-size: 125%}
table.ig321 {border: 2px solid black; 
		background-color:#FFF; color:#000}

		
/*** Fake Styles ***/
/* Fake H1 like styling */
.fakeh1 {color: #000; text-align: center; font-size: 18px; font-weight: bold}

/* Warning */
table.warning {width: auto !important; margin: auto; border: 1px solid #CCC}
table.warning th {text-align: right !important;}
table.warning td {border-left: 1px solid #000}

/***Do = Red, Don't = Green ****/
.dont {color:#F00; font-size:large}
.do {color:#090; font-size:large}

.dontcell {background-color:#F00}
.docell{background-color:#090}

.dotablefix {background-color:#FFF; 
			margin: 3px 15px;
			padding:7px; border:1px solid #000}
			
			
/* Paw List */
ol.paw {list-style-image:url(/files/webstandards/paw.gif)}

/* Forces inaccassible list... or not*/
ol.decilist li ol li {list-style-type: decimal !important;}
ol.decilist li ol li ol li  {list-style-type: decimal !important; }



/* Absolute Positioning Test */
#abs {position:absolute;
	right:0;
	top:-60px;
	z-index:10000;}
	
strong.mystery 
	{padding-left: 3px;
	 padding-right: 3px; 
	border: 1px dotted #FFF; 
	background-color: #006; 
	color: #FFF; 
	margin-bottom: 7px}
	
a strong.mystery{
	color:#FFF !important;
	text-decoration:none !important}