@charset "utf-8";

/* Simple fluid media

   Note: Fluid media requires that you remove the media's height and width attributes from the HTML

   http://www.alistapart.com/articles/fluid-images/ 

*/

img, object, embed, video {

	max-width: 100%;

}

/* IE 6 does not support max-width so default to width 100% */

.ie6 img {

	width:100%;

}



/*

	Dreamweaver Fluid Grid Properties

	----------------------------------

	dw-num-cols-mobile:		5;

	dw-num-cols-tablet:		8;

	dw-num-cols-desktop:	10;

	dw-gutter-percentage:	25;

	

	Inspiration from "Responsive Web Design" by Ethan Marcotte 

	http://www.alistapart.com/articles/responsive-web-design

	

	and Golden Grid System by Joni Korpi

	http://goldengridsystem.com/

*/





#outerLay{}



/* Mobile Layout: 480px and below. */



.gridContainer {

	margin-left: auto;

	margin-right: auto;

	width: 87.36%;

	

}



body

{

	padding:0;

	margin:0;
	background-color:#e0dbdb !important;
	background-image: url(../aworan/body_bg_new.jpg);
	background-position:top;
	background-repeat:no-repeat;
	font-family: Roboto-rg !important;

}

#wrapper

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}

#header

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}

.logo{float:left;height:84px;}

.icon{width:22px;height:28px;margin:auto}

.home{background:url(../aworan/icons/home_icon.png) no-repeat;}

.result{background:url(../aworan/icons/result_icon.png) no-repeat;}

.assignment{background:url(../aworan/icons/assignment_icon.png) no-repeat}

.communication{background:url(../aworan/icons/communication_icon.png) no-repeat;}

.game{width:27px !important;background:url(../aworan/icons/game_icon.png) no-repeat;}

.records{background:url(../aworan/icons/records_icon.png) no-repeat;}



.home,.result,.assignment,.records,.game,.communication{margin-bottom:10px}

.menuWrapper{float:right;height:84px;min-width:47%;overflow:hidden;}

.menuWrapper ul{list-style:none;padding:0;margin:0;height:84px;}

.menuWrapper ul li{text-align:center;float:left;height:84px; background-color: transparent !important;}

.menuWrapper ul li a{padding:10px;width:auto;  height:64px;text-decoration:none;color:white;display:block;}

.menuWrapper ul li a:hover

{

	color:#a9a9a9;

	box-shadow:0 0 5px  #FFFFFF inset;	

	text-shadow:1px 1px 1px #555;	

}

.ReplyAss{

	height:auto;

	min-height:40px;

	width:100%;

	display:none;

}

.icon{

	width:22px;

	height:22px;

	}



#subHeader1

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;



padding-top:13px;

margin-top:5px;

	

}



#subHeader

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;



padding-top:20px;

margin-top:80px;

	

}



/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



#content

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}

#assignq{

	width:95%; border-radius:none !important; border:1px #DDDDDD solid; min-height:70px;

}


#assignq:hover{

	background-color:#F8F8F8; 

}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



#footer

{

	

clear: both;

float: left;

margin-left: 0;

width: 100%;

display: block;

margin:auto;

text-align:center;

display: block;

line-height:50px;

color:#777;

font-size:12px

	

}



/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */



#Wraptop

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}



#titleLeft

{

clear: none;

float: left;



width: 100%;

overflow:hidden;

display: block;

height:100px;



}



.down{display:block;}



#titleLeft ul{list-style:none;padding:0;margin:0;}

#titleLeft ul li{border:1px solid #ccc;float:left;height:33px;line-height:33px;margin-right:1px; border-radius:5px; border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden; margin-top:-15px;}

#titleLeft ul li a{padding:0 10px;text-decoration:none;color:#555;display:block}

#titleLeft ul li a:hover{color:#888;background:#f4f5f6;border-radius:5px; border-bottom-left-radius:0;border-bottom-right-radius:0;}



#titleRight

{
	display:none;
}



#titleRight img{

	float:left;

	margin:7px;

}

.detailsHolder{line-height:14px;font-size:11px;padding-top:10px; display:block !important;}



#pageLeft

{

clear: none;

float: left;



width: 100%;

display: block;

}



#pageRight h4

{


	line-height:40px;

	padding:0 10px;

	color: inherit;

}





#pageRight

{

clear: none;

float: left;



width: 100%;

display: block;

margin-bottom:20px;

}

   

