/* Common Format ========================================================================= */
	* {
		margin: 0; 
		padding: 0;
	}
	
	body {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: .6em;
	}
	
	p {
		margin: 1em 0 1em 0;
	}
	.indenttext { 
		margin-left: 10%;
	}


/* == 1. Header Block ==================================================================== */
	#container {
		background-image: url("../images/con_bg.jpg");
		background-repeat: no-repeat;
		width: 100%;
		font-size: 1.2em;
	}
	
	#header {
		margin: 0 0 0 30%;
		padding: 17.5em 0 0 0;
	}
	
	h1 {
		color: #87a448;
		margin: 1em 0 0 1em;
		font-family: "Times New Roman", Times, serif;
		font-style: italic;
		font-size: 2.6em;
	    border-bottom: 1px solid rgb(75,92,122);
	    width: 70%;
	}
	
	.red {
		color: #614240;
	}
	
	h2 {
		color: #bf8a44;
		margin: 0 0 0 15%;
		font-size: 1.6em;
		font-family: "Times New Roman", Times, serif;
		font-style: italic;
	}

/* == 2. Left side navigation ============================================================ */
	#left {
		float: left;
		width: 18%;
		margin: 15% 0 0 2%;
	}

	h4 {
		width: 95%;
		margin: 2% 0 2% 0;
		padding: 1% 3% 1% 3%;
		background-color: #F5F9EB;
		border-top: .1em dotted #CEAC86;
		border-bottom: .1em dotted #CEAC86;
		font-size: 1.2em;
		color: #557C2B;
	}
	
	#navcontainer ul {
		list-style-type: none;
		font-weight: bold;
	}
	
	#navcontainer a {
		margin: 2% 0 2% 0;
		padding: 1% 3% 1% 3%;
		display: block;
		width: 95%;
		background-color: #DCE3ED;
		border-bottom: .1em solid #eeeeee;
		background-image: url(./images/menu.png);
	}
	
	.green a:link, #navlist a:visited {
		color: #557C2B;
		text-decoration: none;
	}
	
	#navcontainer a:hover {	
		background: url(../images/doublearrow.png) 0 -1em;
		color: #562930;
		text-align: right;
	}

 	#active a:link, #navlist a:visited {
 		color: #821115;
 		text-decoration: none;
 		background: url(../images/doublearrow.png) 0 -1em;
 		text-align: right;
 	}
	#active a:hover {
		background: none;
		background-color: #DCE3ED;
		text-align: left;
		color: #557C2B;
	}
	


/* == 3. Main contents: Right side content (CCCOK Magazine and Monthly Newsletters) ====== */
	#right {
		position: relative;
		width: 80%;
		margin: 1% 1% 0 25%;
	}
	.articles {
		padding: 5% 1% 0 5%;
		margin: 5% 0 5% 0;
	}
	
		/* -- 1) Format for Date-Box: image, Month name and Month number. --------- */
		.date_box {
			background-color: #FFFFFF;
			background-image: url(../images/date.jpg);
			background-repeat: no-repeat;
			height: 4em;
			width: 5em;
			float: left;
		}
		.date_box_month {
			margin-top: 10%;
			font-size: 1em;
			font-weight: bold;
			font-family: Arial, Helvetica, sans-serif;
			text-align: center;
			color: #75A006;
		}
		.date_box_number {
			margin-left: 1%;
			font-size: 2em;
			font-weight: bold;
			text-align: center;
			font-style: italic;	
			color: #654040;
		}
	
		/* -- 2) Format for the title of Date-Box. ------------------------------- */
		h3 {
			height: 2em;
			padding: 5% 0 0 3%;
			font-size: 1.6em;
			font-family: "Times New Roman", Times, serif;
			font-style: italic;
			font-weight: bold;
			color: #84A54A;
			border-bottom: .1em solid rgb(75,92,122);
		}
	
		/* -- 3) Format for the images of magazine covers. --------------------------- */
		.coverimage {
		float: right;
		    margin: 0 1em 0  1em;
		    padding: 0 2em 2em 0;
		    border: 0 solid; 
		    width: 200px; 
		    height: 250px;
		}
		
	
		/* -- 4) Format for the image of arrows. --------------------------- */
		.arrow {
			height: 1em;
			width: 1.5em;
		}
	
		/* -- 5) Format for the hyper-links. ------------------------------- */
		a:link, a:visited {
			color: #83A956;
		}  
		a:hover {
			color: #821115; 
		}  
		

/* == 4. Footer format =================================================================== */
	.onespacer {
		height: 2em;
		background-color: #FFFFFF;
	}
	
	#footershadow {
		height: .5em;
		background-color: #B8B9BB;
		clear: both;
	}
	#footer {
		background-color: #DCE3ED;
		color: #93B26E;
		font-size: 1.2em;
		text-align: center;
		padding-top: .8em;
		font-weight: bold;
		height: 7em;
	}
	#footer p {
		font-weight: normal;
		font-size: .9em;
		color: #562930;
	}
	#footer a {
		color: #93B26E;
		font-weight: bold;
	}
	#footer a:hover {
		color: #562930;
		text-decoration: underline;
		font-weight: bold;
	}