/*
	CSS Document
	Copyright 2009 (c) Duy Tan University
*/

/* reset */
html, body, h1, h2, h3, h4, p, ul, li {margin: 0; padding: 0;}
ul {list-style: none;}
:focus {outline: none;}
a:link, a:visited {color: #636262; text-decoration: none;}
a:hover {text-decoration: underline;}
a img {border: none;}
.clearfix:after {content:""; display: block; clear:both;}
.clearfix {display:inline-block;}

/* container */
body { background-color: #fff; color: #636262; font: normal normal 62.5% Arial, Helvetica, sans-serif; line-height: 1.8em;}
#container {background-color: #f6f6f6; font-size: 1.2em; 
	
	
	}

/* header */
#header-wrap {height: 280px; background: url(../images/header-bg.gif) repeat-x;}
#header {position: relative; width: 960px; height: 275px; margin: 0 auto; background: url(images/header-bg.gif) repeat-x;}
#header h1 {position: absolute; top: 19px; left: 2px;}
#header h1 a {display: block; width: 335px; height: 35px; text-indent: -1983px; overflow: hidden;}
#header h2 {position: absolute; top: 74px; left: 289px; display: block; width: 424px; height: 24px; text-indent: -1983px; overflow: hidden;}

#header ul {position: absolute; left: 870px; top: 52px; width: 107px;margin-right:3px;margin-left:3px;}
#header ul li {display:inline; margin-right:3px; margin-left:3px;}
#header ul li a {color: #b6b6b6; font-size: .9em;margin-right:3px;margin-left:3px;}
#header ul li a:focus, #header ul li a:hover, #header ul li.active a {color: #fdfcfc;margin-right:3px;margin-left:3px;}

#search  {position: absolute; top: 10px; right: 8px;}
#search label {color: #fff; font-size: .9em;}
#search .radio {display: inline; margin-right: 0px; margin-left:10px;}
#search .keyword {width: 169px; height: 12px; border: 1px solid #2179BC; border-right: none; background-color: #1867A4; color: #ccc; font-size: .9em; margin-top: 1px; padding-left: 2px;}
#search .submit {background: url(../images/submit.gif) no-repeat; width: 20px; height: 18px; border: none; position: absolute; right: 2px; top: 22px;margin-top:1px;}



#search1  {position: absolute; top: 30px; right: 8px;}
#search1 label {color: #fff; font-size: .9em;}
#search1 .radio {display: inline; margin-right: 10px; margin-left:10px;}
#search1 .keyword {width: 169px; height: 14px; border: 1px solid #57A1D3; border-right: none; background-color: #1867A4; color: #ccc; font-size: .9em; margin-top: 1px; padding-left: 2px;}
#search1 .submit {background: url(../images/submit.gif) no-repeat; width: 20px; height: 18px; border: none; position: absolute; top: 1px; right: 0px;}


#banner {position: absolute; top: 99px; right: 0; height: 176px; width:960px;}

/* content */
#content-wrap {width: 960px; margin-top:10px;  display: table; margin: 0 auto; margin-left:20px;}
#content-wrap1 {width: 960px;margin-top:10px;margin-left:auto; margin-right:auto; display:table}

#content {float: right; width: 772px; margin-left:60px; }

#content1 {float:left; width: 960px; height:auto;}

#maincontent {float: left; width: 532px;}

#maincontent .news {position: relative; float: left; height: 120px; width: 237px; margin: 0 3px 3px 0; border: 1px solid #e1e1e1; padding: 12px; overflow: hidden;}
#maincontent .news h3 {margin-bottom: 7px; font-size: 1.1em;}
#maincontent .news h3 a:hover {color: #1867A4;}
#maincontent .news img {float: left; margin-right: 10px; background: url(../images/frame.gif) no-repeat; width: 82px; height: 82px; padding: 8px;}
#maincontent .more {position: absolute; bottom: 5px; right: 10px;}
#maincontent .more a {color: #919191; font-size: .9em;}
#maincontent .more a:hover {color: #636262;}
* html #maincontent .recent {background-position: right 95%;}
* + html #maincontent .recent {background-position: right 95%;}
/*

#channel {margin-top: -3px; background: url(../images/logo-co.jpg) no-repeat 327px top;}

#channel h3 {color: #1867A4; font-size: 1em; margin-bottom: 5px; padding-top: 10px;}
#channel > ul {float: left; width: 258px; margin-left: 5px;}
#channel ul li.subnav ul {width: 220px;}
#channel ul li {padding-bottom: 3px;}
#channel ul li.item {background: url(../images/bullet-gray-large.gif) no-repeat 0 8px; padding-left: 12px;}
#channel ul li.item:hover {background: url(../images/bullet-red-large.gif) no-repeat 0 8px;}
#channel ul li.item:hover  a {color: #1867A4; text-decoration: none;}

#channel ul li.subnav {background: url(../images/bullet-sub-gray.gif) no-repeat 0 6px; padding-left: 12px;}
#channel ul li.subnav:hover {background: url(../images/bullet-sub-red.gif) no-repeat 0 6px;}
#channel ul li.subnav:hover > a {color: #1867A4; text-decoration: none;}

#channel ul li.subnav ul li {background: url(../images/bullet-gray.gif) no-repeat 0 8px; padding-left: 12px;}
#channel ul li.subnav ul li:hover {background: url(../images/bullet-red.gif) no-repeat 0 8px;}
#channel ul li.subnav ul li:hover a {color: #1867A4; text-decoration: none;}

#channel ul li.subnav ul {display: none; margin-left: 0px;}

#channel ul li.clicked {background: url(../images/bullet-sub-red-vertical.gif) no-repeat 0 6px !important;}
#channel ul li.clicked > a {font-weight: bolder;}

#channel p.combo-news {font-size: .9em; font-weight: normal; color: #636262; width: 124px; height: 18px; cursor: pointer; padding-left: 15px; float: right;}


* html #channel {margin-top: 0;}
* + html #channel {margin-top: 0;}
* html #channel ul {float: left; width: 240px; margin-left: 5px;}
* html #channel ul li.subnav ul {margin-left: 10px;}

/********************/
/********************/

#channel {margin-top: -3px; background: url(../images/logo-co.jpg) no-repeat 327px top;}

#channel h3 {color: #1867A4; font-size: 1em; margin-bottom: 5px; padding-top: 10px;}
#channel ul.nav {float: left; width: 258px; margin-left: 5px;}
#channel p, #channel ul li {padding-bottom: 3px}

#channel p.item {background: url(../images/channel/bullet-gray-large.gif) no-repeat 0 8px; padding-left: 12px;}
#channel p.item:hover {background: url(../images/channel/bullet-red-large.gif) no-repeat 0 8px;}
#channel p.item:hover a {color: #1867A4; text-decoration: none}

#channel p.subnav {background: url(../images/channel/bullet-sub-gray.gif) no-repeat 0 5px; padding-left: 12px;}
#channel p.subnav:hover {background: url(../images/channel/bullet-sub-red.gif) no-repeat 0 5px;}
#channel p.subnav:hover > a {color: #1867A4; text-decoration: none;}

.sub-ul {display: none; margin-left: 15px}
.sub-li {background: url(../images/channel/bullet-gray.gif) no-repeat 0 8px; padding-left: 12px;}
.sub-li-hover {background: url(../images/channel/bullet-red.gif) no-repeat 0 8px;}
.sub-li-hover-a {color: #1867A4 !important; text-decoration: none !important;}

#channel p.clicked {background: url(../images/channel/bullet-sub-red-vertical.gif) no-repeat 0 6px !important;}
#channel p.clicked > a {font-weight: bolder; color: #1867A4; text-decoration: none;}

#channel p.combo-news {font-size: .9em; font-weight: normal; color: #636262; width: 124px; height: 18px; cursor: pointer; padding-left: 15px; float: right;}

* + #channel p.combo-news {margin-top: 5px}

* html #channel p.subnav {background-position: 0 8px}
* html #channel p.subnav:hover {background-position: 0 8px}

* + html #channel p.subnav {background-position: 0 6px}
* + html #channel p.subnav:hover {background-position: 0 6px}

/********************/
#maincontent #proud {width: 530px; height: 104px; margin-top: 15px;}
#maincontent #talk {width: 530px; height: 23px; background: url(../images/talk.gif) no-repeat; text-indent: -2010px; overflow: hidden; margin-top: 5px;}


#secondcontent {float: right; width: 232px;}
#secondcontent .flash {width: 179px; height: 128px; margin: 15px 0 0 34px;}
#secondcontent .enroll {width: 156px; height: 61px; margin: 25px 0 0 44px;}
#secondcontent .psu {width: 151px; height: 98px; margin: 30px 0 0 44px;}
/*them*/
#secondcontent #album_act{width:232px; background-color:#f0efef; padding: 2px;color:Blue;}
#secondcontent #album_act #f_div{width:232px;}
#secondcontent #album_act #f_div #f_infoDiv{width:18px; float:left; margin-top:-4px}
#secondcontent #album_act #f_div #f_infoDiv #f_buttonDiv li a{width:18px; height:18px;display:block; float:left; color:#70522d; text-decoration:none; text-align:center; margin-top:4px; background-color:#cfcdcd}
#secondcontent #album_act #f_div #f_infoDiv #f_buttonDiv li a:hover{ width:18px; height:18px; display:block; float:right; color:#1867A4; text-decoration:none; background-color:#cfcdcd; font-weight:bolder; text-align:center; line-height:18px; margin-top:4px}
#secondcontent #album_act #f_div #f_infoDiv #f_buttonDiv li #a1{width:18px; height:18px;display:block; float:right; color:#fff; text-decoration:none; background-color:#cfcdcd; text-align:center; line-height:18px;}
#secondcontent #album_act #f_div #f_infoDiv #f_buttonDiv li .bt-on {
width:18px; height:18px;display:block;color:#1867A4; text-decoration:none;background-color:#cfcdcd; font-weight:bolder; text-align:center; line-height:18px;
}
#secondcontent #album_act #f_div #f_imgDiv {color:#2b2b2b; float:right; width:210px; }
#secondcontent #album_act #f_div #f_imgDiv img{float:right; border:#fff solid 1px; }
#secondcontent #pic{width:232px; margin-top:20px; float:right;}
#secondcontent .pic-item{width:232px; height:120px; margin-top:2px; float:right;}
/*end them*/


/* sidebar */
#sidebar {float: left; width: 175px; margin-left:-55px;}
#sidebar .box {margin: 15px 0 30px 45px;}
#sidebar h3 {color: #1867A4; font-size: 1em; padding-left: 15px;}
#sidebar ul li {margin-top: 3px; padding-left: 15px;}

#phylum h3.phylum-header { font-size: .9em; font-weight: normal; color	: #636262; background: url(../images/combo.gif) no-repeat; width: 180px; height: 18px; margin-top: 10px; cursor: pointer;}

#sidebar h3.gallery {margin-left: 50px; margin-top: 25px; text-align:center}
#sidebar h3.gallery a {display: block; width: 123px; height: 126px; text-indent: -2010px; overflow: hidden; text-align:center}

#sidebar h3.newspaper {margin-left: 50px; margin-top: 25px; text-align:center}
#sidebar h3.newspaper a {display: block; width: 123px; height: 126px;  text-indent: -2010px; overflow: hidden; text-align:center}

#sidebar h3.help {border-top: 1px solid #e1e1e1; padding-top: 10px; padding-left:45px;}

/* footer */
#footer-wrap {height: 43px; background: url(../images/footer-bg.gif) repeat-x;}
#footer {width: 960px; height: 43px; margin: 0 auto; background: url(../images/footer-bg.gif) repeat-x;}
#footer p {float: right; line-height: 43px; color: #fff; font-size: .9em; font-weight: bold;}
#footer p a {color: #fff; font-size: 1em;}
/* them*/

#f_text
{
	padding-top:3px;
	padding-bottom:3px;
	float:right;
	}
#f_text a {color:#2b2b2b; text-decoration:none; float:left; width:200px; text-align:center; font-size:11px}
#f_text a:hover {color:#bc8a4c;float:right; width:200px;}
/* tuanlh styling */

.sub-menu ul {
	display: none;
	margin-left: 10px;
	margin-top: 5px;
	width:200px;
}

.sub-menu ul li a {
	color: #bc8a4c !important;
	font-weight:400;
	background:url(../images/arrow.gif) left 5px no-repeat; padding-left:9px;
}

.sub-menu ul li a:hover {
	text-decoration:underline;
}

.sub-menu > a {
	background: url(../images/nav-arrow-vertical.gif) no-repeat right 5px;
	padding-right:14px;
	
	}
.clicked > a {
	background: url(../img/nav-arrow-horizon.gif) no-repeat right 6px !important;
	font-weight:bolder;
}
/*end them*/