@import url("font.css");

* { margin:0px; padding:0px; border:0px; text-decoration:none;}
.clear { clear:both;}

/* Mobile */
body { font-family:open_sansregular;}

#headerLog { width:98%; margin:0 auto;}
#headerLog .logoLog { text-align:center; padding:14px 0px; border-bottom: 1px solid #dddddd;}
#headerLog form { margin:10px 0px; text-align:center;}
#headerLog .inputLog { width:70%; height:24px; padding:3px; margin:5px 0px; border:1px solid #003366; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
#headerLog .forgotLog { width:70%; margin:auto; text-align:right;}
#headerLog .forgotLog a { font-size:12px; color:#033959;}
#headerLog .forgotLog a:hover { text-decoration:underline;}
#headerLog .btnLog { background:url(../images/login-btn-bg.jpg) left top repeat-x; width:60%; height:31px; color:#fff; margin:15px 0px; border:1px solid #000033; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; cursor:pointer;}

#bannerLog { width:100%; background:url(../images/banner-bg.jpg) left top repeat; position:relative;}
#bannerLog .massegeLog { width:80%; padding:20px 0 0 20px;}
#bannerLog .massegeLog h1 { font-size:30px; color:#fff;}
#bannerLog .productLog { background:url(../images/device-banner-small.png) top left no-repeat; width:278px; height:159px; margin:auto;}
#bannerLog .massegeLog h3 { background:url(../images/red-arrow.png) top left no-repeat; padding-left:40px; font-size:16px; color:#c1272c; margin:10px 0px;}
#bannerLog .massegeLog a { background:#fff url(../images/foot-step.png) 10px 5px no-repeat; padding:5px 20px 5px 40px; color:#000; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; font-size:25px; line-height:35px; box-shadow:1px 2px 2px #071015;}


#featureLog { width:80%; margin:20px auto;}
#featureLog ul { list-style:none;}
#featureLog ul li { padding:10px 0px; border-top:1px solid #dddddd;}
#featureLog ul li p { font-size:16px; color:#666; line-height:22px; margin:10px 0px;}
#featureLog ul li h2 { font-size:26px; color:#cc3333; line-height:40px;}
#featureLog ul li a { font-size:16px; color:#003366; font-weight:bold;}

/*#footerLog { width:100%; background:#f5f5f5; margin:20px 0 0 0; padding:15px 0px; text-align:center; font-size:13px; color:#525252;}*/

/* Footer Start here */
#footer { width:100%;}	
#footer .footNav { margin:0px;  position:relative; /*z-index:999;*/ box-shadow:0px 1px 2px #000;}
#footer .footNav ul { list-style:none; margin:0px; padding:10px 0; background:#CCC; }
#footer .footNav ul li { padding:5px 10px;}
#footer .footNav ul li a { color:#333;}
#footer .footNav ul li a:hover { background:none;}
#footer .social { width:98%; background:#fff; padding:1% 1%; margin:auto; clear:both; overflow:hidden;}
#footer .facebook { margin-left:5px; float:left;}
#footer .facebook span { width:26px; height:26px; display:block; background:url(../gems-images/social-sprite.png) -34px top no-repeat; cursor:pointer;}
#footer .twitter { float:left;}
#footer .twitter span { width:26px; height:26px; display:block; background:url(../gems-images/social-sprite.png) left top no-repeat; cursor:pointer;}


#footer .copyright { width:96%; margin:0px; background:#474a56; padding:2% 2%; color:#98999c;}
#footer .copyright span { color:#fff; padding:10px 0;}
/* Footer End here */


