@charset "UTF-8";
/*** 
Style Sheet for National Service AEU
Created by: Louis Yungling
http://www.yunglingpianostudio.com

ToC
	1. defaults
	2. structure
	3. links and navigation
	4. images
	5. special span classes
	6. special List styles
	7. table styles
	8. PHP calendar styles
	
	
Notes

***/

/* ----- 1. DEFAULTS -------*/

* {
	padding: 0px;
	margin: 0px;
}


body {
	background-color: #999999;
	font-family: Verdana, Geneva, sans-serif;
}

body#popup {
	background-color: #BCD6FD;
}

/* ----- 2. STRUCTURE ----- */

/* WRAPPER */
#wrapper {
	background-color: #999999;
	padding: 2px;
	width: 1000px;
	border: 1px solid #003366;
	margin: 2px auto 10px auto;
}

/* HEADER */
#header {
	background-color: #FFFFFF;
	height: 100px;
	width: 1000px;
}

/* MAIN NAV */
#mainNav {
	background-color: #BCD6FD;
	height: 28px;
	padding-top: 5px;
	border-bottom: 1px solid #003366;
}	

ul.nav {
	list-style-type: none;
	float: right;
}

ul.nav li {
	float: left;	
}


/* LEFT COL */
#leftCol {
	background-color: #81B0FF;
	width: 210px;
	float: left;
	border-right: 1px solid #FFCC00;
}

#leftCol h2 {
	width: 170px;
	margin: 14px auto 0px auto;
	font-size: 0.7em;
	letter-spacing: 0.25em;
	text-transform: uppercase;	
	background-color: #3C7CFF;	
	color: #FFFFFF;
	padding: 10px 0px 10px 12px;
	border-bottom: 1px solid #660066; 
}

#leftCol p.title {
	font-size: 0.8em;
	margin: 10px 0px 5px 0px;
	color: #660066;
	font-weight: bold;
	font-family: "Century Gothic", sans-serif;
}

#leftCol p {
	font-size: 0.7em;
	line-height: 1.5em;
	padding: 0px 6px 0px 10px;
	color: #202020;
	margin-bottom: 12px;
}

img.center {
	display: block;
	margin: 0px auto 8px auto;
}

/* LEFT COL ITEM */
#leftCol .leftColMain, .leftColSnippet {
	border: 1px solid #EDEDED;
	width: 180px;
	margin: 0px auto 10px auto;
	background-color: #E8F2FF;
}


.leftColSnippet p {	
	margin-bottom: 10px;
}

/* CENTER */
#center {
	background-color: #BCD6FD;
	width: 580px;
	float: left;
}
	
#center h1 {
	padding: 0px 25px;	
}

#center h1 {
	margin: 10px 0px;
	font-size: 1.1em;
	letter-spacing: 0.2em;
	border-bottom: dotted 1px #990099;
	text-transform: uppercase;
	color: #660066;
}

#center h2 {	
	font-size: 0.75em;
	line-height: 1.6em;
	letter-spacing: 0.2em;
	color: #660066;
}


#center p {
	font-family: "Times New Roman", Times, serif;
	font-size: 0.85em;
	line-height: 1.4em;
	color: #222222;
}



/* INTRO TOP Special News Topics */
#introTop {	
	border-bottom: 1px solid #93488F;
	padding: 10px 0px;	
	background-color: #FFFFFF;
}

#introTop h2 {
	font-size: 0.9em;
	line-height: 1.5em;
	letter-spacing: 0.2em;
	color: #660066;
	margin-bottom: 8px;
}


/* For pages with Quotes in Center */
#introTop p.greetText {
	color: #660066;
	font-family: papyrus, "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: 0px 25px 0px 25px;
	padding-top: 5px;
	font-size: 0.95em;
	line-height: 1.7em;	
	margin-bottom: 5px;
}

/* Author of Quotes */
#introTop p.author {
	color: #660066;	
	font-size: 0.7em;
	text-align: right;
	margin: 0px 25px;	
}

#introTop p {
	margin: 0px 12px 10px 25px;
	font-size: 0.9em;
}

/**  3 NEWS SECTIONS FOR INTRO TOP AREA **/
/** CENTER NEWS ITEM **/
.centerNewsitem {


}


/** LEFT NEWS ITEM **/
.leftNewsItem {
	width: 265px;
	padding: 10px;
	float: left;


}


/** RIGHT NEWS ITEM **/
.rightNewsItem {
	width: 265px;
	padding: 10px;
	float: left;


}