.dynamicPanel

{

	line-height:22px;

	text-align:justify;

	color:#555	;

	margin-bottom:30px;

}

.midBand

{

	background:#e8e8e8;

	height:30px;

	padding:0 20px;

	line-height:30px;	

}



.imageScrollPanel{min-height:200px;}





/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */



@media only screen and (min-width: 481px) {

.gridContainer {

	width: 95%;

	padding-left: 1.1625%;

	padding-right: 1.1625%;

}





#titleRight img{

	float: none;

	margin:0 !important;

}



#wrapper {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}

#header {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

}



#subHeader {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	height:100px;

	padding-top:0;;

}



#subHeader1

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;



margin-top:-16px;

	

}



#content {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	padding-top:30px;

}

#footer {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	height:50px;

	margin:auto;

	text-align:center;

	display: block;

	line-height:50px;

	color:#777;

	font-size:12px

	

}

#Wraptop {

	clear: both;

	float: left;

	margin-left: 0;

	width: 100%;

	display: block;

	padding-top:10px;

	margin-bottom:15px;

	height:100px;

	

}



.top{	/*border:1px solid #ccc;*/}

.down{display:block;}

.down{/*border:1px solid #ccc;*/height:30px;margin-top:13px}



#titleLeft {

	clear: none;

	float: left;

	margin-left:0;

	width: 61.5384%;

	display: block;

	height:100px;

	overflow:hidden;

}



#titleLeft ul{list-style:none;padding:0;margin:0;}

#titleLeft ul li{border:1px solid #ccc;float:left;height:33px;line-height:33px;margin-right:1px; border-radius:5px; border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden; margin-top:-15px;}

#titleLeft ul li a{padding:0 10px;text-decoration:none;color:#555;display:block}

#titleLeft ul li a:hover{color:#888;background:#f4f5f6;border-radius:5px; border-bottom-left-radius:0;border-bottom-right-radius:0;}



#titleRight {

	display:none;

}



#titleRight h4{margin:0;padding:0;}



.logoHolder{float:left;margin:5px 3px}

 

.detailsHolder{line-height:14px;font-size:11px;padding-top:10px;}



#pageLeft{clear: none;float: left;margin-left:0;width: 59%;display:block; box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.05); background-color:white; line-height:22px;}



#pageRight{clear: none;float: left;margin-left: 2.5641%;width: 30.8974%;display: block; height:310px; box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.05); background-color:white;}



.spacer{height:100px;}

.dynamicPanel p li{
	list-style-type:none !important;
}

.tabWrap

{

	min-height:100px;

}



.dynamicPanel

{

	line-height:22px;

	text-align:justify;

	margin-bottom:20px;

	min-height:150px;

}

.midBand

{

	height:30px;

	background:#e8e8e8;	

	margin-bottom:10px;

	line-height:30px;

	padding:0 20px;

	color:#555

}

.imageScrollPanel

{

	border:1px solid #ccc;

	min-height:200px;

	margin-bottom:20px		

}





.tabWrap h4{ height:40px;margin:0;padding:0;line-height:40px;color: inherit;padding:0 20px;}

.tabWrap p{color:#555;padding:0 auto; text-align:center;}



}







/*for tablet screens that are big*/





@media only screen and (min-width: 769px){

.gridContainer {

	width: 95%;

	max-width: 1000px;

	padding-left: 0.9%;

	padding-right: 0.9%;

	margin: auto;

}



#subHeader1

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;



margin-top:-13px;

	

}



#LayoutDiv1

{

	

clear: none;

	

float: left;

	

margin-left: 2.0408%;

	

width: 100%;

	

display: block;

	

}

body

{

	padding:0;

	margin:0;

background-image: url(../aworan/body_bg_new.jpg);
	background-position:top;
	background-repeat:no-repeat;background-color:#e0dbdb;
}

#wrapper

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}

#header

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}

.logo{float:left;height:84px;}



.menuWrapper{float:right;height:84px;display:block;}



#subHeader

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	margin-top:0;

display: block;

	

}

#contentPage

{

	

}



#content

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}



#footer

{

	

clear: both;

float: left;	

margin-left: 0;

width: 100%;

margin:auto;

text-align:center;

display: block;

line-height:50px;

color:#777;

font-size:12px

	

}

#Wraptop

