/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
/* END RESET */

/* TEXT */
body{font:12px/1.5 "Helvetica Neue",Helvetica,"Lucida Sans",Arial,Tahoma,sans-serif}a:focus{outline:1px dotted}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:20px}h4{font-size:17px}h5{font-size:14px}h6{font-size:12px}ol{list-style:decimal}ul{list-style:square}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}
/* END TEXT */

/* COMMON */
a {color:#00aeff;text-decoration:underline;}
a:hover {text-decoration:none;}
body {background:#3c4145 url(../images/bg_body.png) repeat 0 0;}

#outer {background:transparent url(../images/bg_highlight.png) no-repeat top center;}
#container {width:910px;margin:0 auto;}
#content {padding:0 0 37px 0;background:transparent url(../images/container_shadow_bottom.png) no-repeat bottom center;}
#topbar {width:100%;background:#222;height:8px;border-bottom:1px solid #515459;border-bottom:1px solid rgba(255,255,255,0.25);}
#header {height:150px;position:relative;background:transparent url(../images/container_shadow_top.png) no-repeat bottom center;}
#footer {background:#222 url(../images/bg_footer.png) no-repeat bottom right;overflow:hidden;border-top:1px solid #515459;border-top:1px solid rgba(255,255,255,0.25);}

#footer .inner {width:910px;margin:0 auto;}
#footer .contactinfo {float:left;display:inline;width:190px;margin:0 0 40px 20px;}
#footer .map {float:left;display:inline;margin:0 0 20px 0;padding:5px;width:268px;height:180px;border:1px solid #333;overflow:hidden;}
#footer h4 {color:#ff8500;margin:0 0 5px 0;padding:10px 0 0 0;border-top:1px solid #333;}
#footer p {color:#666;margin:0 0 10px 0;}
.blackbar {clear:both;width:100%;height:50px;background-color:#000;}
.blackbar .copyright{width:910px;margin:0 auto;padding-top:17px;color:#666;}

#topbar div {margin:0 auto;width:910px;display:none;}
#topbar ul {float:right;list-style:none;height:30px;overflow:hidden;}
#topbar ul li {margin:0 0 0 10px;padding:4px 0 2px 0;float:left;color:#aaa;font-weight:bold;line-height:24px;text-shadow:1px 1px 0 #000;}
#topbar ul li .email, #topbar ul li .phone {display:block;padding:0 0 0 27px;}
#topbar ul li .email {background:transparent url(../images/icons/mail.png) no-repeat 0 0;}
#topbar ul li .phone {padding:0 0 0 23px;background:transparent url(../images/icons/mobile_phone.png) no-repeat 0 0;}
#topbar ul li a {color:#aaa;text-decoration:none;}
#topbar ul li a:hover {color:#fff;}

#logo {width:207px;height:109px;background:transparent url(../images/flowloop_logo.png) no-repeat 0 0;position:absolute;top:20px;left:0;}
#logo span {display:none;}

#mainMenu {position:absolute;top:50px;right:0;}
#mainMenu ul {margin:0 10px;list-style:none;height:47px;overflow:hidden;}
#mainMenu ul li {float:left;margin:0 0 0 40px;}
#mainMenu ul li a {font-size:18px;font-weight:bold;line-height:47px;letter-spacing:-1px;text-decoration:none;color:#aaa;text-shadow:2px 2px 0 #333;}
#mainMenu ul li a:hover {color:#fff;}

ul.list {list-style:none;margin:20px 0 17px 0;}
ul.list li {margin:0 20px 3px;background:url(../images/bullet.png) no-repeat 0 2px;padding:0 0 0 18px;}

/* END COMMON */

/* PAGE STYLES */

.section {overflow:hidden;background-color:#000;border-top:3px solid #ff8500;}
.section p, .section ul li {color:#aaa;text-shadow:1px 1px 0 #000;}
.section h2.sectiontitle {float:right;margin:40px 40px 20px 40px;color:#fff;overflow:hidden;}
.section h2.sectiontitle span {display:block;text-indent:-9999px;}
.section h3 {color:#ff8500;}
.section .text {float:left;margin:40px 0 0 40px;width:550px;}

#intro {height:476px;position:relative;}
#intro h1, #intro h2, #intro h3 {display:none;}
#about h2.sectiontitle {width:156px;height:45px;background:url(../images/h2_about.png) no-repeat 0 0;}
#work .text {margin-bottom:20px;}
#work h2.sectiontitle {width:136px;height:45px;background:url(../images/h2_work.png) no-repeat 0 0;}
#about {background:#000 url(../images/bg_about.png) no-repeat bottom left;}
#services {background:#000 url(../images/bg_services.png) no-repeat bottom left;}
#work {background:#000 url(../images/bg_work.png) no-repeat top left;}
#services h2.sectiontitle {width:222px;height:46px;background:url(../images/h2_services.png) no-repeat 0 0;}
#services .box {width:395px;float:left;margin-left:40px;padding:20px 0 25px 0;overflow:hidden;border-top:1px solid #222;}
#services .box img {display:block;float:left;}
#services .box h3 {margin:5px 0 0 140px;font-size:16px;}
#services .box h4 {color:#fff;margin:0 0 10px 140px;font-size:14px;line-height:1.1;}
#services .box p {margin:0 0 5px 140px;}
#services .text {margin-bottom:20px;}
#projects {float:left;margin:0 40px;overflow:hidden;}
#projects .project {float:left;margin:0 20px 20px 0;overflow:hidden;width:390px;}
#projects .screenshot {float:left;margin:0 20px 0 0;border:3px solid #333;padding:3px;position:relative;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#projects .screenshot:hover {border:3px solid #666;}
#projects .screenshot span {display:none;position:absolute;top:3px;left:3px;width:140px;height:140px;background:rgba(0,0,0,0.75) url(../images/icons/zoom.png) no-repeat center center;}
/* #projects .screenshot:hover span {display:block;} */
#projects .screenshot img {display:block;}
#projects h3 {margin:10px 0;color:#ff8500;font-size:16px;line-height:1.1;}
#projects h4 {margin:0 0 13px;color:#aaa;font-size:12px;font-weight:normal;}
#projects .info {margin:0 0 0 175px;}

.btnVisit, .btnRead, .btnBack, .btnSend {display:block;height:22px;outline:0;}
.btnVisit span, .btnRead span, .btnBack span, .btnSend span {display:block;text-indent:-9999px;}
.btnVisit {width:65px;background:url(../images/btn_visit.png) no-repeat 0 0;}
.btnRead {width:74px;background:url(../images/btn_read.png) no-repeat 0 0;}
.btnBack {width:79px;background:url(../images/btn_back.png) no-repeat 0 0;float:left;clear:both;margin:20px 40px 40px 40px;}
.btnSend {width:101px;background:url(../images/btn_sendmsg.png) no-repeat 0 0;clear:both;margin:5px 0 0 120px;}
.btnVisit:hover, .btnRead:hover, .btnBack:hover, .btnSend:hover {background-position:0 -22px;}
#projects .btnVisit, #projects .btnRead {float:left;margin-right:5px;}
#projects ul.list {margin:10px 0;}
#projects ul.list li {margin:0;}

#projectDetail {margin:20px 10px 0 10px;}
#projectDetail h1 {color:#fff;}
#projectDetail h2 {color:#aaa;font-size:14px;}
#projectDetail p {margin-bottom:5px;}
#projectDetail .btnVisit {float:right;margin:-2px 0 20px 20px;}
#projectDetail .photo {float:right;margin:0 0 10px 20px;padding:5px;background-color:#000;background-color:rgba(0,0,0,.25);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#projectDetail .photo img {display:block;}

#contactFormWrap {}
#contactFormWrap h2.sectiontitle {width:203px;height:46px;background:url(../images/h2_contact.png) no-repeat 0 0;overflow:hidden;float:right;margin:0;}
#contactFormWrap h2.sectiontitle span {display:block;text-indent:-9999px;}
#contactFormWrap fieldset {width:630px;margin:40px 0 0 0;padding:40px 0;border-top:1px solid #333;}
#contactFormWrap fieldset legend {display:none;}
#contactFormWrap fieldset p {overflow:hidden;margin:0 0 5px 0;}
#contactFormWrap fieldset p label {float:left;display:block;width:100px;text-align:right;font-weight:bold;padding:5px;}
#contactFormWrap fieldset p input {float:left;width:400px;margin:0 0 0 10px;}
#contactFormWrap fieldset p textarea {float:left;width:400px;height:80px;margin:0 0 0 10px;font-family:Helvetica,"Helvetica Neue","Lucida Sans",Arial,Tahoma,sans-serif;overflow:auto;}
#contactFormWrap fieldset p input, #contactFormWrap fieldset p textarea {padding:5px;color:#ccc;background-color:#333;border:0;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#contactFormWrap fieldset p input:focus, #contactFormWrap fieldset p textarea:focus {background-color:#000;}
#contactFormWrap fieldset p span.success {display:block;float:left;margin:0 0 0 10px;width:24px;height:24px;background:transparent url(../images/icons/accept.png) no-repeat 0 0;}
#contactFormWrap fieldset ul.errorlist {margin:5px 0 10px 120px;list-style:none;}
#contactFormWrap fieldset ul.errorlist li {margin:0;padding:0 0 0 29px;color:#ffffcc;line-height:24px;background:transparent url(../images/icons/warning.png) no-repeat 0 0;}
#contactFormWrap .btnBack {float:right;clear:right;margin:40px 0;}
#contactFormWrap .sent {float:left;display:block;margin:15px 0 0 118px;height:24px;padding-left:29px;background:transparent url(../images/icons/accept.png) no-repeat 0 0;color:#ffffcc;line-height:24px;}

/* END PAGE STYLES */

/* MISC */
.hide {display:none;visibility:hidden;}
.bold {font-weight:bold;}
.big {font-size:14px;}
.xbig {font-size:20px;}
.italic {font-style:italic;}
.small {font-size:11px;}
.xsmall {font-size:10px;}
.textCenter {text-align:center;}
.textRight {text-align:right;}
.floatLeft {float:left;}
.floatRight {float:right;}
.clear {clear:both;}
.marginTop {margin-top:20px;}
.marginBot {margin-bottom:20px;}
.noMargin {margin:0;}
.noMarginTop {margin-top:0;}
.noMarginBot {margin-bottom:0;}
.noMarginRight {margin-right:0;}
.noMarginLeft {margin-left:0;}
.orange {color:#ff8500;}
.white {color:#fff;}
/* END MISC */