@charset "UTF-8";
/* CSS Document */
@import url("css-reset.css");
@import url("typography.css");

body{ background:#1D1D1D url(../images/bg.jpg) center 50px no-repeat; color:#333333; }
h1{ font-family:Georgia, "Times New Roman", Times, serif; font-size:60px; letter-spacing:-2px;}
h2{font-family:Georgia, "Times New Roman", Times, serif; font-size:40px;}
a{ color:#000000; text-decoration:none; cursor:pointer;2}
a:hover{ text-decoration:underline;}
a > img{ text-decoration:none;}
p{ line-height:1.1;}

.cb{ clear:both;}

.page-part{ width:980px; margin:auto; padding:20px; }
.page-part.white{ background:#f5f5f5 url(../images/page-part-bg.png) repeat-x;-moz-border-radius: 10px;-webkit-border-radius: 10px;}
.page-part#header{ width:1000px; padding:0; height:50px;}

.page-part.white a { color:#1576C1;}

.left{ float:left;}
.right{ float:right;}




ul#menu{ display:block; list-style:none; margin:0; padding:0; display:block; position:absolute; margin-left:550px;}
ul#menu li{ float:left; display:block; margin:0px 5px;}
ul#menu li a{ display:block; padding:19px 25px 18px 25px;  color:#ffffff;  text-decoration:none; font-weight:bold; height:50px;}
ul#menu li a:hover{  background:url(../images/menu-hover-bg.jpg) top center no-repeat; color:#FFFFFF; display:block; }
ul#menu li a.selected{ background:url(../images/menu-hover-bg.jpg) top center no-repeat; color:#FFFFFF; display:block; }

#top{ background:#3394c8 url(../images/menu-bg.png) repeat-x;}

#logo{ float:left; height:50px; line-height:47px; font-size:30px; font-weight:bold; color:#FFFFFF; width:230px; overflow:hidden;text-indent:-9999em;}
#logo a{ color:#FFFFFF; display:block; height:50px; background:url(../images/logo.png) no-repeat; width:230px;}
#logo a:hover{ text-decoration:none;}

.heading{ margin-top:20px;}
.heading h2{ margin:0 auto; display:block; width:980px; padding:0px 20px; height:34px; color:#FFFFFF; font-size:36px;}
.heading h1{ margin:0 auto; display:block; width:980px; padding:0px 20px; color:#FFFFFF;}

#area { margin-top:40px;}
#work{ margin-top:20px;}
#area h1, #work h1{ margin-bottom:5px; color:#FFFFFF;}
#area h1 span, #work h1 span{ font-size:18px; font-family:Gill Sans, Verdana, sans-serif; margin-left:16px; font-weight:bold; letter-spacing:1.1px;}
#area h1 span.hl{ color:#1576c1; margin:0;}
#area h3{ font-size:24px; letter-spacing:2px; color:#666666; font-family:Gill Sans, Verdana, sans-serif; }
#area h4{ color:#f5f5f5; color:#CCCCCC; font-family:Gill Sans, Verdana, sans-serif; font-size:32px; margin-top:60px; margin-bottom:0; text-align:center; width:460px;}
#area #sportlight{ float:right; width:430px; height:300px;  }

#what-we-do-heading { margin-top:50px;}

#whatwedo #points{ margin-top:40px; padding:0 28px;}
#whatwedo #points .point{ float:left; width:210px; padding:10px;  line-height:1.3; letter-spacing:2;}
#whatwedo #points .point h3{ margin-bottom:5px;}
#whatwedo #points .point ul{ list-style:none; margin:10px 0 0 0 ; padding:0;}
#whatwedo #points .point li{ background:url(../images/blue-tick.png) no-repeat center left; padding-left:18px; height:20px; line-height:20px;}
#whatwedo #services{}
#whatwedo #services ol{ list-style:none;}
#whatwedo #services ol li{ float:left; list-style:none; margin:10px 20px; padding-left:70px; width:350px;}
#whatwedo #services ol li h2{ font-size:18px;}
#whatwedo #services ol li p{ line-height:1.3; margin-bottom:10px;}

#whatwedo #services ol li#service_design{ background:url(../images/icons/2.png) left 30px no-repeat;}
#whatwedo #services ol li#service_development{ background:url(../images/icons/1.png) left 30px no-repeat;}
#whatwedo #services ol li#service_ecommerce{ background:url(../images/icons/3.png) left 30px no-repeat;}
#whatwedo #services ol li#service_marketing{ background:url(../images/icons/4.png) left 30px no-repeat;}




#contact{ position:fixed; bottom:0; background:#04295a url(../images/contact-bg.png) repeat-x; width:100%; color:#FFFFFF;  border-top:1px solid #1576C1;}
#contact .field { margin-top:15px;}
#contact .field label{ display:block; font-weight:bold;color:#FFFFFF; margin-bottom:1px; font-size:16px;}
#contact .field .imp{ width:290px; height:30px; font-size:24px; line-height:30px; font-weight:bold;}
#contact .field .ta{ width:340px; height:110px; font-size:12px; border:0;}
#contact .left{ margin-right:40px; display:block;}
#contact h2{ color:#FFFFFF;}
#contact #contact-send{ width:200px; height:60px; border:0; background:#BCDBF4; font-weight:bold; font-size:30px; cursor:pointer;}
#contact #contact-cancel{ width:200px; height:40px; border:0; background:#1d1d1d; color:#FFFFFF; font-weight:bold; font-size:20px; margin-top:10px; cursor:pointer;}


#footerOuter{ background:#1d1d1d url(../images/footer-bg.jpg) repeat-x;}
#footer{ margin-bottom:0; color:#FFFFFF;}
#footer p{ font-size:13px; line-height:1.2; color:#FFFFFF;}
#footer h4{ font-size:16px; color:#FFFFFF; font-weight:bold; border-bottom:1px solid #1576C1; padding-bottom:5px;}
#footer .col{ float:left; width:33.33%}
#footer .col .pad{ margin:20px; }
#footer .col .pad.right{ text-align:right;}
#footer #address{font-weight:bold;  font-size:14px; line-height:1.2;}
#footer #twitter{  font-weight:bold;  font-size:16px;height:200px; width:300px;}
#footer #twitter span{ font-weight:normal; font-size:10px;}
#footer #twitter span.date{ color:#CCCCCC; padding-left:10px;}

#footer .vCard{ margin:20px 0px;}
#footer a{ color:#1576C1;}
#footer a:hover{ background:#FFFFFF; text-decoration:none;}
#footer .vCard a.vIcon{padding-right:32px; background:url(../images/vcard.gif) no-repeat center right;}
#footer .vCard a.vIcon:hover{ text-decoration:none; background:url(../images/vcard.gif) no-repeat center right;}
#footer .vCard a:hover{}

#footer #blog{}
#footer ul{ list-style:none; margin:0; padding:0;}
#footer ul li{ margin:10px 0px; padding-left:20px; background:url(../images/icon_bullet.png) center left no-repeat;}
#footer ul li a{ padding:1px; font-size:12px;}




#works{}
#works h3{ margin:30px 0px; font-size:36px;}
#works .work{margin:10px; }
#works .work .inner{  margin:10px; background:#333333;}
#works .work .title{ height:30px; margin:0px 10px;}

#works .work .title h4{ font-size:22px;}
#works .work .title h5{ color:#000000; margin:0 0 5px 0; padding:0;}
#works .work .title a.link{  background:#3394C8; color:#FFFFFF; padding:4px 8px; font-weight:bold; font-size:16px;} 
#works .work .title a.link:hover{ text-decoration:none; color:#FFFFFF;}

#works #stores .work{width:150px; height:150px; float:left;  background:#FFFFFF; border:dashed 1px #999999;}
#works #stores .work .inner{width:140px; height:120px; margin:5px; }
#works #stores .work .title h5{ font-weight:normal; font-size:11px;}


#works #apps .work .title{ margin-top:20px;  width:550px;}
#works #apps .work .inner{width:280px; height:240px;}
#works #apps .image{  background:#FFFFFF; width:300px; height:260px; float:right; margin:0px 40px 20px 20px; border:dashed 1px #999999;}
#works #apps .text{ float:left;}
#works #apps .text p{ line-height:1.2;}