/** to send links to the right on Index page **/
#introTop p.right {
	text-align: right;
	margin: 0px 25px;
} 


/* FEATURE - for floated images */
.feature, .feature2 {
	margin: 0px 25px 15px 25px;
}

.feature p {
	color: #202020;	
	margin-bottom: 8px;
}

#center p.subtitle {
	font-size: 0.8em;
	font-style: italic;
}

#center p.article {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.9em;
	line-height: 1.6em;
	color: #660066;
	margin-bottom: 5px;
}

/* FEATURE2 - NO floated Images */
.feature2 {	
	margin-bottom: 25px;
}

.feature2 p {
	color: #202020;	
	margin-bottom: 10px;
}


/* RIGHT COL */
#rightCol {
	background-color: #003366;
	width: 208px;
	float: right;
	border-left: 1px solid #FFCC00;
	color: #222222;
}

#rightCol h2 {
	width: 170px;
	margin: 14px auto 1px auto;
	font-size: 0.7em;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	background-color: #BCD6FD;	
	color: #003366;
	padding: 10px 0px 10px 12px;	
}

#rightCol p.title {
	font-size: 0.8em;
	margin: 10px 0px 5px 0px;
	color: #660066;
	font-weight: bold;
	font-family: "Century Gothic", sans-serif;	
}

#rightCol p {
	font-size: 0.7em;
	line-height: 1.5em;
	padding: 0px 12px;
	margin-bottom: 10px;
}	


#rightColMain {
	width: 180px;
	border: 1px solid #FFFFFF;
	margin: 0px auto 15px auto;
	background-color: #E8F2FF;
}

.rightColSnippet {
	width: 180px;	
	border: 1px solid #FFFFFF;
	margin: 0px auto 15px auto;
	background-color: #E8F2FF;
	padding-bottom: 10px;	
}



/* FOOTER */
#footer {
	font-size: 0.6em;
	background-color: #003366;
	clear: both;
	width: 1000px;	
	
}

#footer p {	
	margin-left: 6px;
	padding: 4px 0px;
	color: #CCC;
}

/* BIOGRAPHY POP UPS */
#bio {
	width: 400px;
	background-color: #BCD6FD;
	color: #039;
	padding: 20px;
}

#bio p {
	font-size: 0.9em;
	line-height: 1.4em;
	margin: 5px 0px 12px 0px;
}

#bio img {
	float: left;
	margin: 10px 10px 12px 10px;
}
	

/* --- 3. LINKS & NAVIGATION ----- */

/* MAIN NAV */
a.nav, a.nav:link, a.nav:visited,
a.nav:hover, a.nav:active {
	display: block;
	width: 103px;
	background-color: #3C7CFF;
	text-decoration: none;
	font-size: 0.8em;
	text-align: center;
	padding: 6px 0px 5px 0px;
	margin-right: 1px;
	color: #FFFFFF;	
}

a.nav:hover {
	background-color: #660066;	
}

/********** Special style for *************/
/*****LINK to identify current page*****/

#thispage a:link, #thispage a:visited, #thispage a:hover, #thispage a:active {
	display: block;
	width: 103px;
	background-color: #660066;
	text-decoration: none;
	font-size: 0.8em;
	text-align: center;
	padding: 6px 0px 5px 0px;
	margin-right: 1px;
	color: #FFFFFF;	
}



/* Default IN-TEXT LINK Styles */
a.text, a.text:link, a.text:visited,
a.text:hover, a.text:active {
	color: #0000FF;
	padding: 3px;
}

a.text:hover {
	background-color: #660066;
	color: #FFF;
}

/* List Link Styles */
a.list, a.list:link, a.list:visited,
a.list:hover, a.list:active {
	color: #0000FF;
	padding: 1px;
}

a.list:hover {
	background-color: #660066;
	color: #FFF;
}



/* FEATURE ARTICLE LINK Styles */
a.article, a.article:link, a.article:visited,
a.article:hover, a.article:active {		
	text-decoration: none;	
	font-size: 0.9em;
	line-height: 1.6em;	
}

a.article:hover {
	border-bottom: 0.2em dotted #0000FF;
}

/* ANCHOR LINK STYLES */
a.anchor, a.anchor:link, a.anchor:visited, a.anchor:hover, a.anchor:active {
	margin: 5px 25px 2px 0px;
	display: block;
	color: #222222;
	font-weight: bold;
	font-size: 0.75em;
}


/* BACK TO TOP LINKS */
#center p.small {
	margin: 0px 0px 10px 0px;
	padding: 2px 3px 4px 3px;
	font-size: 70%;
	font-family: "Century Gothic", sans-serif;
	font-weight: bold;
	background-color: #719BE3;
	width: 68px;
	text-align: center;
}