{



clear: both;	

float: left;	

margin-left: 0;	

width: 100%;	

display: block;

padding-top:10px;

margin-bottom:15px;

height:100px



}

.top{	/*border:1px solid #ccc;*/}

.down{/*border:1px solid #ccc;*/height:30px;margin-top:13px}



#titleLeft

{

clear: none;

float: left;

margin-left: 2.0408%;

width: 57.3%;

display: block;

height:100px;

overflow:hidden;

}



#titleLeft ul{list-style:none;padding:0;margin:0;}

#titleLeft ul li{border:1px solid #ccc;float:left;height:33px;line-height:33px;margin-right:1px; border-radius:5px; border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden; margin-top:-15px;}

#titleLeft ul li a{padding:0 10px;text-decoration:none;color:#555;display:block}

#titleLeft ul li a:hover{color:#888;background:#f4f5f6;border-radius:5px; border-bottom-left-radius:0;border-bottom-right-radius:0;}



#titleRight

{	

clear: none;

float: left;

margin-left: 2.0408%;

width: 36.7755%;

display: block;

border:1px solid #ccc;

height:85px;

background:#eff1f2;


overflow:hidden;	

}



#titleRight h4{margin:0;padding:0;}



.logoHolder{float:left;margin:5px}

 

.detailsHolder{line-height:20px;font-size:12px;padding-top:10px;}       	



#pageLeft{clear: none;float: left;margin-left: 2.0408%;width: 69%;display: block;}       	



#pageRight{clear: none;float: left;margin-left: 2.0408%;width: 24.5714%;display: block;}       	



      	



}









/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */



@media only screen and (min-width: 800px){

.gridContainer {

	width: 95%;

	max-width: 1000px;

	padding-left: 0.9%;

	padding-right: 0.9%;

	margin: auto;

}

#LayoutDiv1

{

	

clear: none;

	

float: left;

	

margin-left: 2.0408%;

	

width: 100%;

	

display: block;

	

}

body

{

	padding:0;
background-image: url(../aworan/body_bg_new.jpg);
	background-position:top;
	background-repeat:no-repeat;
	margin:0;
	background-color:#e0dbdb;

}

#wrapper

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}

#header

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}

.logo{float:left;height:84px;}



.menuWrapper{float:right;height:84px;display:block;}

.menuWrapper ul li a{ color:#FFF; }

#subHeader

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}



#titleRight img{

	float: none;

	margin:0 !important;

}





#contentPage

{

	

}



#content

{

	

clear: both;

	

float: left;

	

margin-left: 0;

	

width: 100%;

	

display: block;

	

}



#footer

{

	

clear: both;

float: left;	

margin-left: 0;

width: 100%;

margin:auto;

text-align:center;

display: block;

line-height:50px;

color:#777;

font-size:12px

	

}

#Wraptop

{



clear: both;	

float: left;	

margin-left: 0;	

width: 100%;	

display: block;

padding-top:10px;

margin-bottom:15px;

height:100px



}

.top{	/*border:1px solid #ccc;*/}

.down{/*border:1px solid #ccc;*/height:30px;margin-top:13px}



#titleLeft

{

clear: none;

float: left;

margin-left: 2.0408%;

width: 57.3%;

display: block;

height:100px;

overflow:hidden;

}



#titleLeft ul{list-style:none;padding:0;margin:0;}

#titleLeft ul li{border:1px solid #ccc;float:left;height:33px;line-height:33px;margin-right:1px; border-radius:5px; border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden; margin-top:-15px;}

#titleLeft ul li a{padding:0 10px;text-decoration:none;color:#555;display:block}

#titleLeft ul li a:hover{color:#888;background:#f4f5f6;border-radius:5px; border-bottom-left-radius:0;border-bottom-right-radius:0;}



#titleRight

{	

clear: none;

float: left;

margin-left: 2.0408%;

width: 36.7755%;

display: block;

border:1px solid #ccc;

height:85px;

background-color:white

border-radius:5px;

overflow:hidden;	

}



#titleRight h4{margin:0;padding:0;}



.logoHolder{float:left;margin:5px}

 

.detailsHolder{line-height:20px;font-size:12px;padding-top:10px;}       	



#pageLeft{clear: none;float: left;margin-left: 2.0408%;width: 55%;display: block; }       	



#pageRight{clear: none;float: left;margin-left: 2.0408%;width: 36.5%;display: block; }       	



      	



}