/* Tablate screen */
@media only screen and (min-width: 480px) and (max-width: 768px) {
	
body {font-family:open_sansregular;}

#headerLog { width:100%; margin:0 auto;}
#headerLog .logoLog { text-align:center; padding:14px 0px; border-bottom: 1px solid #dddddd;}
#headerLog form { margin:10px 0px; text-align:center;}
#headerLog .inputLog { width:50%; height:24px; padding:3px; margin:5px 0px; border:1px solid #003366; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
#headerLog .forgotLog { width:50%; margin:auto; text-align:right;}
#headerLog .forgotLog a { font-size:12px; color:#033959;}
#headerLog .forgotLog a:hover { text-decoration:underline;}
#headerLog .btnLog { background:url(../images/login-btn-bg.jpg) left top repeat-x; width:30%; height:31px; color:#fff; margin:15px 0px; border:1px solid #000033; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; cursor:pointer;}

#bannerLog { width:100%; background:url(../images/banner-bg.jpg) left top repeat; position:relative;}
#bannerLog .massegeLog { width:80%; padding:20px 0 0 20px;}
#bannerLog .massegeLog h1 { font-size:30px; color:#fff;}
#bannerLog .productLog { background:url(../images/device-banner-small.png) top left no-repeat; width:278px; height:159px; margin:auto;}
#bannerLog .massegeLog h3 { background:url(../images/red-arrow.png) top left no-repeat; padding-left:40px; font-size:16px; color:#c1272c; margin:10px 0px;}
#bannerLog .massegeLog a { background:#fff url(../images/foot-step.png) 10px 5px no-repeat; padding:5px 20px 5px 40px; color:#000; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; font-size:25px; line-height:35px; box-shadow:1px 2px 2px #071015;}


#featureLog { width:80%; margin:20px auto;}
#featureLog ul { list-style:none;}
#featureLog ul li { padding:10px 0px; border-top:1px solid #dddddd;}
#featureLog ul li p { font-size:16px; color:#666; line-height:22px; margin:10px 0px;}
#featureLog ul li h2 { font-size:26px; color:#cc3333; line-height:40px;}
#featureLog ul li a { font-size:16px; color:#003366; font-weight:bold;}

/*#footerLog { width:100%; background:#f5f5f5; margin:20px 0 0 0; padding:15px 0px; text-align:center; font-size:13px; color:#525252;}*/

/* Footer Start here */
#footer { width:100%;}	
#footer .footNav { margin:0px;}
#footer .footNav ul { list-style:none; margin:0px; padding:10px 0; background:#CCC; }
#footer .footNav ul li { padding:5px 10px;}
#footer .footNav ul li a { color:#333;}
#footer .footNav ul li a:hover { background:none;}

#footer .social { width:98%; margin:0px auto; clear:both; overflow:hidden;}
#footer .facebook { margin-left:5px; float:left;}
#footer .facebook span { width:26px; height:26px; display:block; background:url(../gems-images/social-sprite.png) -34px top no-repeat; cursor:pointer;}
#footer .twitter { float:left;}
#footer .twitter span { width:26px; height:26px; display:block; background:url(../gems-images/social-sprite.png) left top no-repeat; cursor:pointer;}


#footer .copyright { width:96%; background:#474a56; padding:2% 2%; color:#98999c; overflow:hidden;}
#footer .copyright span { color:#fff; padding:10px 0;}
/* Footer End here */

		
}

