@charset "utf-8";
@import "general.css";
@import "browsercompatibility.css";
@import "ui.totop.css";

/*----------------------Base---------------------------*/
.wrapper {width:959px;	margin: 0 auto;}
/*center class to center elements*/
.center {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}
/* rest of the content*/
.one-half {
	width: 444px;
	float: left;
}
.one-third {
	width: 296px;
	float: left;
}
.one-third img { width: 100%; margin-bottom: 30px; }
.two-third {
	width: 590px;
	float: left;
}
.one-forth {
	width: 207px;
	float: left;
}
/* .first clears margin on grid--*/
.first { margin-left: 0px; }


/*--------------------Logo---------------------------*/
h1.logo {
	float: left;
}

h1.logo a{float:left; width:257px; background:url(../../images/skoolmate.png) no-repeat center; height:160px; text-indent:999px !important; overflow:hidden;}


/*--------------------Login---------------------------*/
.login-half{
	width: 372px; float: right; padding:5px 10px 10px; margin-bottom:27px;
}
	
	.login-half ul{background:url(../../images/line.png) no-repeat top center; float:left; width:100%; padding-top:10px;}
		.login-half ul:last-child{background:none; font-size:14px; color:#838080;}
			.login-half .checkbox{width:181px; float:left;}
			.login-half .forgot{width:181px; color:#92278f; float:left; clear:left; padding-top:5px;}
				.login-half .forgot a{color:#92278f;}
					.login-half .forgot a:hover{text-decoration:underline;}
				
	.login-half h1{float:left; width:91%; font:normal 17px 'Shanti', Arial, Helvetica, sans-serif; background:url(../../images/member_login.png) no-repeat left; 
	padding:5px 0 0 35px;}
	
	.login-half input[type="text"], input[type="password"]{-webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; 
	-webkit-box-shadow:inset 0 0 21px 0px #ededed; -moz-box-shadow:inset 0 0 21px 0px #ededed; box-shadow:inset 0 0 21px 0px #ededed; 
	 border-color:#ededed;  text-indent:25px; color:#a6a6a6; }
	 	.login-half input[type="text"]:hover ,input[type="password"]:hover{border:1px solid #c8c8c8;}
		.login-half input[type="text"]:focus ,input[type="password"]:focus{border:1px solid #c8c8c8;}
	/*.login-half input[type="checkbox"]{float:left;}*/

		input.trial-name {
		float:left; width:181px; margin-right: 10px; background:url(../../images/username.png) no-repeat left #FFF;
		}
		
		input.trial-pass {
		float:left; width:181px;	background: url(../../images/password.png) no-repeat left #FFF;
		}


/*Display error and check icons*/
.errorIcon {background:url(../../images/errorIcon.png)  no-repeat; color: #FF0000; padding-left:18px; font-weight:bold}
.checkIcon{background:url(../../images/checkIcon.png)  no-repeat; color: yellowGreen; padding-left:18px; font-weight:bold}	
.errorMsg {background:url(../../images/errorIcon.png)  no-repeat;padding-left:20px;font-size: 13px;color: #FF0000;font-weight: bold}

.msg{display:none; color: black; margin-bottom: 7px; width: 200px; font-size: 12px;}
.clear{clear:both}


/*round corners of container*/
.allCorners {-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px}
.topCorners {-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;-khtml-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0}
.leftCorner {-moz-border-radius: 0 5px 5px 5px;-webkit-border-radius: 0 5px 5px 5px;-khtml-border-radius: 0 5px 5px 5px;border-radius: 0 5px 5px 5px}
.rightCorner {-moz-border-radius: 5px 0 5px 5px;-webkit-border-radius: 5px 0 5px 5px;-khtml-border-radius: 5px 0 5px 5px;border-radius: 5px 0 5px 5px}
.bottomCorners {-moz-border-radius: 0  0 5px 5px;-webkit-border-radius: 0  0 5px 5px;-khtml-border-radius: 0  0 5px 5px;border-radius: 0  0 5px 5px}


/*Display shadow*/
.shadow {-moz-box-shadow: 0px 0px 15px 5px #ccc;-webkit-box-shadow:  0px 0px 15px 5px #ccc;box-shadow: 0px 0px 15px 5px #ccc}

/*log in container*/
#formContainer{background-color:white; width: 398px; float: right; padding:5px 5px 7px;height:200px;width:350px;border:2px solid #aaa}
#loginHeader{width:100%; height:40px; background: url(../../images/login_header.png) repeat-x}
#loginHeader h2{padding:6px 0 0 10px; color:white}
#loginForm2{margin-top:10px; width: 100%}
#loginForm2 label{float: left; margin:5px 0; width:25%}
#loginForm2 input{float: left; width:180px; padding:0}
#loginForm2 input[type=submit]{width:50px; position:absolute; top:-5px; right:0px}
#loginForm2 input[type=checkbox]{width:10px; float:left; margin:1px 5px 0 0}
#loginFooter{margin-top:10px; color:DodgerBlue}
#loginFooter a:link,#loginFooter a:visited,#loginFooter a:active{font-size:.8em; text-decoration:none; color:DodgerBlue} /*09c*/
#loginFooter a:hover{text-decoration:underline}
#loginError{display:none; padding-bottom:10px}

/*forgot password container*/
#forgotContainer{width:100%; display:none; margin-top:15px; float: left; border-top: solid 1px #DDD;}
#forgotContainer p{ margin:5px 0 !important;}
#forgotContainer input[type=text]{ width:306px; padding:0 15px !important; text-indent:0px !important;}
/*#forgotForm input{width:98%; margin:5px 0}
#forgotForm input[type=submit]{float:right; width:50px}
#forgotEmailError, #successMsg{display:none}
#successMsg p{color:DodgerBlue; font: bold 1em Arial, Helvetica, sans-serif}*/

/*Register new user container*/
.ui-dialog{ width:410px !important;}
#registerContainer{display:none; width:500px !important;}
	#registerContainer ul{ float:left; width: 100%; margin-bottom:10px;}
		#registerContainer ul li{ float:left;}
			#registerContainer ul li label{ width:170px !important;}
			#registerContainer ul li input[type=text]{ width:200px;}
			#registerContainer ul li input[type=password]{width:200px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; 
			padding: 5px !important; text-indent: 0;}
			#registerContainer ul li select{width:200px;}
			#registerContainer ul li b{color:#F00;}
			#registerContainer ul li input:-webkit-autofill{ background:#F3F3F3 !important;}
					

.ui-dialog .ui-dialog-titlebar{ padding:0 !important; background: #BC49B9; border:none !important;}
.ui-state-hover{ background:none !important; border:none !important; }

.ui-widget-header .ui-icon{background-image: url(http://www.skoolmate.net/../../images/ui-icons_d8e7f3_256x240.png) !important;}
.ui-dialog .ui-dialog-titlebar-close{ padding:0 !important; height:0 !important; margin:-9px 0 0 0 !important;}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{ margin:0 0 0 5px !important; font-size:14px !important; color:#666666 !important; border:solid 1px #c0c0c0; background: url(../../images/signup.png) repeat-x bottom #ffffff !important; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius:5px !important; cursor:pointer !important; border: solid 1px silver !important;
font-weight:normal !important;}

.u.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{background:#25aae1 !important; border: solid 1px #019cde !important; color:#fff !important; font-style:normal !important;}

.ui-dialog-titlebar a:hover{border:none !important;}

.ui-widget-content{margin:0px !important; border:none !important;}

/*#registerContainer > input{font: .9em Arial, Helvetica, sans-serif;}
#registerForm {width:100%; margin-top:10px}
#registerForm label{float:left; margin:3px 0; width:25%}
#registerForm label b{color:red; padding-right:3px}
#registerForm input{float:left; width:50%; font: .9em Arial, Helvetica, sans-serif}
#registerForm select{float:left; width:51%; font: .9em Arial, Helvetica, sans-serif}
#registerForm div#passMeter{height:18px; margin-left:10px; font-weight:bold; float:left}
#registerForm div#verifyUser{height:18px; margin-left:10px; float:left}
#registerSuccessMsg{display:none; text-align: center; padding-top:30px}
#registerSuccessMsg h2{color:DodgerBlue}
#registerSuccessMsg h3{color:DodgerBlue; margin-left:30px}
#registerSuccessMsg p{color:DodgerBlue; font: 1em Arial, Helvetica, sans-serif; }
#captcha:hover{cursor:pointer}
#registerError{display:none; margin-bottom:10px}
input#userName, input#newPass{width:100%}
.inputMsg{float:left;width:50%}*/

	/* Top mnu Css */
nav{ float:left;width:100%; margin:0; padding:0; background:url(../../images/top-bg.png) repeat-x;}
	
.menu{float:left; width:959px;} 	
	.menu ul{font-size:16px; width:100%; float:left;  -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; 
	background:url(../../images/home-bg.png) repeat-x bottom #FFF; border:solid 1px #dfe0e1; margin:0;}
		.menu ul li a{ float:left; padding:5px 15px; margin:5px 7.5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius:5px; color:#777777;}
			.menu ul li:first-child a{margin-left:10px;}
			.menu ul li:last-child a{margin-right:0px !important;}
			.menu ul li a:hover{ background:url(../../images/active_home.png) repeat-x bottom; color:#fff;}
				.menu ul li a.active{background:url(../../images/active_home.png) repeat-x bottom; color:#fff;}	
	.menu img{float:left;}
	
/*-----------------skoolmate-features---------------------*/
section{float:left; width:100%; padding:0;}
	.skoolmate-f{ font-size:14px; color:#383838; margin-left:10px;}		
		.skoolmate-f h2{ width:100%; font-size:24px; color:#92278f;}
		.skoolmate-f ul{float:left; width:45%; margin-left:10px}
			.skoolmate-f ul li{float:left; width:100%;}
				.skoolmate-f ul li a{color:#383838; padding:5px 0; float:left;}
					.skoolmate-f ul li a:hover{text-decoration:underline;}
					
/*------------------Video-----------------------*/
.video-frame {width: 468px; height: 288px; margin-left: 20px; background:url(../../images/video-bg.png) no-repeat; padding:3px; float:left; margin-top:31px !important;}
	.video-frame .img{left:516px; position: absolute; right: 72px; top:507px; z-index: 50; margin:0 auto; width:497px;}
	.video-frame iframe {width:468px; height:287px;}

/*------------------Video-----------------------*/
.quick_tab{float:left; width:444px; margin-top:20px !important;}
	.quick_tab ul{float:left; width:100%;}
		.quick_tab ul li{margin:0px 40px 20px; float: left;}
			.quick_tab ul li:last-child{margin-right:0px;}		
			.quick_tab ul li a{float:left; background:#fefefe; -wekit-box-shadow:inset 0 0 70px 0 #cdcbcb; -moz-box-shadow:inset 0 0 70px 0 #cdcbcb; 
			box-shadow:inset 0 0 70px 0 #cdcbcb; padding:5px; -wekit-border-radius:5px; moz-boder-radius:5px; border-radius:5px; text-align:center; color:#383838; font-size:16px;}
				.quick_tab ul li a:hover{background:#0eb0f0; -wekit-box-shadow:inset 0 0 70px 0 #0394ca; -moz-box-shadow:inset 0 0 70px 0 #0394ca; 
				box-shadow:inset 0 0 70px 0 #0394ca; color:#FFF;}




/*-----------------inner-pages-----------------------*/
.left-side{float:left; /*width:710px;*/ padding:10px; font-size:15px;}
	.left-side h1{float:left; width:100%; font:normal 24px 'Shanti', Arial, Helvetica, sans-serif; color:#92278f;}
	.left-side p{float:left; width:100%; color:#4B4C4C; text-align:justify; line-height:22px;}
		.left-side p .right-img{ float: right; padding:5px;}
		.left-side p .left-img{ float: left; padding:5px;}
	.left-side ul{float:left; width:100%;}
			.left-side ul li{float:left; width:100%; font:normal 12px Arial, Helvetica, sans-serif; 
			padding:0 0 8px 16px; background:url(../../images/star.png) no-repeat left top;}

.middle-side{float:left; width:98%; padding:10px; font-size:15px;}
	.middle-side h1{float:left; width:100%; font:normal 24px 'Shanti', Arial, Helvetica, sans-serif; color:#92278f;}
	.middle-side p{float:left; width:100%;  color:#4B4C4C; text-align:justify; line-height:22px;}
		.middle-side p b{color:#07acea;}
		.middle-side .right-img{ float: right; padding:5px;}
		.middle-side .left-img{ float: left; padding:5px;}
		
	.middle-side ul{float:left; width:48%; margin-right:34px;}
		.middle-side ul:last-child{ margin:0;}
			.middle-side ul li{float:left; width:100%; padding:0 0 8px 0; text-align:justify;}
			

.faq a{float:left; width:100%; padding:15px 0 5px; color:#000;}
.faq h2{float:left; width:100%; font-size:18px; padding-top:30px;}

.faq .question a{color:#000; line-height:25px; padding:0; width:100%; float:left;}	
	.faq .question a:hover{color:#07acea;}	



.why_skoolmate span{float: left; width: 100%; padding: 15px 0 5px; color: black; font-weight:bold;}

.why_skoolmate u{float:left; width:100%; padding:15px 0 5px; color: #92278F; text-decoration:none;}

.why_skoolmate .color{ color: #07ACEA;}

.right-side{float:right; width:200px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding:5px;}
	.right-side ul{float:left; width:100%;}
		.right-side ul li{ float:left; width:100%; padding-bottom:5px;}
			.right-side ul li a:hover{color:#4B4C4C; text-decoration:underline;}
			


.playbutton{ float:left; width:100%; height:100%; background: url(../../images/playbutton.png) no-repeat center; text-indent:999px;}
	.playbutton:hover{background:url(../../images/playbutton_hover.png) no-repeat center;}		
			

/*-------------formholder2------------------*/
.formholder2 label{ width:126px !important; float:left; margin-right:20px;}
	.formholder2 input[type="text"]{width:269px; float:left;}
	.formholder2 input[type="submit"]{float:left;}
	
	.recnavholder2{ float:left; padding-left:143px;}
	.recnavholder2 label{width:0; height:0; visibility:hidden;}
	
#formrow{width:100%; float:left; margin-bottom:10px;}	



/*------------------other-futures-----------------------*/				
.addmore{float:right; width:480px; background:#fff; margin-top:20px !important; height:227px; -wekit-boder-radius:5px; -moz-boder-radius:5px; border-radius:5px; padding:10px; text-align:justify; moz-box-shadow: 0 0 5px #dddddd; -webkit-box-shadow: 0 0 5px #DDD; box-shadow: 0 0 5px #DDD;
}

	.addmore h1{width: 100%;	font-size: 24px; color:#0EB0F0;}
	.addmore h3{font-size: 20px; color: #0EB0F0; text-align:left;}			

/*------------------footer-----------------------*/				
footer{float: left; width:100%; background:#666; margin-top:40px; background:url(../../images/footer-bg.png) repeat-x top #f3f3f3; padding:18px 0 10px;}
	.footer-in{ float:left; width:100%;}
			.footer-in ul{float:left; width:100%;}
				.footer-in li{float:left; width:100%; padding-bottom:5px; font:normal 12px Arial, Helvetica, sans-serif;}
					.footer-in li:last-child{padding-bottom:0px;}
					.footer-in li a{ font:normal 12px Arial, Helvetica, sans-serif;  color:#4b4c4c;}
						.footer-in li a:hover{text-decoration:underline;}
						
			.footer-in .box{float:left; width:200px;}
				.footer-in .box ul{ width:100% !important;}
			.footer-in .box2{float:left; width:202px; height:127px;}
			.footer-in .box3{float:left; width:270px; height:127px;}
				.footer-in .box3 span{float:left; width:100%; margin-bottom:5px;}
			.footer-in .box4{float:left; width:286px; height:127px;}
				.footer-in .box4 ul li{margin-bottom:7px !important; text-indent:20px;  background:url(../../images/address.png) no-repeat left top;}
				.footer-in .box4 ul li~li{background:url(../../images/mobile.png) no-repeat left top;}
				.footer-in .box4 ul li~li~li{background: url(../../images/email.png) no-repeat left top;}
			
						
		.footer-in h2{float:left; width:100%; font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#383838; padding-bottom:4px;}
		.footer-in p{float:right; width:100%; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#888888; text-align:right;}

/*-----------------Tablet-Portrait---------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.wrapper {width:784px;	margin: 0 auto;}
.menu{float:left; width:784px;} 
.menu ul li a{padding: 5px 8px 5px 7px; margin: 5px 5px;}
.one-half {width:310px; float:left;}
.video-frame {width: 430px; height: 266px; background:url(../../images/video-bg-430.png) no-repeat; margin-top: 47px !important; margin-left:0px;}
.video-frame iframe {width: 424px; 	height: 260px;}
.video-frame .img{left:386px;  right: 61px; width: 452px; top:498px;}
.quick_tab{width:342px;}
.quick_tab ul li{ margin:0 11px 20px;}
.addmore{width:452px;}
.footer-in .box{width:137px;}
.footer-in .box2{width:159px;}
.footer-in .box3{width:188px;}
.footer-in .box4{margin-top:0; height:80px; width:287px;}
.middle-side ul{float:left; width:48%; margin-right:29px;}
.middle-side { width:97%;}
}

/*-----------------Mobile-Landscape---------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.wrapper {width:480px;	margin: 0 auto;}
	
	.login-half {
	width: 210px; float: right; padding:5px 5px 7px;
	}
	.login-half ul:last-child{padding-top:5px;}
		input[type="button"],[type="text"]{ width:100%; margin-bottom:5px;}
			input.trial-name {width:100%; padding:0; margin-right:0px;}
			input.trial-pass {width:100%; padding:0; margin-right:0px;}
			
.menu{float:left; width:480px; margin-top:20px;} 
.menu ul li a{padding: 5px 8px; margin: 5px 5px; width:44%;}
.menu ul li:first-child a{margin-left:5px;}	

.skoolmate-f{ margin-left:0;}
.one-half {width:100%; float:left;}

.video-frame {width: 430px; height: 266px; background:url(../../images/video-bg-430.png) no-repeat; margin-left:30px; margin-top: 15px !important;}
.video-frame iframe {width: 424px; 	height: 260px;}
.video-frame .img{visibility:hidden; height:0px; width:0px; display:none;}
.quick_tab{width:480px; margin-top:20px !important;}
.quick_tab ul li{margin:0 55px 20px;}
.addmore{width:100%; margin-top:20px !important;}
.footer-in .box3{ margin-top:20px; width:100%}
.footer-in .box4{  height:80px; width:100%;}
#forgotcontainer input[type="text"]{width:100%;}
.login-half .checkbox{ width:146px;}

.middle-side ul{float:left; width:100%; margin-right:0;}
.middle-side { width:96%;}
}

/*----------------iPhone3gs---------------------*/
@media only screen and (min-width: 320px) and (max-width: 480px){
.wrapper {width:320px;	margin: 0 auto;}
.login-half{
	width: 100%; float: right; padding:5px 5px 7px; float:left;
	}
	.login-half ul:last-child{padding-top:5px;}
		input[type="button"],[type="text"],[type="submit"]{ width:100%; margin-bottom:5px;}
			input.trial-name {width:100%; padding:0; margin-right:0px;}
			input.trial-pass {width:100%; padding:0; margin-right:0px;}
			
h1.logo {
	float: left; width:100%; text-align:center;
}
h1.logo a{width:100%;}

.menu{float:left; width:329px; margin-top:20px;}
.menu ul li a{padding: 5px 8px; margin: 5px 5px; width:42%;}
.menu ul li:first-child a{margin-left:5px;}	

.one-half {width:100%; float:left;}
.skoolmate-f{margin-left:0;}
.skoolmate-f ul{float:left; width:45%; margin-left:10px}

.video-frame {width:100%; height: 196px; background: url(../../images/video-bg-326.png) no-repeat; margin-left:0;}
.video-frame iframe {width:100%; height: 196px;}
.video-frame .img{visibility:hidden; height:0px; width:0px; display:none;}
.addmore{width:100%; margin-top:0 !important;}
.quick_tab{width:100%; margin-top:20px !important;}
.quick_tab ul li{ width:100%; margin-bottom:20px; margin-left:0px !important;}
.quick_tab ul li a{width:100%;}

.footer-in .box2{ margin-top:20px; width:100%; height:auto;}
.footer-in .box3{ margin-top:20px; width:100%; height:auto;}
.footer-in .box4{  height:80px; width: 100%; margin-top:20px;}
#forgotcontainer input[type="text"]{width:100%;}

#registercontainer ul li label{ width:100%;}
.ui-dialog{ width: 292px !important; }
#registercontainer ul{ width: 252px; margin-bottom: 10px; float:none !important;}
#registercontainer ul li label{ width:100% !important; float:none;}
#registercontainer ul li input[type="text"]{width:100% !important; float:none;}
#registercontainer ul li select{ width:100%;}
#registercontainer ul li input[type="password"]{ width:100%;}
#captcha{ width:102px !important;}
#registercontainer ul li{ float:none;}
.login-half .checkbox{ padding-top:5px;}

.middle-side ul{float:left; width:100%; margin-right:0;}
.middle-side{width:97%;}

.formholder2 input[type="text"]{ width:100%;}
.recnavholder2{ width: 100%; padding-left:0px;}
.formholder2 input[type="submit"]{ float:none; width:100%; margin: 0 0 7px 0;}
textarea{width: 99.5% !important;}
}