/* CSS Document */

/* colors #323e72 blue, #993333 red,*/

body {
	text-align: center;
	background-color: #f2f2f2;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: small;
	margins: auto;
	padding: 0px;
	}
	
p.cbyf{margin-left: 20px;
	color: #000033;
	font-size: .7em;
	font-style: italic;
	}
	
#alt_header{
	display: none;
	}
	
#container{			/* main container holding nav and body*/
	background: #ffffff;
	width: 760px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	margin-bottom: 0px;
}

	
p, ol, .staff, .address{
	
	color: #000000;
	line-height: 150%;
	font-size: .8em;
}
	
p.info{
padding-left: 60px;
color: #993333;
}

dt{
	color: #2B2A2A;
	line-height: 150%;
	font-size: .8em;
	padding-left: 60px;
	font-weight: bold;
}
	
dt.address{
	font-size: .8em;
	padding-left: 0px;
	padding-bottom: 10px;
}
	
dd{
	color: #000000;
	line-height: 150%;
	font-size: .8em;
	padding-left: 20px;
}

h1{
	display: none;
	}


h2 {				/* first level heading - blue background */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bolder;
 	background-image: url(images/gradient.png);
	color: #ffffff;
	line-height: 1.7em;
	text-align: center;
	margin-top: 10px;
	padding-top: 0px;
	}
h4.short{
	margin-top: -10px;
	margin-bottom: 10px;
	}
	
h3 {				/* second level heading - blue font */
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
 	color: #2B2A2A;
	margin-bottom: 0;
	font-weight: bolder;

 	}
	
 h4{
 	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .8em;
 	color: #2B2A2A;
	margin-bottom: -10px;
	}

#header{
	width: 760px;
	height: 197px;
	background-image: url(../images/headerCollege.jpg);
	}

.header {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 4em;
	background-color: #6699cc;
 	color: #FFFF33;
	}


#mainbody{
	float: right;
	width: 540px;
	padding-right: 20px;
	}
	

								/* forms and links */
#mainbody ul li.forms{
	list-style-image: url(../images/arrow.gif);
	list-style-position: inside;
	font-size: .8em;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	line-height: 1.5em;
	color: #993333;
	padding-left: 40px;
}	

#mainbody ul li.list{		/* black lists with bullets */
	font-size: .8em;
	text-align: left;
	line-height: 1.5em;
	color: #000000;
	list-style-type: disc;
	list-style-position: inside 5px;
	margin-left: 40px;
}
						
								
li.forms a:link, li.forms a:visited{		/*forms with links including arrow */
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	color: #993333;
	list-style-image: url(../images/arrow.gif);
	list-style-position: inside 5px;
	}
	
li.forms a:hover, h4 a{
	font-weight: bold;
	text-decoration: underline;
	color: #993333;
	list-style: none;
	text-align: left;
	}
							/* forms2 */
a:link, a:visited{
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	color: #993333;
	}
	
a:hover{
	text-decoration: underline;
	}
	
h4.forms2, li.forms2{
	font-size: .8em;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	line-height: 1.5em;
	color: #993333;
	padding-bottom: 5px;
}				
								
h4 a:link, h4 a:visited{
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	color: #993333;
	}
	
h4 a:hover{
	font-weight: bold;
	text-decoration: underline;
	color: #993333;
	list-style: none;
	text-align: left;
	}




					/* navigation */
					
#nav {					/* main navigation position*/
	display: block;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	width: 180px;
	padding-top: 10px;
	margin-bottom: 0px;
	}

#nav ul{
	display: block;
	list-style : none;
	margin: 0px;
}

#nav li a{
	display: block;
	padding: 0px 10px;
	border-right: 1px solid #ffffff;
	text-decoration: none;
	font-weight: bold;
	color: #2B2A2A;
	margin:  0px;
	line-height: 1.8em;
}

#nav li{
	display: block;
	text-align: left;
	border-bottom: 1px solid #ffffff;
	font-size: .8em;
	color: #323e72;
	background-color: #e5e5e5;
	line-height: 1.7em;
	margin: 0px;
	}
	