/* Desktop Screen */
@media screen and (min-width: 769px) {

body { font-family:open_sansregular;}

#headerLog { width:100%; margin:0 auto;}
#headerLog .logoLog { padding:14px 0px; border:0px; width:20%; float:left;}
#headerLog form { width:56%; margin:30px 0 10px 0px; text-align:center; float:right; display:inline-block;}
#headerLog .inputLog { width:200px; height:24px; padding:3px; margin:5px 0px; border:1px solid #003366; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
#headerLog .forgotLog { width:424px; text-align:right;}
#headerLog .forgotLog a { font-size:12px; color:#033959;}
#headerLog .forgotLog a:hover { text-decoration:underline;}
#headerLog .btnLog { background:url(../images/login-btn-bg.jpg) left top repeat-x; width:65px; height:31px; float:right; top:20px; right:0; position:absolute; color:#fff; margin:15px 0px; border:1px solid #000033; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; cursor:pointer;}
#headerLog .wrapperLog { width:1000px; margin:0 auto; position:relative;}

#bannerLog { width:100%; background:url(../images/banner-bg.jpg) left top repeat; position:relative; clear:both;  padding:43px 0px;}
#bannerLog .massegeLog { width:500px; padding:20px 0 0 0px;}
#bannerLog .massegeLog h1 { font-size:45px; color:#fff;}
#bannerLog .productLog { background:url(../images/device-banner-big.png) top left no-repeat; width:868px; height:498px; top:-20px; right:0; position:absolute; z-index:999; float:right;}
#bannerLog .massegeLog h3 { background:url(../images/red-arrow-big.png) top left no-repeat; padding-left:100px; font-size:22px; color:#c1272c; margin:10px 0px;}
#bannerLog .massegeLog a { background:#fff url(../images/foot-step.png) 10px 5px no-repeat; padding:5px 20px 5px 40px; color:#000; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; font-size:25px; line-height:35px; box-shadow:1px 2px 2px #071015;}
#bannerLog .wrapperLog { width:1000px; margin:auto; position:relative;}

#featureLog { width:100%; margin:80px auto; clear:both; background:#06C;}
#featureLog ul { list-style:none; text-align:center;}
#featureLog ul li { width:46%; padding:10px 15px; margin:0px 0px; border:none; border-right:1px solid #dddddd; float:left; display:inline-block;}
#featureLog ul li:last-child { border:0px;}
#featureLog ul li img { width:173px; height:127px;}
#featureLog ul li p { font-size:16px; color:#666; line-height:22px; margin:10px 0px;}
#featureLog ul li h2 { font-size:30px; color:#cc3333; line-height:40px;}
#featureLog ul li a { font-size:18px; color:#003366; font-weight:bold;}
#featureLog .wrapperLog { width:1000px; margin:auto; position:relative;}

/*#footerLog { clear:both; width:100%; background:#f5f5f5; margin:30px 0 0 0; padding:15px 0px; text-align:center; font-size:13px; color:#525252;}
#footerLog .wrapperLog { width:1100px; margin:auto; position:relative; overflow:hidden;}
#footerLog .copyrightLog { float:left; width:700px; text-align:left;}
#footerLog .companyLog { float:right; width:300px; text-align:right;}*/

/* Footer Start here */
#footer { width:100%; /*position:fixed; bottom:0px;*/ clear:both;}	
#footer .footNav { margin:0px; /*width:96%; padding:1% 2%;*/ display:block; background:url(../gems-images/links-bg.jpg) left top repeat-x;}
#footer .footNav ul { /*width:50%;*/ background:none; /*float:left;*/ list-style:none; margin:0px; padding:5px 20px; }
#footer .footNav ul li { padding:5px 10px; display:inline-block;}
#footer .footNav ul li a { color:#333;}
#footer .footNav ul li a:hover { background:none;}
#footer .social { width:200px; /*margin:-30px 0 0 0;*/ text-align:right; padding:7px 25px 0px 0px; float:right; background:none;/* position:relative; z-index:999;*/}
/*#footer .facebook {  margin-left:5px; float:left; }
#footer .facebook span { width:26px; height:26px; display:block; background:url(../gems-images/social-sprite.png) -34px top no-repeat; cursor:pointer;}
#footer .twitter { float:left;}
#footer .twitter span { width:26px; height:26px; display:block; background:url(../gems-images/social-sprite.png) left top no-repeat; cursor:pointer;}*/


#footer .copyright { width:96%; background:#474a56; padding:1% 2%; color:#98999c; overflow:hidden; clear:both;s}
#footer .copyright span { float:right; margin-right:2%; color:#fff; padding:0px 0;}
/* Footer End here */

}