#rightCol p.small {
	margin: 0px 12px;
	padding: 2px 3px 4px 3px;
	font-size: 70%;
	font-family: "Century Gothic", sans-serif;
	font-weight: bold;
	background-color: #719BE3;
	width: 68px;
	text-align: center;
	
}

a.button, a.button:link, a.button:visited,
a.button:hover, a.button:active {
	text-decoration: none;	
}

a.button:hover {
	color: #660066;
}



/* ------- 4. IMAGES -------- */

/*  Photo Box for captions 300 width only */
/* From the UN article pics */
.photoBox {
	background-color: #E8F2FF;
	width: 300px;
	float: left;
	margin: 0px 8px 2px 0px;
	text-align: center;
	font-family: Verdana, Geneva, Helvetica, sans-serif;
	font-style: italic;
	
}

.photoBox p {
	width: 280px;
	margin: 2px auto 2px auto;
}

/* IMAGE FLOATS */
img.left {
	float: left;
	margin: 0px 10px 3px 0px;
}

img.right {
	float: right;	
}


/* Center Top Images Float Right */
img.centerTopImgRight {
	float: right;
	margin: 8px 45px 5px 5px;
}

img.centerTopImgLeft {
	float: left;
	margin: 2px 5px 5px 10px;
}

/* IMG in Center Features */
img.articlePic {
	float: left;
	margin: 6px 8px 0px 0px;
	border: 1px solid #003366; 
} 

img.articlePicIntro {
	float: left;
	margin: 6px 8px 0px 25px;
	border: 1px solid #003366; 
} 



/* ------- 5. SPECIAL SPANS -------- */
.bold {
	font-weight: bold;
}

.center {
	text-align: center;
}

.large {
	font-size: 2em;
}

.green {
	color: #093;
}

/* ------- 6. SPECIAL LIST STYLES -------- */
dl {
	margin: 4px 25px 0px 25px;	
}

dt, dd { 
	font-family: "Times New Roman", Times, serif;
	color: #202020;
}

dt {
	font-weight: bold;
	font-size: 0.9em;
}

dd {
	font-size: 0.9em;
	margin: 0px 0px 10px 12px;
}

	/* LEFT COL LISTS WITH LINKS */
.leftColMain ul, .leftColMain li,
.leftColSnippet ul, .leftColSnippet li {
	font-size: 0.8em;	
	list-style-type: square;	
}

.leftColMain ul, .leftColSnippet ul {
	margin-bottom: 20px;
}


.leftColMain li {
	margin: 0px 6px 7px 25px;
	color: #660066;	
}

.leftColSnippet li {
	margin: 0px 6px 7px 25px;
	color: #202020;	
}

	/* RIGHT COL LISTS WITH LINKS */
#rightColMain ul, #rightColMain li,
.rightColSnippet ul, .rightColSnippet li {
	font-size: 0.8em;	
	list-style-type: square;	
}

#rightColMain ul, .rightColSnippet ul {
	margin-bottom: 20px;
}


#rightColMain li {
	margin: 0px 6px 7px 25px;
	color: #660066;	
}

.rightColSnippet li {
	margin: 0px 6px 7px 25px;
	color: #202020;	
}	

	/* CENTER LISTS with Links */
#center ul, #center li {
	font-size: 0.85em;	
	list-style-type: square;	
	
}

#center ul {
	margin-bottom: 20px;
}

#center li {
	margin: 0px 18px 8px 25px;
	color: #202020;
}

/* General List Style for paragraphs */
#center ul.general, #center ul.general li {
	list-style-type: none;
}

/* ------- 7. TABLE STYLES -------- */
table#contact {
	color: #202020;	
	width: 510px;
	border: 1px solid #333333;	
	margin: 8px 0px 0px 0px;
	font-size: 0.8em;
}

table#contact td {	
	padding: 8px;
	border: 1px solid #333333;	
}

td, td.head {
	background-color: #E9F2FF;
}

td.head1 {
	background-color: #477BFE;
	color: #FFFFFF;
	letter-spacing: 0.1em;
} 

td.head {	
	width: 200px;
}


/* ------- 8. PHP CALENDAR STYLES -------- */
#calendar {
	margin-left: 25px;
	margin-bottom: 30px;
}

#calList {
	margin-left: 25px;
	margin-bottom: 30px;	
}	



.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear: both;
    height: 0px;
    font-size: 1px;
    line-height: 0px;
}