@import url('reset.css');
@charset "utf-8";

html { width:100%; height:100%; }

a:link { color:#09f; text-decoration:none; }
a:visited { color:#09f; text-decoration:none; }
a:hover { color:#09f; text-decoration:underline; }
a:active { color:#09f; text-decoration:none; }

h1 { font:32px Georgia, Arial, Sans Serif; color:#aaa; text-align:left; margin-bottom:20px; letter-spacing:-1px; }
h2 { font:bold 20px Lucida Grande, Lucida Sans, Segoe UI, Tahoma, Arial, Sans Serif; color:#2e302e; text-align:left; }
h3 { font:bold 16px/16px Segoe UI, Lucida Grande, Lucida Sans, Tahoma, Arial, Sans Serif; color:#555; text-align:left; margin-bottom:15px; }

body, .body { clear:both; display:block; width:100%; background:#000; margin:0px; overflow-x:scroll; overflow-y:scroll; } /*hack: overflow-x:hidden; overflow-y:scroll > to avoid pageshift issue due to missing scrollbar*/
#bg { clear:both; display:block; width:100%; height:100%; min-width:1524px; }
hr { width:100%; height:1px; margin:20px 0; border:0; border-bottom:1px dashed #666; }

#header { clear:both; display:block; width:100%; height:148px; background:#000 url(../images/bg-header.jpg) repeat 0 0; }
#header .wrapper { display:block; width:1524px; margin:auto; text-align:center; }
#header .logo { position:absolute; float:left; width:141px; height:175px; margin-left:300px; background:transparent url(../images/logo.png) no-repeat 0 0; }
#header .logotype { position:absolute; float:left; width:282px; height:196px; margin-left:280px; margin-top:180px; background:transparent url(../images/logotype.png) no-repeat 0 0; }
#header .appstore { position:absolute; float:left; width:200px; height:66px; margin-left:530px; margin-top:180px; background:transparent url(../images/appstore.png) no-repeat 0 0; }
#header .fblike { position:absolute; float:left; width:300px; height:66px; margin-left:750px; margin-top:180px; }



/*

#header .nav { float:right; margin-right:280px; margin-top:50px; width:461px; height:114px; overflow:hidden; }
#header .nav ul { list-style-type:none; display:inline; }
#header .nav ul li { float:left; display:inline; height:38px; }
#header .nav ul li a { float:left; height:0px; padding-top:38px; background:transparent url(../images/nav.png) no-repeat; overflow:hidden; }

#header .nav ul li a.home { width:106px; background-position:0 0; }
#header .nav ul li a.about { width:104px; background-position:-106px 0; }
#header .nav ul li a.feedback { width:127px; background-position:-210px 0; }
#header .nav ul li a.contact { width:124px; background-position:-337px 0; }

#header .nav ul li a.home:hover { width:106px; background-position:0 -76px; }
#header .nav ul li a.about:hover { width:104px; background-position:-106px -76px; }
#header .nav ul li a.feedback:hover { width:127px; background-position:-210px -76px; }
#header .nav ul li a.contact:hover { width:124px; background-position:-337px -76px; }

#header .nav ul li a.home:active { width:106px; background-position:0 -38px; }
#header .nav ul li a.about:active { width:104px; background-position:-106px -38px; }
#header .nav ul li a.services:active { width:127px; background-position:-210px -38px; }
#header .nav ul li a.contact:active { width:124px; background-position:-337px -38px; }

#header .nav ul li a.home.selected { width:106px; background-position:0 -38px; }
#header .nav ul li a.about.selected { width:104px; background-position:-106px -38px; }
#header .nav ul li a.feedback.selected { width:127px; background-position:-210px -38px; }
#header .nav ul li a.contact.selected { width:124px; background-position:-337px -38px; }
*/




#header .nav { float:right; margin-right:280px; margin-top:50px; width:474px; height:114px; overflow:hidden; }
#header .nav ul { list-style-type:none; display:inline; }
#header .nav ul li { float:left; display:inline; height:38px; }
#header .nav ul li a { float:left; height:0px; padding-top:38px; background:transparent url(../images/nav.png) no-repeat; overflow:hidden; }
/*normal*/
#header .nav ul li a.home { width:106px; background-position:0 0; }
#header .nav ul li a.about { width:104px; background-position:-111px 0; }
#header .nav ul li a.feedback { width:127px; background-position:-223px 0; }
#header .nav ul li a.contact { width:124px; background-position:-352px 0; }
/*hover*/
#header .nav ul li a.home:hover { width:106px; background-position:0 -76px; }
#header .nav ul li a.about:hover { width:104px; background-position:-111px -76px; }
#header .nav ul li a.feedback:hover { width:127px; background-position:-223px -76px; }
#header .nav ul li a.contact:hover { width:124px; background-position:-352px -76px; }
/*selected*/
#header .nav ul li a.home.selected { width:106px; background-position:0 -38px; }
#header .nav ul li a.about.selected { width:104px; background-position:-111px -38px; }
#header .nav ul li a.feedback.selected { width:127px; background-position:-223px -38px; }
#header .nav ul li a.contact.selected { width:124px; background-position:-352px -38px; }



#canvas { clear:both; display:block; width:1524px; height:100%; margin:auto; text-align:center; background:#000 url(../images/bg-main-spotlight.jpg) repeat-y 50% 0; }
#canvas .wrapper { clear:both; display:block; width:100%; background:transparent url(../images/bg-canvas-spotlight.jpg) no-repeat 50% 0; height:100%; min-height:410px; padding:200px 0 100px 0; }
#canvas .content { float:left; display:inline; margin-left:300px; width:450px; font:13px/125% Georgia, Arial, Sans Serif; color:#aaa; text-align:justify; }
#canvas .iphone { float:left; display:inline; margin:-76px 0 0 233px; }
#canvas .content .dropcap { float:left; display:inline; margin-top:20px; font-size:60px; line-height:13px; margin-right:5px; text-transform:uppercase; }

#canvas-noiphone { clear:both; width:1524px; height:100%; margin:auto; text-align:center; background:#000 url(../images/bg-main-spotlight.jpg) repeat-y 50% 0; }
#canvas-noiphone .wrapper { width:100%; background:transparent url(../images/bg-canvas-spotlight-noiphone.jpg) no-repeat 50% 0; height:100%; min-height:410px; padding:200px 0 100px 0; }
#canvas-noiphone .content { float:left; display:inline; margin-left:300px; width:650px; font:13px/125% Georgia, Arial, Sans Serif; color:#aaa; text-align:justify; }
#canvas-noiphone .iphone { float:left; display:inline; margin:-76px 0 0 233px; }
#canvas-noiphone .content .dropcap { float:left; display:inline; margin-top:20px; font-size:60px; line-height:13px; margin-right:5px; text-transform:uppercase; }

#footer { position:relative; clear:both; display:block; width:100%; height:80px; padding-top:40px; margin-top:-100px; background:transparent url(../images/bg-footer.png) repeat-x 0 0; font:11px Lucida Grande, Segoe UI, Tahoma, Arial, Sans Serif; color:#444; }
#footer .wrapper { display:block; width:1524px; margin:auto; text-align:center; }
#footer .l { float:left; text-align:left; margin-left:290px;  }
#footer .r { float:right; text-align:right;  margin-right:290px; }
#footer a { color:#777; text-decoration:none; font-size:12px; }
#footer a:hover { text-decoration:underline; }

/*clearfix*/
.clearfix:after { content:".";  display:block;  height:0;  clear:both;  visibility:hidden; }
.clearfix { display:inline-block; }
/*Hides from IE-mac*/
* html .clearfix { height:1%; }
.clearfix { display:block; }