#nav li a:hover{
	display: block;
	border-right: 1px solid #ffffff;
	background-image:url(images/gradient2.png);
	color: #d8d8d8;
	text-decoration: none;
	}
						/* main headings in navigation */
	
#nav li.mainnav a{
	padding: 0px 10px;
	border-right: 1px solid #ffffff;
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
}

#nav li.mainnav{
	text-align: center;
	border-bottom: 1px solid #ffffff;
	font-size: .8em;
	color: #ffffff;
	background-color: #9a9a9a;
	line-height: 1.7em;
	}
	
mainnav a:hover{
	border-right: 1px solid #ffffff;
	background-image:url(images/gradient2.png);
	color: #d8d8d8;
	text-decoration: none;
	}
	
ul, li {margin-left: 0; padding-left: 0;}  /* use this to push nav to outer edge using ul */

li.forms3{					 /* list of programs on programs page */
	font-size: .8em;
	text-align: left;
	text-decoration: none;
	color: #000000;
	list-style-image: url(../images/arrow.gif);
	list-style-position: inside 5px;
	margin-left: 40px;
	padding-bottom: 10px;
	}
	
img.left{				 /* putting borders and margins on images - left float*/
margin-top: 10px;		 /* to add dimension: border-bottom-color:	black; border-right-color:	black;*/
margin-right: 10px;
margin-bottom: 10px;
border:	1px solid #d9e0e6;
padding: 3px;
float: left;
}

img.right{				 /* putting borders and margins on images - right float*/
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
margin-left: 5px;
border:	1px solid #d9e0e6;
padding: 3px;
float: right;
}

img.center{				 /* putting borders and margins on images - centre*/
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
margin-left: 5px;
border:	1px solid #d9e0e6;
padding: 3px;
}
.center{
text-align: center;
}

img.logo{
padding: 20px 40px 0px;
}

p.justify{		 /* justify paragraphs beside pictures*/
text-align: justify;
}

#nav.active a{
background: silver;
}

#footer{
clear: both;
text-align: center;
padding: 0px;
margin-bottom: 0px;
padding-top: 20px;

}

.footer{
color: #d8d8d8;
background-image:url(images/gradient1.png);
font-size: 0.8em;
padding: 3px 0px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: 400;
}

.index a{
color: green;
}

#center{
text-align: center;
}

body#index .index a, /* use this to create an active page.  There is an example on my patti webb gallery site.  The body on each page is identified with an ID and so is each nav ID or class */
body#about_community .about_community a,
body#about_schools .about_schools a,
body#about_staff .about_staff a,
body#about_us .about_us a,
body#about_students .about_students a,
body#activities .activities a,
body#admissions .admissions a,
body#admissions_guardianship .admissions_guardianship a,
body#admissions_homestay .admissions_homestay a,
body#admissions_medical .admissions_medical a,
body#admissions_refund .admissions_refund a,
body#admissions_selection .admissions_selection a,
body#admissions_study_permit .admissions_study_permit a,
body#admissions_tuition .admissions_tuition a,
body#contact .contact a,
body#forms_nav .forms_nav a,
body#programs .programs a,
body#programs_chinese .programs_chinese a,
body#programs_principal_train .programs_principal_train a,
body#programs_academicyear .programs_academicyear a,
body#programs_intensive_esl .programs_intensive_esl a,
body#programs_summer .programs_summer a,
body#programs_winter .programs_winter a,
body#programs_tesl .programs_tesl a,
body#programs_toefl .programs_toefl a,
body#registration .registration a,
body#questions .questions a,
body#resources .resources a,
body#news .news a,
body#gallery .gallery a,
body#maps .maps a,
body#cilcbc .cilcbc a{
	background-image:url(images/gradient2.png);
	color: #d8d8d8;
}

.thumb{
width: 60px;
height: 45px;

}



#large{
margin-top: 20px;
text-align: center;
}


img.thumb, img.large {
	border: 1px solid silver;
}

img.thumb a:link{
	border: 1px solid silver;
	}

img.thumb a:visited{
  	border: 1px solid silver;
	}

img.thumb a:hover{
  	border: 3px solid silver;
}

img.large{
padding 2px;
}