/* Theme Name: Brandspace Description: minimal portfolio / corporate template for themeforest.net Theme Owner: pixelentity File: Main css file Template Designer: Donagh O'Keeffe aka iamdok Slicer/Coder : Donagh O'Keeffe aka iamdok and Fabio Cairo aka bitfade Web: http://www.iamdok.com http://bitfade.com http://themeforest.net/user/pixelentity */ /*------------------------------------------------------------------------*/ /* HELPER CLASSES */ .rounded { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .shadowTop { -moz-box-shadow: 0 -5px 1px #000000; -webkit-box-shadow: 0 -1px 0 #666666; box-shadow: 0 -1px 0 #666666; } .shadowBtm { -moz-box-shadow: 0 1px 0 #ffffff; -webkit-box-shadow: 0 1px 0 #eeeeee; box-shadow: 0 1px 0 #eeeeee; } .textShadow { text-shadow: 0 1px 0 white; } .gradient { background-color: #333333; background-image: -moz-linear-gradient(top, #333333, #555555); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333333),color-stop(1, #555555)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#555555'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#555555')"; } /* clear fix hack */ .clearfix:after { content: "."; display:block; height:0; visibility:hidden; clear:both; } /* END HELPER CLASSES */ /*------------------------------------------------------------------------*/ /* GENERIS STYLES */ * {margin:0;padding:0;} /*sticky footer*/ html{ height:100%; /*sticky footer*/ } body { color: #999; font-size: 12px; font-family: helvetica, arial, sans-serif; line-height: 20px; background-color: #ffffff; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-align: left; height: 100% } p { color: #999 } h1{ color: #444444; font-size:18px; font-family: helvetica, arial, sans-serif; letter-spacing:-1px; margin-top:40px; } h2{ color: #00a6d5; font-size:16px; line-height:24px; font-family: helvetica, arial, sans-serif; margin-top:18px; text-transform:lowercase; } h3{ color: #666666; font-size:12px; font-family: helvetica, arial, sans-serif; margin-bottom:20px; } h4{ font-family: helvetica, arial, sans-serif; font-style:italic; font-size:22px; font-weight:normal; line-height:35px; letter-spacing:-1px; color:#999999; } a{ color:#00a6d5; text-decoration:none; } a:hover{ color:#000000; } small{ color:#999999; font-size:9px; text-transform:uppercase; } .highlight{ background:#a6ecfb; padding:0 3px; } .headline { color: #999; font-size: 16px; font-family: Helvetica, Arial, sans-serif; line-height: 24px; margin-top:20px; } /*remove outline on focus and clicks*/ *:focus {outline: none;} a:focus, a:active , input:focus, input:active, input[type=submit]:active, input[type=radio]:active{ outline: 0px; -moz-outline-style: none; } /*outline in geko browsers*/ button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="radio"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; } ul{ list-style:none; list-style-image:url("../img/bullet.png"); margin:0 0; margin-left:45px; margin-bottom:36px; } li{ padding-top:12px; } #divider40 { padding-top: 40px; padding-bottom: 40px; position: relative; width: 100%; border-top: 1px solid #cccccc } .superscript { color: #48323c; font-size: 9px; font-family: "Times New Roman"; font-style: italic; line-height: 9px } super { font-size: 7px; line-height: 9px } .tiny { font-size: 13px; font-family: Times, "Times New Roman"; font-style: italic; line-height: 16px; margin-top: 15px; margin-bottom: 5px } .small { font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif } /* END GENERAL STYLES */ /*------------------------------------------------------------------------*/ /* HEADER */ #siteWrapper { margin-bottom: -300px; position: relative; min-height: 100% } #main{ overflow:hidden; padding-bottom: 300px; /*sticky footer*/ } #header{ position:relative; background: url("../img/bg/head.jpg") no-repeat; } #logoHead { background-image: url("../img/logo/logoMain_02.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 0; text-indent: -9999px; margin-top: 50px; margin-right: 0; margin-left: 30px; padding-right: 56px; position: relative; left: -10px; height: 145px; border-right: 1px solid #cccccc } #logoHead:hover{ cursor:pointer; } #header h2 { background: url("../img/icons/arrowHand_dl.png") no-repeat 0 10px; padding-left: 25px; position: absolute; top: 25px; left: 270px; width: 60px } /* NAVIGATION */ #mainNav { margin: 35px 0 -10px 40px; position: relative; width: 510px; float: left } #mainNav>li{ margin:0; margin-right:30px; } #mainNav li:last-child{ margin-right:0; } .menu>a{ color:#888888; font-size:14px; font-weight:bold; } .menu>a:hover{ color:#222222; } .menu>a.noLink:hover{ color:#888888; } .menu>a.selected{ color:#222222; } .subMenu, .subMenu li{ display:block; margin-left:0; padding-top:0; } .subMenu{ margin-top:10px; } .subMenu a:hover{ color:#00a6d5; } .subMenu a.selected{ color:#00a6d5; } .subMenu li{ font-size:9px; text-transform:uppercase; margin-top:0; } .subMenu a{ color:#999999; } /* END MAIN NAVIGATION */ /* TAGLINE */ #tagline{ border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; padding-top:30px; position:relative; height:110px; } #tagline h4{ font-size:20px; margin-left:20px; margin-right:20px; margin-bottom:40px; /* msie opacity fix */ background-color: white; display:none; position:relative; color:#333333; } #tagline h4.currentSlogan{ display:block; } #tagline h4.right{ text-align:right; } #tagline h4.left{ text-align:left; } #tagline h4.center{ text-align:center; } /*add class to tagline if only single line of text*/ #tagline h4.singleLine{ line-height:75px; } /* END TAGLINE */ /* BANNER */ #banner{ position:relative; overflow:hidden; background-color:#ffffff; } #infoPanel{ position:absolute; top:0; left:0; background: rgb(0, 0, 0); /* Fallback color - no alpha */ background: rgba(0, 0, 0, 0.5); width:360px; height:100%; z-index:10000; /* to show above slider img */ } #infoPanel #closeInfo, #infoPanel #openInfo, #infoPanel #prev{ position:absolute; padding:0; margin-right:0; display:block; width:30px; height:30px; background:none; margin-top:0; } #infoPanel #closeInfo{ top:20px; right:50px; } #infoPanel #closeInfo img{ position:relative; left:-10px; top:5px; } #infoPanel #openInfo{ right:5px; top:20px; display:none; } #infoPanel #openInfo img{ position:relative; left:-10px; top:5px; } #infoPanel #prev{ top:50px; margin-top:0; width:32px; height:300px; right:0; } #infoPanel #prev img{ position:relative; left:-15px; top:115px } #infoPanel ul{ margin-top:60px; margin-bottom:55px; float:right; margin-right:60px; } #infoPanel li{ float:left; list-style-type:none; margin-left:3px; } #infoPanel li a{ background: url("../img/sprites/slideButtons.png") no-repeat; display:block; text-indent:-9999px; width: 20px; height:20px; } #infoPanel li a.currentSlide, #infoPanel li a:hover { background-position:-26px 0; } #infoPanel h1, #infoPanel h3, #infoPanel span, #infoPanel>a{ text-align:right; margin-right:60px; } #infoPanel h1{ clear:both; margin-top:0; margin-bottom:8px; } #infoPanel h1 a{ color:white; } #infoPanel h3{ color:#eeeeee; margin-bottom:0; } #infoPanel span{ display:block; color:#eeeeee; font-style:italic; font-size:10px; line-height:12px; margin-top:0; } #infoPanel #info>a{ background:url(../img/icons/commentsWhite.png) no-repeat 100% 35px; position:absolute; top:255px; right:60px; color:white; display:block; font-size:55px; height:50px; margin-top:40px; } #banner #slides{ position:relative; overflow:hidden; height:350px; } #banner #slides div{ position:absolute; display: none; z-index: 0; top:0; left:0; } #banner #slides div div{ display:none; } #banner #slides div.active{ z-index: 1; display:block; } .js #banner #slides div.active { display: none; } #banner #slides #spinner{ z-index: 1000; background: url("../img/icons/spinner.gif") no-repeat center center; width: 100%; height: 100%; display:block; } #banner #slides #videooverlay{ z-index: 1001; background: url("../img/icons/video_play_icon_02.png") no-repeat center center; width: 100%; height: 100%; cursor: pointer; display:block; } #banner #nextSlide{ background: rgb(0, 0, 0); /* Fallback color - no alpha */ background: rgba(0, 0, 0, 0.5); position:absolute; width:32px; height:350px; top:0; right:0; z-index:10000; } #banner #nextSlide #next{ position:absolute; display:block; width:32px; height:300px; top:50px; right:0; } #banner #nextSlide #next img{ position:relative; left:13px; top:115px; } #banner #nextSlide #closeVideo{ position:absolute; display:none; width:32px; height:50px; top:0; right:0; } /*add hide class to button with js to hide*/ #banner #nextSlide #closeVideo.hide{ visibility:hidden; } #banner #nextSlide #closeVideo img{ position:relative; left:13px; top:25px; } /* END BANNER */ /* SIDEBAR */ #sidebar { background: #f6f6f6; margin-top: 68px; margin-right: 0; margin-bottom: 0; padding-bottom: 0; width: 360px } #sidebar h1, #sidebar ul{ text-align:right; } #sidebar h1{ margin-right:60px; color:#999999; } #stats{ margin-right:60px; margin-left:0; margin-top:30px; } #stats li{ margin-bottom:10px; } #stats li span{ display:block; margin-left:65px; } /* END SIDEBAR */ /* MAIN CONTECT */ /* UPPER */ #mainContent{ margin-top:68px; margin-left:60px; margin-bottom:80px; overflow:hidden; } #upper{ overflow:hidden; border-bottom:1px solid #cccccc; } #mainContent h1{ margin-bottom:40px; } #mainContent p{ width:240px; margin-bottom:50px; float:left; } #mainContent p.right{ margin-left:40px; margin-bottom:15px; } #mainContent h2:first-child{ background:url("../img/icons/arrow_r.png") no-repeat 0 60%; width:220px; float:right; margin-top:0; padding-left:20px; margin-left:0px; } /* LOWER */ #lower{ clear:both; margin-top:10px; overflow:hidden; } #lower h1{ float:left; margin-top:35px; margin-bottom:5px; display:inline; } #lower h2{ background: url("../img/icons/arrowHand_dr.png") no-repeat 100% 90%; display:inline; float:left; margin-left:30px; margin-top:30px; padding-right:25px; } #featLeft, #featRight{ margin-top:35px; } #featLeft{ clear:both; float:left; } #featRight{ float:left; margin-left:40px; } #featLeft .caption, #featRight .caption{ display:block; background:url("../img/icons/bullet.png") no-repeat 0 50%; padding-left:15px; margin-left:8px; margin-top:10px; color:#666666; } /* END MAIN CONTENT */ /* CONNECT BAR */ #connect{ border-top:1px solid #cccccc; } #connect h2{ background:url("../img/icons/arrowHand_mr.png") no-repeat 100% 80%; display: inline; float:left; padding-right:25px; margin-left:10px; margin-top:50px; margin-bottom:60px; } #socialMedia{ display:inline; margin-left:15px; overflow:hidden; } #socialMedia li{ display:block; float:left; margin-left:9px; margin-top:52px; padding-top:0; } #socialMedia a{ background:url("../img/sprites/socialMedia.png") no-repeat 0 0; text-indent:-9999px; display:block; width:26px; height:26px; } #socialMedia a.first:hover{ background-position: 0 -27px; } #socialMedia a.second{ background-position: -32px 0; } #socialMedia a.second:hover{ background-position: -32px -27px; } #socialMedia a.third{ background-position: -65px 0; } #socialMedia a.third:hover{ background-position: -65px -27px; } #socialMedia a.fourth{ background-position: -98px 0; } #socialMedia a.fourth:hover{ background-position: -98px -27px; } #socialMedia a.fifth{ background-position: -133px 0; } #socialMedia a.fifth:hover{ background-position: -133px -27px; } #socialMedia li:last-child{ margin-right:55px; } #newsletter{ float:left; margin-left:60px; } #newsletter form{ display:inline; float:left; margin-top:50px; } #newsletter input[type=text]{ float:left; border:1px solid #cccccc; width:186px; height:30px; padding:0; padding-left:10px; padding-right:10px; color:#999999; font-size:11px; } #newsletter input[type=submit] { background: url("../img/icons/slider_next_dark.png") no-repeat 50% 55%; text-indent: -9999px; cursor: pointer; margin-left: 4px; width: 38px; height: 32px; float: left; border: solid 1px #cccccc } #newsletter input.error{ border: 1px solid #b32b2b; } #newsletter h2{ background:none; display:inline; float:left; margin-left:40px; margin-top:50px; padding:0; } /* END CONNECT BAR */ /* FOOTER */ #footer{ background: url("../img/bg/head.jpg") no-repeat 0 bottom; border-top:1px solid #cccccc; clear:both; width:940px; position:relative; /*sticky footer*/ margin-top:-300px; /*sticky footer*/ height:300px; /*sticky footer*/ clear:both; /*sticky footer*/ padding-top:70px; } #footer2{ background: url("../img/bg/head.jpg") no-repeat 0 bottom; border-top:1px solid #cccccc; clear:both; width:940px; position:relative; /*sticky footer*/ margin-top:-300px; /*sticky footer*/ height:300px; /*sticky footer*/ clear:both; /*sticky footer*/ padding-top:70px; } #footInfo{ width:299px; background:#f6f6f6; text-align:right; padding-right:60px; padding-bottom:30px; margin-right:0; margin-left:0; } #footInfo #footLogo{ margin-top:25px; margin-bottom:5px; margin-right:0; } #footInfo p{ margin-top:0; margin-bottom:0; color:#999999; } #footInfo #phone{ margin-bottom:25px; color:#666666; } #footInfo a{ color:#b32b2b; } #footInfo a:hover{ color:#111111; } #footInfo h2 a{ color:#00a6d5; } #footInfo span{ color:#999999; width:330px; font-size:10px; } #footInfo h2{ display:inline; margin-left:5px; font-size:12px } #twitter{ background:url("../img/icons/bullet.png") no-repeat 0 93px; position:relative; overflow:visible; float:left; width:240px; margin-left:40px; margin-right:20px; padding-left:20px; margin-right:0; } #twitter h3, #blogLatest h3{ color:#999999; margin-bottom:10px; background:#f6f6f6; padding-left:3px; } #twitter h4, #blogLatest h4{ background:url("../img/linework/footer_widget.jpg") no-repeat 0 100%; text-indent:-9999px; margin-top:0; } #twitter span, #blogLatest span{ color:#cccccc; font-size:10px; font-style:italic; text-transform:lowercase; padding-left:3px; } #twitter span{ float:left; } #twitter .tweetIcon{ position:absolute; left:-18px; top:93px; } #twitter p, #blogLatest p{ margin-top:21px; margin-bottom:15px; } #twitter p{ overflow:visible; } #twitter p div.tweet-text{ } #blogLatest{ width:240px; float:left; margin-left:40px; margin-right:0; } #commentsNum{ display:block; background:url("../img/icons/commentsFoot.png") no-repeat 100% 50%; float:right; width:35px; color:#999999; } #blogLatest #blogLink{ display:block; background:url("../img/icons/arrow_r.png") no-repeat 0 70%; padding-left:18px; margin-top:0; } #blogLink h2{ margin-top:0; } /* END FOOTER */ /*------------------------------------------------------------------------*/ /* TESTIMONIAL PAGE */ /* SIDEBAR TESTIMONIALS*/ #whatWeDo #sidebar{ position:relative; background:none; } #whatWeDo #sidebar .top{ position:absolute; background:url("../img/icons/quote_66.png") no-repeat; left:20px; top:76px; width:96px; height:90px; z-index:0; } #whatWeDo #sidebar .bottom{ position:absolute; background:url("../img/icons/quote_99.png") no-repeat; right:60px; bottom:116px; width:96px; height:90px; z-index:0; } #testimonials{ width:240px; margin-top:90px; z-index:10; position:relative; } #testimonials li{ margin-left:0; text-align:left; margin-bottom:45px; } #testimonials p{ color:#333333; font-size:18px; line-height:30px; font-style:italic; font-family: helvetica, arial, sans-serif; z-index:2; margin-bottom:25px; } #testimonials span{ font-weight:bold; font-size:14px; margin-right:10px; color:#00a6d5; } /* END SIDEBR TESTIMONIALS */ #whatWeDo #tagline{ border-bottom:1px solid #cccccc; } /* MAIN CONTENT */ #whatWeDo #mainContent h1{ float:left; } #whatWeDo #mainContent h2{ float:left; margin-left:25px; margin-top:36px; } #whatWeDo #mainContent p{ width:520px; margin-bottom:30px; } #whatWeDo #mainContent .narrow{ width:210px; } #bodyImage{ position:relative; margin-top:8px; float:right; width:240px; } #bodyImage h2{ position:absolute; left:70px; top:155px; } #bodyImage a{ display:block; background:url("../img/icons/arrowHand_ul.png") no-repeat 0 50%; left:70px; top:150px; padding-left:20px; } #bodyImage #thumb{ position:absolute; left:-30px; top:100px; } /* END MAIN CONTENT */ /* END WHAT WE DO PAGE */ /*------------------------------------------------------------------------*/ /* PAGE WITH SIDE NOTES */ /* SIDEBAR NOTES*/ #sideNotes #sidebar{ position:relative; background:none; } .notes { margin-top: 90px; margin-left: 60px; position: relative; z-index: 10; width: 240px } .notes:last-child{ margin-top:20px; } .notes li{ margin-left:0; text-align:left; margin-bottom:20px; } .notes li h2{ margin-top:0; } .notes a{ color:#b32b2b; } .notes a:hover{ text-decoration:underline; } #sideNotes #sidebar img { margin-right: auto; margin-left: auto; position: relative } #sideNotes #sidebar>h2{ background:url("../img/icons/arrowHand_ul.png") no-repeat 0 50%; padding-left:25px; margin-top:0; margin-left:120px; } /* TAGLINE */ #sideNotes #tagline{ border-bottom:1px solid #cccccc; } /* MAIN CONTENT */ #sideNotes #mainContent .noteMarker{ display:inline; margin:0; padding:0; font-size:14px; color: #00a6d5; } #sideNotes #mainContent h1{ float:left; margin-bottom:0; } #sideNotes #mainContent h2{ background:url("../img/icons/arrowHand_ml.png") no-repeat 0 80%; clear:both; display:block; padding-left:25px; margin-top:0; } #sideNotes #mainContent p{ width:520px; margin-bottom:30px; } /* END SIDE NOTES PAGE */ /*------------------------------------------------------------------------*/ /* FULL WIDTH PAGE */ /* TAGLINE */ #fullWidth #tagline{ border-bottom:1px solid #cccccc; } /* MAIN CONTENT */ #fullWidth #mainContent{ margin-left:10px; } #fullWidth #mainContent h1{ float:left; margin-bottom:0; } #fullWidth #mainContent h2{ clear:both; float:left; display:block; margin-top:0; } #fullWidth #mainContent p { margin-bottom: 40px; width: 940px } #fullWidth #mainContent .col_4{ width:220px; float:left; margin-left:20px; } #fullWidth #mainContent .col_2{ width:450px; float:left; margin-left:40px; } #fullWidth #mainContent .edge{ margin-left:0; } #fullWidth #mainContent span{ background:url("../img/icons/plus.png") no-repeat 0 50%; padding-left:15px; font-Size:9px; text-transform:uppercase; color:#999999; display:block; margin-bottom:10px; } #fullWidth #mainContent a.readOnLink{ background:url("../img/icons/arrow_r.png") no-repeat 0 50%; padding-left:20px; display:block; margin-top:10px; font-size:16px; } #fullWidth #mainContent a.readOnLink:hover{ color:#000000; } /* END FULL WIDTH PAGE */ /*------------------------------------------------------------------------*/ /*404 PAGE*/ /* MAIN CONTENT */ #custom404 #mainContent{ position:relative; margin-bottom:100px; margin-top:0; margin-left:10px; } #custom404 #mainContent #message404{ margin:auto; width:400px; /*margin:0;*/ position:relative; overflow:visible; padding-top:20px; } #custom404 #mainContent #message404 h2{ background:url("../img/icons/arrowHand_dr_red.png") no-repeat 100% 8px; padding-right:25px; height:20px; position:absolute; color:#b32b2b; top:0; left:-20px; width:auto; } #custom404 #mainContent #message404 h3{ text-align:center; } /* END 404 Page*/ /*------------------------------------------------------------------------*/ /*SERVICES PAGE*/ /* TAGLINE */ #services #tagline{ border-bottom:1px solid #cccccc; } /* MAIN CONTENT */ #services #mainContent{ margin-left:10px; } #services #mainContent #col1, #services #mainContent #col2, #services #mainContent #col3{ float:left; position:relative; overflow:hidden; } #services #mainContent .col_3{ width:280px; margin-left:50px; } #services #mainContent .edge{ margin-left:0; } #services #mainContent h1{ margin-bottom:10px; } #services #mainContent h2{ display:block; clear:both; padding-top:0; margin-bottom:15px; } #services #mainContent h3{ color:#444444; line-height:20px; overflow:hidden; margin-bottom:10px; margin-top:20px; clear:both; } #services #mainContent h3.icon{ background:url("../img/icons/notify_02.png") no-repeat 0 50%; padding-left:15px; } #services #mainContent .drop{ margin:0; float:left; clear:none; display:inline; } #services #mainContent .dropcap { font-size: 800%; float: left; line-height: 0.8em; padding: 2px 3px 0 0; color: #000; font-weight: bold; position: relative; left: -3px; } #services #mainContent .dark{ color:black; font-weight:bold; display:block; text-transform:uppercase; } #services #mainContent .drop span{ position:relative; top:20px; font-size:80px; line-height:80px; font-weight:bold; color:#222222; margin-right:15px; } #services #mainContent p{ width:280px; margin-bottom:35px; color:#666666; clear:both; } #services #mainContent .dropText{ float:left; clear:none; display:inline; } #services #mainContent .titleImage{ margin-bottom:10px; } /*------------------------------------------------------------------------*/ /* MINIMAL TEXT PAGE */ /* SIDEBAR */ #minimal #sidebar{ position:relative; background:none; } /*TAGLINE */ #minimal #tagline{ border-bottom:1px solid #cccccc; } /*MAIN CONTENT */ #minimal #mainContent h1{ float:left; } #minimal #mainContent h2{ float:left; margin-left:25px; margin-top:36px; } #minimal #mainContent p{ width:520px; margin-bottom:30px; } /* END MINIMAL TEXT PAGE */ /*------------------------------------------------------------------------*/ /* BLOG MAIN PAGE */ /*TAGLINE */ #blogMain #tagline{ border-bottom:1px solid #cccccc; } /* SIDEBAR */ #blogMain #sidebar{ position:relative; width:330px; } #blogMain #sidebar form{ margin-left:35px; margin-top:34px; margin-bottom:3px; position:relative; } #blogMain #sidebar input[type=text]{ border:1px solid #f6f6f6; width:230px; height:30px; background:white; padding: 0 15px; } #blogMain #sidebar input[type=submit]{ border:0; position:absolute; top:2px; right:45px; background: white url("../img/icons/search.png") no-repeat 50% 50%; text-indent:-9999px; width:28px; height:28px; cursor:pointer; } #blogMain #sidebar #searchLabel{ background:url("../img/icons/arrowHand_ur.png") no-repeat 100% 10%; margin-left:200px; display:inline; margin-top:0; padding-right:20px; } #blogMain #sidebar div{ margin-left:35px; width:260px; margin-top:60px; } #blogMain #sidebar h3{ color:#999999; /*letter-spacing:1px;*/ line-height:32px; } #blogMain #sidebar #likeBtn{ width:258px; height:32px; border:1px solid #cccccc; } #blogMain #sidebar #likeBtn h3{ margin-left:16px; display:inline; } #blogMain #sidebar #likeBtn img{ float:right; margin-right:6px; margin-top:6px; } #blogMain #sidebar ul{ margin-top:25px; text-align:left; margin-left:5px; } #blogMain #sidebar li{ margin-left:20px; padding-left:5px; list-style-image:url("../img/icons/bullet.png"); } #blogMain #sidebar .line{ background:url("../img/linework/sidebar_widget.jpg") no-repeat; height:1px; margin:0; } #blogMain #sidebar li a{ color:#666666; } #blogMain #sidebar li a:hover{ color:#00a6d5; } #blogMain #sidebar li span{ color:#cccccc; font-size:10px; margin-left:15px; font-style:italic; } #blogMain #sidebar p{ margin-bottom:5px; } #blogMain #textWidget{ margin-bottom:65px; } #blogMain #textWidget p{ width:255px; } #blogMain #textWidget a{ display:block; background:url("../img/icons/arrow_r.png") no-repeat 0 70%; padding-left:20px; } #blogMain #featWork{ overflow:hidden; } #blogMain #featWork div{ float:left; margin-left:20px; width:120px; margin-top:10px; } #blogMain #featWork .first{ margin-left:0; } #blogMain #featWork .caption{ display:block; background:url("../img/icons/bullet.png") no-repeat 0 50%; padding-left:15px; margin-left:8px; margin-top:10px; color:#999999; } #blogMain #popList{ margin-bottom:40px; } /* END SIDEBAR */ /* MAIN CONTENT */ #blogMain #mainContent{ width:580px; margin-left:30px; } /*latest ribbon*/ #blogMain #mainContent .latest{ background:url("../img/icons/latest_03.png") no-repeat 65px 2px; } #blogMain #mainContent .latest:after { content: "."; display:block; height:0; visibility:hidden; clear:both; } #blogMain #mainContent .post{ overflow:hidden; padding-bottom:50px; border-bottom:1px solid #cccccc; margin-bottom:70px; } #blogMain #mainContent .post:first-child{ overflow:visible; } #blogMain #mainContent .post:last-child{ border:none; margin-bottom:0; } #blogMain #mainContent .post h1{ margin-top:0; margin-left:180px; margin-bottom:8px; } #blogMain #mainContent .post>h2{ margin-left:180px; margin-top:0; margin-bottom:35px; } #blogMain #mainContent .post b{ color:#888888; } #blogMain #mainContent .post em{ color:#888888; font-weight:bold; font-style:italic; } #blogMain #mainContent .postLrg{ overflow:hidden; } #blogMain #mainContent .postLrg img{ margin-bottom: 0; padding-bottom:25px; } #blogMain #mainContent .post .user, #blogMain #mainContent .post .date, #blogMain #mainContent .post .comments{ display:inline; font-size:10px; float:left; clear: left; text-align:right; color:#999999; width:100px; padding-right:20px; margin-left:0; } #blogMain #mainContent .post .user{ background:url("../img/icons/meta_user.png") no-repeat 100% 50%; } #blogMain #mainContent .post .date{ background:url("../img/icons/meta_date.png") no-repeat 99% 50%; } #blogMain #mainContent .post .comments{ background:url("../img/icons/meta_comments.png") no-repeat 99% 50%; } #blogMain #mainContent .post .comments a{ margin-left:0; color:#999999; } #blogMain #mainContent .post .comments a:hover{ color:#00a6d5; } #blogMain #mainContent .post .summary{ float:right; clear:none; width:400px; margin-top:0; margin-bottom:25px; margin-left:0; } #blogMain #mainContent .post .readMore{ margin-left:180px; float:left; } #blogMain #mainContent a h2{ clear:both; margin-left:0; margin-top:0; margin-bottom:0; } #blogMain #mainContent .postSml img{ float:left; padding-bottom:25px; } /* PAGINATION */ #blogMain #connect #mainPagination{ margin-left:180px; margin-top:50px; width:383px; float:left; height:20px; } #blogMain #connect #mainPagination h2{ background:none; float:none; margin:0; padding:0; } #blogMain #connect #mainPagination .older{ background:url("../img/icons/arrowHand_ml.png") no-repeat 0 50%; padding-left:25px; float:left; } #blogMain #connect #mainPagination .newer{ background:url("../img/icons/arrowHand_mr.png") no-repeat 100% 50%; padding-right:25px; float:right; } /* END BLOG MAIN PAGE */ /*------------------------------------------------------------------------*/ /* BLOG POST PAGE */ /*TAGLINE */ #blogPost #tagline{ border-bottom:1px solid #cccccc; } /* SIDEBAR */ #blogPost #sidebar{ position:relative; width:330px; } #blogPost #sidebar form{ margin-left:35px; margin-top:34px; margin-bottom:3px; position:relative; } #blogPost #sidebar input[type=text]{ border:1px solid #f6f6f6; width:230px; height:30px; background:white; padding: 0 15px; } #blogPost #sidebar input[type=submit]{ border:0; position:absolute; top:2px; right:45px; background: white url("../img/icons/search.png") no-repeat 50% 50%; text-indent:-9999px; width:28px; height:28px; cursor:pointer; } #blogPost #sidebar #searchLabel{ background:url("../img/icons/arrowHand_ur.png") no-repeat 100% 10%; margin-left:200px; display:inline; margin-top:0; padding-right:20px; } #blogPost #sidebar div{ margin-left:35px; width:260px; margin-top:60px; } #blogPost #sidebar .line{ background:url("../img/linework/sidebar_widget.jpg") no-repeat; height:1px; margin:0; } #blogPost #sidebar h3{ color:#999999; /* letter-spacing:1px;*/ line-height:32px; } #blogPost #sidebar #likeBtn{ width:258px; height:32px; border:1px solid #cccccc; } #blogPost #sidebar #likeBtn h3{ margin-left:16px; display:inline; } #blogPost #sidebar #likeBtn img{ float:right; margin-right:6px; margin-top:6px; } #blogPost #sidebar ul{ margin-top:25px; text-align:left; margin-left:5px; } #blogPost #sidebar li{ margin-left:20px; padding-left:5px; list-style-image:url("../img/icons/bullet.png"); } #blogPost #sidebar li a{ color:#666666; } #blogPost #sidebar li a:hover{ color:#00a6d5; } #blogPost #sidebar li span{ color:#cccccc; font-size:10px; margin-left:15px; font-style:italic; } #blogPost #sidebar p{ margin-bottom:5px; } #blogPost #textWidget{ margin-bottom:65px; } #blogPost #textWidget p{ width:255px; } #blogPost #textWidget a{ display:block; background:url("../img/icons/arrow_r.png") no-repeat 0 70%; padding-left:20px; } #blogPost #featWork{ overflow:hidden; } #blogPost #featWork div{ float:left; margin-left:20px; width:120px; margin-top:10px; } #blogPost #featWork .first{ margin-left:0; } #blogPost #featWork .caption{ display:block; background:url("../img/icons/bullet.png") no-repeat 0 50%; padding-left:15px; margin-left:8px; margin-top:10px; color:#999999; } #blogPost #popList{ margin-bottom:40px; } /* END SIDEBAR */ /* MAIN CONTENT */ #blogPost #mainContent .post pre{ float:right; width:440px; margin-bottom:35px; padding-left:40px; padding-right:40px; } #blogPost #mainContent .post code{ margin:0; padding:0; } pre { font-family:"Courier New", Courier, monospace; font-size: 12px; color:#000000; padding: 0; margin: 0; background-color: #eeeeee; line-height: 16px; overflow: auto; /* If the Code exceeds the width, a scrolling is available */ overflow-Y: hidden; /* Hides vertical scroll created by IE */ } pre code { margin: 0; padding: 18px 0; display: block; } #blogPost #mainContent{ width:580px; margin-left:30px; } #blogPost #mainContent .post{ overflow:hidden; position:relative; padding-bottom:50px; } #blogPost #mainContent .post h1{ margin-top:0; margin-left:60px; margin-bottom:8px; } #blogPost #mainContent .post .subtitle{ margin-left:60px; margin-top:0; margin-bottom:35px; } #blogPost #mainContent .post #tweetThis{ position:absolute; top:0; right:0; } #blogPost #mainContent .postLrg img{ margin-bottom: 0; padding-bottom:25px; } #blogPost #mainContent .post .meta{ margin-bottom:25px; padding-bottom:10px; border-bottom:1px solid #cccccc; width:520px; float:right; } #blogPost #mainContent .post .user, #blogPost #mainContent .post .date, #blogPost #mainContent .post .comments, #blogPost #mainContent .post .category{ display:inline; font-size:10px; float:left; color:#999999; padding-left:20px; } #blogPost #mainContent .post .user{ background:url("../img/icons/meta_user.png") no-repeat 0 50%; } #blogPost #mainContent .post .date{ background:url("../img/icons/meta_date.png") no-repeat 0 50%; margin-left:25px; } #blogPost #mainContent .post .category{ background:url("../img/icons/meta_category.png") no-repeat 0 50%; margin-left:25px; } #blogPost #mainContent .post .category a{ color:#999999; padding-left:5px; } #blogPost #mainContent .post .category a:first-child{ padding-left:0; } #blogPost #mainContent .post .category a:hover{ color:#00a6d5; } #blogPost #mainContent .post .comments{ background:url("../img/icons/meta_comments.png") no-repeat 10% 50%; float:right; } #blogPost #mainContent .post .comments a{ margin-left:0; color:#999999; } #blogPost #mainContent .post .comments a:hover{ color:#00a6d5; } #blogPost #mainContent .post p{ float:right; clear:none; width:520px; margin-top:0; margin-bottom:35px; margin-left:0; } #blogPost #mainContent .post h2{ float:right; width:520px; margin-top:0; margin-bottom:15px; } #blogPost #mainContent .post h3{ float:right; width:520px; margin-bottom:10px; } #blogPost #mainContent .post blockquote{ background: url("../img/icons/blockquote.png") no-repeat; overflow:visible; float:right; width:420px; margin-bottom:35px; margin-right:60px; padding-left:20px; padding-top:20px; font-size:16px; line-height:24px; font-family: helvetica, arial, sans-serif; color:#000000; } #blogPost #mainContent .post div.infoBox{ background:url("../img/icons/notify_03.png") no-repeat 20px 50%; float:right; width:450px; padding:20px; padding-left:50px; color:#00a6d5; border:1px solid #cccccc; margin-bottom:25px; } #blogPost #mainContent .post div.warningBox{ background:url("../img/icons/error.png") no-repeat 20px 50%; float:right; width:450px; padding:20px; padding-left:50px; color:#b32b2b; border:1px solid #cccccc; margin-bottom:25px; } #blogPost #mainContent .post div.download{ float:right; color:#00a6d5; text-transform:uppercase; font-weight:bold; font-size:9px; margin:0; margin-bottom:15px; position:relative; right:45%; } #blogPost #mainContent .post div.download div{ float:right; background:url("../img/icons/download.png") no-repeat 20px 50%; padding:10px 20px 10px 40px; position:relative; margin:0; display:inline; right:-50%; border:1px solid #cccccc; } #blogPost #mainContent .post ul, #blogPost #mainContent .post ol{ float:right; width:480px; margin-bottom:35px; margin-right:40px; } #blogPost #mainContent .post ul li{ background:url("../img/icons/bullet.png") no-repeat 0 80%; padding-left:15px; padding-top:8px; } #blogPost #mainContent .post p img{ display:inline; margin:8px 0 6px; padding:0; } #blogPost #mainContent .post img.alignLeft{ margin-left:0; margin-right:30px; float:left; } #blogPost #mainContent .post img.alignRight{ margin-right:0; margin-left:30px; float:right; } #blogPost #mainContent .post .bodyImage{ float:left; margin-left:60px; } #blogPost #mainContent .post .tags{ font-size:10px; float:right; width:495px; margin-bottom:35px; background: url("../img/icons/meta_tag.png") no-repeat 0 50%; padding-left:25px; } #blogPost #mainContent .post .tags a{ padding-left:3px; color:#999999; } #blogPost #mainContent .post .tags a:first-child{ padding-left:0; } #blogPost #mainContent .post .tags a:hover{ color:#000000; } /* END MAIN POST BODY */ /* POST DISCUSSION & COMMENTS */ #mainContent #discussion{ position:relative; overflow:hidden; padding-top:50px; padding-bottom:50px; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; margin-left:60px; } #mainContent #discussion h1{ margin-top:0; margin-left:120px; margin-bottom:8px; } #mainContent #discussion .subtitle{ margin-left:120px; margin-top:0; margin-bottom:35px; } #mainContent #discussion .comments{ position:absolute; top:50px; left:40px; display:block; padding-right:15px; background:url("../img/icons/commentsFoot.png") no-repeat 100% 50%; } #mainContent #discussion .comment{ float:left; clear:left; display:block; width:520px; margin-bottom:40px; } #mainContent #discussion>h3{ margin-left:120px; color:#cccccc; } #mainContent #discussion .reply{ width:460px; margin-bottom:25px; margin-left:60px; } #mainContent #discussion .comment p{ width:400px; float:right; margin-top:0; margin-bottom:25px; } #mainContent #discussion .reply p{ width:300px; float:right; } #mainContent #discussion .comment .avatar{ float:left; display:block; width:70px; position:relative; font-size:10px; color:#999999; } #mainContent #discussion .reply .avatar{ margin-left:27px; } #discussion .comment .avatar img{ margin-left:20px; display:block; float:right; margin-bottom:8px; } #discussion .comment .avatar .time{ float:right; display:block; background:url("../img/icons/meta_time.png") no-repeat 100% 50%; padding-right:15px; } #discussion .comment .avatar .date{ float:right; display:block; background:url("../img/icons/meta_date.png") no-repeat 100% 50%; padding-right:15px; } #discussion .comment .username{ float:right; width:400px; margin-bottom:20px; color:#999999; } #discussion .comment .username a{ background:url("../img/icons/bullet.png") no-repeat 0 80%; color:#999999; padding-left:15px; } #discussion .comment .username a:hover{ color:#00a6d5; } #discussion .comment h3.author a{ color:#b32b2b; } #discussion .reply .username{ width:300px; } #discussion .comment .replyTo{ float:right; clear:right; width:400px; margin:0; padding:0; } #discussion .comment .replyTo a{ color:#999999; } #discussion .comment .replyTo a:hover{ color:#444444; } /* END DISCUSSION AREA */ /* COMENTS FORM */ #commentsForm{ position:relative; overflow:hidden; width:580px; padding-bottom:20px; margin-top:40px; } #commentsForm h1{ margin-top:0; margin-left:180px; margin-bottom:8px; } #commentsForm h2{ margin-left:180px; margin-top:0; margin-bottom:60px; } #commentsForm input[type=text]{ width:113px; height:30px; border:1px solid #cccccc; margin-bottom:10px; float:left; clear:left; color:#999999; font-size:12px; line-height:30px; text-align:right; display:inline; padding-right:40px; padding-left:5px; } #commentsForm input.required{ background:url("../img/icons/required.png") no-repeat 85% 60%; } #commentsForm input.error{ background:url("../img/icons/error.png") no-repeat 85% 60%; } #commentsForm span.required{ position:absolute; display:block; width:45px; bottom:0; right:0; background:url("../img/icons/required.png") no-repeat 100% 60%; float:right; clear:right; color:#cccccc; font-style:italic; font-size:10px; padding-right:10px; margin-right:3px; } #commentsForm span.error{ position:absolute; bottom:0; left:180px; color:#b32b2b; font-style:italic; font-size:10px; margin-left:3px; } #commentsForm input[type=submit]{ float:left; clear:left; border:0; display:block; background:#f6f6f6; width:160px; height:30px; text-align:right; padding-right:40px; font-size:9px; text-transform:uppercase; color:#666666; } #commentsForm input[type=submit]:hover{ cursor:pointer; color:#00a6d5; } #commentsForm textarea{ width:378px; height:175px; border:1px solid #cccccc; margin-left:20px; float:right; padding:5px 10px; font-family:helvetica, arial, sans-serif; font-size:12px; line-height:20px; color:#666666; } /* POST PAGINATION */ #blogPost #connect #mainPagination{ margin-left:60px; margin-top:50px; width:503px; float:left; height:20px; } #blogPost #connect #mainPagination h2{ background:none; float:none; margin:0; padding:0; } #blogPost #connect #mainPagination .older{ background:url("../img/icons/arrowHand_ml.png") no-repeat 0 50%; padding-left:25px; float:left; } #blogPost #connect #mainPagination .newer{ background:url("../img/icons/arrowHand_mr.png") no-repeat 100% 50%; padding-right:25px; float:right; } /* END POST PAGINATION */ /* END BLOG POST PAGE */ /*------------------------------------------------------------------------*/ /* BLOG MINIMAL POST PAGE */ #blogPost.minimal #mainContent{ float:right; position:relative; overflow:hidden; margin-left:0; } #blogPost.minimal .metaMinimal{ width:300px; float:left; position:relative; clear:both; margin-top:163px; padding-right:60px; border-right:1px solid #cccccc; } #blogPost.minimal .metaMinimal .user, #blogPost.minimal .metaMinimal .date, #blogPost.minimal .metaMinimal .comments, #blogPost.minimal .metaMinimal .category{ display:block; font-size:10px; float:right; clear: right; text-align:right; color:#999999; padding-right:20px; margin-left:0; } #blogPost.minimal .metaMinimal .user{ background:url("../img/icons/meta_user.png") no-repeat 100% 50%; } #blogPost.minimal .metaMinimal .date{ background:url("../img/icons/meta_date.png") no-repeat 99% 50%; } #blogPost.minimal .metaMinimal .comments{ background:url("../img/icons/meta_comments.png") no-repeat 99% 50%; position:absolute; top:-90px; right:60px; } #blogPost.minimal .metaMinimal .category{ background:url("../img/icons/meta_category.png") no-repeat 100% 50%; } #blogPost.minimal .metaMinimal .category a{ margin-right:3px; color:#999999; } #blogPost.minimal .metaMinimal .category a:hover{ color:#00a6d5; } #blogPost.minimal .metaMinimal .comments a{ margin-left:0; color:#999999; } #blogPost.minimal .metaMinimal .comments a:hover{ color:#00a6d5; } /*END MINIMAL BLOG POST PAGE*/ /*------------------------------------------------------------------------*/ /* GET A QUOTE PAGE */ #contact #banner { background: #dedede; height: 350px } #contact #banner #officeImage{ position:relative; width:360px; float:left; } #contact #banner #officeImage span{ position:absolute; left:35px; bottom:35px; font-size:45px; color:#ffffff; } #contact #banner #officeImage h3{ position:absolute; left:35px; bottom:10px; margin:0; color:#ffffff; } #contact #banner #gmaps{ width:580px; height: 350px; float:left; margin:0; padding:0; } /* SIDEBAR */ #contact #sidebar{ position:relative; width:330px; background:none; } #contact #sidebar div{ width:260px; margin-left:35px; margin-bottom:60px; position:relative; } #contact #sidebar #textWidget{ margin-bottom:80px; } #contact #sidebar .contactDetails h3{ color:#666666; } #contact #sidebar .contactDetails p{ margin-bottom:15px; color:#999999; } #contact #sidebar .contactDetails a{ display:block; margin-top:0; color:#b32b2b; } #contact #sidebar .contactDetails a:hover{ color:#00a6d5; } #contact #sidebar .contactDetails .label{ background:url("../img/icons/arrowHand_dl.png") no-repeat 0 10px; padding-left:20px; position:absolute; top:-50px; right:30px; } #contact #sidebar #likeBtn h2{ background:url("../img/icons/arrowHand_dl.png") no-repeat 0 10px; margin:0; padding-left:20px; margin-right:30px; display:block; float:right; } #contact #sidebar #likeBtn a{ display:block; float:left; margin:0; margin-top:30px; padding:0; } /*END SIDEBAR*/ /* MAIN CONTENT */ #contact #mainContent{ margin-left:30px; margin-right:0; width:580px; margin-top:75px; } #contact #mainContent div { background: #ededed; margin-bottom: 20px; padding-bottom: 40px; position: relative; overflow: hidden } #contact #mainContent div h1{ margin-top:30px; margin-left:180px; margin-bottom:0; padding-top:20px; } #contact #mainContent div h2{ margin-top:10px; margin-left:180px; margin-bottom:40px; } #contact #mainContent input[type=text], #contact #mainContent input[type=submit], #contact #mainContent select{ border:1px solid white; line-height:28px; background:white; height:28px; clear:none; width:303px; margin-left:60px; font-size:11px; padding-left:25px; padding-right:10px; } #contact #mainContent form{ overflow:hidden; } #contact #mainContent input.required{ background: white url("../img/icons/required.png") no-repeat 8px 50%; } #contact #mainContent input.error{ background: white url("../img/icons/error.png") no-repeat 8px 50%; border-color:#b32b2b; } #contact #mainContent label{ color:#999999; line-height:28px; margin-right:60px; margin-bottom:10px; display:block; float:right; } #contact #mainContent #contactType label{ margin-left:10px; display:block; margin-right:20px; width:130px; float:left; line-height:29px; color:#444444; font-size:9px; text-transform:uppercase; } #contact #mainContent #contactType span{ float:left; display:block; width:100px; padding-right:60px; line-height:25px; padding-left:20px; text-align:right; margin-right:0; } #contact #mainContent #contactType input[type=radio]{ font-size:25px; display:inline; float:left; width:10px; margin:0; margin-right:10px; line-height:28px; height:28px; } #contact #mainContent select{ width:340px; color: #666666; padding:0; float:left; height:30px; margin-left:0; margin-bottom:10px; line-height:30px; padding-top:5px; padding-bottom:5px; padding-left:25px; padding-right:10px; } #contact #mainContent select option{ margin:10px; padding-left:20px; border:0; } #contact #mainContent #project label.radio{ margin-left:10px; display:block; margin-right:0; width:75px; float:left; line-height:28px; height:28px; color:#444444; font-size:11px; } #contact #mainContent #project input[type=radio]{ font-size:10px; display:inline; float:left; width:15px; margin:0; margin-top:8px; margin-right:5px; } #contact #mainContent #project span{ float:left; display:block; width:100px; padding-right:60px; line-height:25px; padding-left:20px; text-align:right; margin-right:0; } #contact #mainContent #message{ padding-bottom:60px; position:relative; } #contact #mainContent #message label{ margin-right:0; } #contact #mainContent #message textarea{ background:white url("../img/icons/required.png") no-repeat 8px 15px; position:relative; top:-5px; border:1px solid white; outline:none; width:288px; height:165px; padding:10px 25px; float:right; margin-right:60px; margin-left:60px; margin-bottom:15px; color: #666666; font-size:12px; font-family: helvetica, arial, sans-serif; font-weight: normal; line-height:20px; } #contact #mainContent #message textarea.error{ border:1px solid #b32b2b; background:white url("../img/icons/error.png") no-repeat 8px 15px; } #contact #mainContent #message input[type=submit]{ width:120px; margin-right:60px; padding:0 15px; float:right; height:30px; color: #00a6d5; font-size:9px; text-transform:uppercase; line-height:30px; } #contact #mainContent #message input[type=submit]:hover{ cursor:pointer; color: #000000; } #contact #mainContent #message span { color: #a6a6a6; font-size: 10px; background: url("../img/icons/required.png") no-repeat 0 50%; padding-left: 20px; position: absolute; top: 348px; left: 188px } #contact #mainContent #message span.error{ background:url("../img/icons/error.png") no-repeat 0 50%; color: #b32b2b; } /*END CONTECT / GET A QUOTE PAGE*/ /*------------------------------------------------------------------------*/ /* FREQUENTLY ASKED QUESTIONS PAGE */ /*TAGLINE */ #faq #tagline{ border-bottom:1px solid #cccccc; } /* SIDEBAR */ #faq #sidebar{ position:relative; width:330px; background:none; } #faq #sidebar div{ width:260px; margin-left:35px; margin-bottom:60px; position:relative; } #faq #sidebar #textWidget{ margin-bottom:80px; } #faq #sidebar .contactDetails h3{ color:#666666; } #faq #sidebar .contactDetails p{ margin-bottom:15px; color:#999999; } #faq #sidebar .contactDetails a{ display:block; margin-top:0; color:#b32b2b; } #faq #sidebar .contactDetails a:hover{ color:#00a6d5; } #faq #sidebar .contactDetails .label{ background:url("../img/icons/arrowHand_dl.png") no-repeat 0 10px; padding-left:20px; position:absolute; top:-50px; right:30px; } #faq #sidebar #likeBtn h2{ background:url("../img/icons/arrowHand_dl.png") no-repeat 0 10px; margin:0; padding-left:20px; margin-right:30px; display:block; float:right; } #faq #sidebar #likeBtn a{ display:block; float:left; margin:0; margin-top:30px; padding:0; } /*END SIDEBAR*/ /* MAIN CONTENT */ #faq #mainContent .item{ position:relative; overflow:hidden; margin-bottom:30px; } #faq #mainContent .item .question { background: url("../img/icons/contract_big.png") no-repeat 96% 60%; border: solid 1px #cccccc } #faq #mainContent .closed .question { background: url("../img/icons/expand_big.png") no-repeat 96% 60%; border: solid 1px #cccccc } #faq #mainContent .item .question h3 { font-size: 12px; font-weight: normal; background: url("../img/icons/arrow_r.png") no-repeat 0 4px; text-transform: none; margin: 10px 0 10px 20px; padding-left: 18px; width: 440px } #faq #mainContent .item .question h3 a { color: #444444 } #faq #mainContent .item .question h3 a:hover { color: #00a6d5 } #faq #mainContent .item .answer{ background: #f6f6f6; overflow:hidden; } #faq #mainContent .item p{ /*background:url("../img/icons/a.png") no-repeat 0 3px;*/ float:none; width:460px; margin:20px; margin-bottom:30px; padding-left:20px; } #faq #mainContent .item p.first { background: url("../img/icons/required.png") no-repeat 0 3px } #faq #mainContent .item .answer pre{ display:block; background:none; width:425px; margin:35px; padding-left:20px; color:black; } #faq #mainContent .item .answer ul{ width:400px; } #faq #mainContent .item .answer li{ background:url("../img/icons/bullet.png") no-repeat 0 5px; color:#666666; padding:0; padding-left:15px; margin:0; margin-top:8px; } /* END FREQUENTLY ASKED QUESTIONS PAGE */ /*------------------------------------------------------------------------*/ /*PORTFOLIO SECTION*/ /*MAIN PAGE*/ #portfolioCat #banner{ width:940px; height:350px; overflow:hidden; position:relative; margin-bottom:40px; background:none; } #portfolioCat #projectInfo, #portfolioCat div.category { margin-bottom:40px; } #portfolioCat #banner div{ float:left; } #portfolioCat #banner #slides{ width:577px; } #portfolioCat #banner #browser{ margin-right:2px; margin-left:0; width:360px; } #portfolioCat #banner #browser ul,#portfolioCat #banner #browser li{ margin:0; padding:0; } #portfolioCat #banner #browser li{ float:left; margin-right:4px; } #portfolioCat #projectInfo{ position:relative; overflow:hidden; border-bottom:1px solid #cccccc; } #portfolioCat #projectInfo div.titles{ position:relative; float:left; width:300px; margin-right:60px; overflow:hidden; } #portfolioCat #projectInfo h1,#portfolioCat #projectInfo h2{ overflow:hidden; float:right; margin-right:0; text-align:right; } #portfolioCat #projectInfo h1{ margin-bottom:0; } #portfolioCat #projectInfo h2{ clear:right; margin-bottom:0; margin-top:10px; } #portfolioCat #projectInfo p{ position:relative; width:557px; padding-left:10px; float:left; margin-top:40px; padding-right:10px; margin-bottom:0; } #portfolioCat #projectInfo h2 a{ float:left; text-align:left; margin-left:370px; padding-left:15px; background:url("../img/icons/arrow_r.png") no-repeat 0 70%; } #portfolioCat #projectInfo>h2{ margin:0; float:left; margin-top:10px; margin-bottom:40px; } /*CATEGORY DIVS*/ #portfolioCat .category{ overflow:hidden; position:relative; border-bottom:1px solid #cccccc; } #portfolioCat .last{ border:none; } #portfolioCat .category div{ width:300px; margin-right:60px; float:left; margin-left:3px; text-align:right; } #portfolioCat .category div p{ width:220px; float:right; color:#666666; margin-bottom:5px; } #portfolioCat .category div a{ background:url("../img/icons/arrow_r.png") no-repeat 0 80%; display:block; height:20px; padding-left:15px; float:right; clear:right; } #portfolioCat .category div span{ float:right; background:url("../img/icons/meta_tag.png") no-repeat 0 50%; clear:right; padding-left:20px; margin-top:60px; } #portfolioCat .category div span a{ color:#cccccc; background:none; float:left; clear:none; padding-left:5px; } #portfolioCat .category div span a:hover{ color:#444444; } #portfolioCat .category ul{ width:577px; overflow:hidden; margin:0; padding:0; padding-top:40px; margin-bottom:60px; } #portfolioCat .category li{ margin:0; padding:0; float:left; width:160px; margin-right:48px; } #portfolioCat .category li:last-child{ margin-right:0; } #portfolioCat .category:last-child{ border:none; } #portfolioCat .category h3{ margin-top:20px; margin-bottom:0; } #portfolioCat .category h3 a{ color:#666666; } #portfolioCat .category h3 a:hover{ color:#00a6d5; } /*END PORTFOLIO CATEGORIES PAGE*/ /*------------------------------------------------------------------------*/ /*PORTFOLIO SINGLE CATEGORY PAGE*/ /*TAGLINE */ #singleCat #tagline{ border-bottom:1px solid #cccccc; } #singleCat #main{ position:relative; } /*CATEGORY THUMBS*/ #singleCat #categoryInfo{ position:relative; overflow:visible; margin-top:30px; margin-bottom:10px; z-index:9; } #singleCat #categoryInfo div.titles{ position:relative; float:left; width:300px; margin-right:60px; overflow:hidden; } #singleCat #categoryInfo h1,#singleCat #categoryInfo h2{ overflow:hidden; float:right; margin-right:0; text-align:right; } #singleCat #categoryInfo h1{ margin-bottom:0; } #singleCat #categoryInfo h2{ clear:right; margin-bottom:0; margin-top:10px; } #singleCat #categoryInfo p{ position:relative; width:557px; padding-left:10px; float:left; margin-top:40px; padding-right:10px; margin-bottom:0; } #singleCat #categoryInfo h2.readMore a{ background:url("../img/icons/expand_blue.png") no-repeat 0 70%; float:left; text-align:left; padding-left:20px; margin-left:370px; } #singleCat #categoryInfo .titles h2.back{ background:url("../img/icons/back_red.png") no-repeat 0 70%; padding-left:20px; margin-left:0; } #singleCat #categoryInfo .titles h2.back a{ margin-left:0; color:#b32b2b; } #singleCat #categoryInfo>h2{ margin:0; float:left; margin-top:10px; margin-bottom:40px; } /* EXTENDED INFO */ #singleCat #infoLong{ width:600px; background:white; position:absolute; top:0; left:360px; z-index:10; padding-bottom:30px; display:none; /* hidden by default*/ } #singleCat #infoLong h2.readLess{ background:url("../img/icons/contract_blue.png") no-repeat 0 70%; margin-left:10px; float:left; margin-top:20px; padding-left:20px; } /*THUMB ROWS*/ #singleCat .row{ overflow:hidden; position:relative; z-index:1; } #singleCat .last{ margin-bottom:30px; } #singleCat .row div p{ width:220px; float:right; color:#666666; margin-bottom:5px; } #singleCat .row div a{ background:url("../img/icons/arrow_r.png") no-repeat 0 80%; display:block; height:20px; padding-left:15px; float:right; clear:right; } #singleCat .row div span{ float:right; background:url("../img/icons/meta_tag.png") no-repeat 0 50%; clear:right; padding-left:20px; margin-top:60px; } #singleCat .row div span a{ color:#cccccc; background:none; float:left; clear:none; padding-left:5px; } #singleCat .row div span a:hover{ color:#444444; } #singleCat .row ul{ float:right; overflow:hidden; margin:0; padding:0; padding-top:40px; margin-bottom:60px; } #singleCat .row li{ margin:0; padding:0; float:left; width:160px; margin-right:48px; } #singleCat .row li:last-child{ margin-right:0; } #singleCat .row:last-child{ border:none; } #singleCat .row h3{ margin-top:20px; margin-bottom:0; } #singleCat .row h3 a{ color:#666666; } #singleCat .row h3 a:hover{ color:#00a6d5; } #singleCat .row h2.label1{ position:absolute; overflow:visible; height:30px; color:#b32b2b; top:-25px; right:180px; background:url("../img/icons/arrowHand_dl_red.png") no-repeat 0 50%; padding-left:20px; line-height:20px; } #singleCat .row h2.label2{ position:absolute; overflow:visible; height:30px; top:-15px; left:100px; color:#b32b2b; background:url("../img/icons/arrowHand_dr_red.png") no-repeat 100% 30%; padding-right:25px; line-height:20px; } /*END SINGLE CATEGORY PAGE*/ /*------------------------------------------------------------------------*/ /*SINGLE PROJECT PAGE*/ /*TAGLINE */ #singleProject #tagline{ border-bottom:1px solid #cccccc; } /* MAIN CONTENT */ #singleProject #mainContent{ margin:0; padding:0; margin-left:10px; } #singleProject #mainContent #project{ position:relative; overflow:hidden; } #singleProject #mainContent #project .side, #singleProject #mainContent #project #projectImage{ margin-top:100px; } #singleProject #mainContent #project .side{ overflow:hidden; float:left; margin-right:60px; width:300px; } #singleProject #mainContent #project .titles{ float:left; text-align:right; overflow:hidden; } #singleProject #mainContent #project .titles h1{ float:left; width:300px; margin-top:0; margin-bottom:10px; } #singleProject #mainContent #project h2.back{ background:url("../img/icons/back_red.png") no-repeat 0 60%; padding-left:20px; float:right; margin-top:25px; margin-bottom:40px; } #singleProject #mainContent #project h2.back a{ color:#b32b2b; } #singleProject #mainContent #project #share{ position:absolute; background:#f6f6f6; top:60px; right:0; width:570px; float:left; margin-bottom:10px; text-align:right; height:20px; padding:5px; } #singleProject #mainContent #project #share h3{ margin:0; float:left; color:#999999; padding-left:10px; /*letter-spacing:1px;*/ display:inline; margin-right:20px; padding-bottom:5px; line-height:22px; } #singleProject #mainContent #project #tweetThis{ height:20px; float:right; } #singleProject #mainContent #project #likeThis{ height:20px; float:right; margin-right:20px; } #singleProject #mainContent #project #projectInfo{ width:580px; float:left; margin-top:100px; margin-bottom:60px; } #singleProject #mainContent #project #projectInfo img{ float:left; clear:both; padding:0; margin-bottom:40px; } #singleProject #mainContent #project #projectInfo .video{ margin-bottom:40px; position:relative; float:left; clear:both; } #singleProject #mainContent #project #projectInfo .note{ color:#b32b2b; margin:0; position:absolute; top:0; left:-315px; padding-right:20px; text-align:right; background:url("../img/icons/arrowHand_dr_red.png") no-repeat 100% 60%; } #singleProject #mainContent #project #projectInfo p{ width:580px; float:left; clear:both; margin-bottom:60px; } #singleProject #mainContent #project .meta{ width:300px; float:right; clear:both; overflow:hidden; margin:30px 0; } #singleProject #mainContent #project .meta span, #singleProject #mainContent #project .meta h2 { display:block; } #singleProject #mainContent #project .meta span{ text-align:right; } #singleProject #mainContent #project .meta .client{ background:url("../img/icons/meta_user.png") no-repeat 100% 50%; padding-right:20px; } #singleProject #mainContent #project .meta .date{ background:url("../img/icons/meta_date.png") no-repeat 100% 50%; padding-right:20px; } #singleProject #mainContent #project .meta .tags{ background:url("../img/icons/meta_tag_l.png") no-repeat 100% 50%; padding-right:20px; } #singleProject #mainContent #project .meta .tags a{ color:#cccccc; } #singleProject #mainContent #project .meta .tags a:hover{ color:#444444; } #singleProject #mainContent #project .launch { background:url("../img/icons/arrow_r.png") no-repeat 0 70%; padding-left:20px; margin:0; float:right; } /*END MAIN CONTENT*/ /* PROJECT PAGINATION */ #singleProject #connect #projectPagination{ margin-left:60px; margin-top:50px; width:503px; float:left; height:20px; } #singleProject #connect #projectPagination h2{ background:none; float:none; margin:0; padding:0; } #singleProject #connect #projectPagination .older{ background:url("../img/icons/arrowHand_ml.png") no-repeat 0 50%; padding-left:25px; float:left; } #singleProject #connect #projectPagination .newer{ background:url("../img/icons/arrowHand_mr.png") no-repeat 100% 50%; padding-right:25px; float:right; } /* END PROJECT PAGINATION */ /*END SINGLE PROJECT PAGE*/ /*------------------------------------------------------------------------*/ /* END MAIN STYLES */ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /* CONDITIONAL STYLES FOR IE7 */ /*------------------------------------------------------------------------*/ /* HOMEPAGE */ .ie7 #mainNav li.navLast{ margin-right:0; } .ie7 #infoPanel{ background:url("../img/home/infobg.png") repeat-y; } .ie7 #infoPanel #info{ overflow:visible; } .ie7 #infoPanel #info>a{ line-height:55px; background-position:100% 55px; display:block; margin-top:20px; padding-bottom:20px; } .ie7 #banner #nextSlide{ background:url("../img/home/nextbg.png") repeat-y; } .ie7 #sidebar{ padding-bottom:75px; } .ie7 #stats li.last { padding-top:20px; } .ie7 #upper{ padding-bottom:10px; } .ie7 #featLeft{ clear:left; float:left; } .ie7 #featRight{ margin-top:110px; } .ie7 #connect{ overflow:auto; height:124px; } .ie7 #newsletter{ margin-left:120px; } .ie7 #newsletter input[type="text"] { line-height:30px; } .ie7 #newsletter input[type="submit"] { display:block; overflow:hidden; font-size: 0; line-height:0; } .ie7 #twitter .tweetIcon { top:110px; } .ie7 #commentsNum { display:inline; } .ie7 #twitter span, #blogLatest span { float:left; } .ie7 #blogLatest #blogLink { height:25px; overflow:visible; } /* SIDE NOTES */ .ie7 #sideNotes #sidebar ul.last { margin-top: 20px; } .ie7 #sideNotes #sidebar{ margin-bottom:20px; } .ie7 #sideNotes #mainContent{ margin-bottom:60px; } /*FULL WIDTH*/ .ie7 #fullWidth #mainContent{ margin-bottom:120px; } /*MINIMAL TEXT*/ .ie7 #minimal #mainContent{ margin-bottom:120px; } /* SERVICES */ .ie7 #services #mainContent .titleImage { margin-top:0; } .ie7 #services #mainContent p.noMarginIE { margin-bottom:0; } /* BLOG MAIN */ .ie7 #blogMain #sidebar input[type="text"]{ line-height:30px; } .ie7 #blogMain #sidebar input[type="submit"] { display:block; overflow:hidden; font-size: 0; line-height:0; } .ie7 #blogMain #mainContent .post{ overflow:hidden; } .ie7 #blogMain #mainContent .post .readMore { float:right; margin-right:0; margin-left:0; display:inline; } .ie7 #blogMain #mainContent .post .readMore h2{ width:auto; display:block; width:380px; text-align:left; } .ie7 #blogMain #mainContent div.last { border-bottom:none; margin-bottom:0; } .ie7 #blogMain #sidebar{ padding-bottom:35px; } .ie7 #blogMain #sidebar #likeBtn h3 { float:left; } .ie7 #blogMain #textWidget a { height:48px; } .ie7 #blogMain #sidebar ul{ list-style-image:none; list-style-position:outside; } .ie7 #blogMain #sidebar li { list-style-image:none; background:url("../img/icons/bullet.png") no-repeat 0 18px; padding-left:20px; margin-left:5px; } /* BLOG POST */ .ie7 #blogPost #sidebar input[type="text"]{ line-height:30px; } .ie7 #blogPost #sidebar input[type="submit"] { display:block; overflow:hidden; font-size: 0; line-height:0; } .ie7 #blogPost #textWidget a { height:48px; } .ie7 #blogPost #sidebar #likeBtn h3 { float:left; } .ie7 #blogPost #sidebar ul{ list-style-image:none; list-style-position:outside; } .ie7 #blogPost #sidebar li { list-style-image:none; background:url("../img/icons/bullet.png") no-repeat 0 18px; padding-left:20px; margin-left:5px; } .ie7 #blogPost #sidebar{ padding-bottom:35px; } .ie7 #blogPost #mainContent .post div.download { margin:0 auto 15px auto; float:left; left:55%; } .ie7 #blogPost #mainContent .post div.download div { position:relative; right:50%; float:left; } .ie7 #blogPost #commentsForm form{ overflow:hidden; } .ie7 #blogPost #commentsForm textarea{ overflow:auto; } /* PORTFOLIO CATEGORIES */ .ie7 #portfolioCat #projectInfo h2 { width:300px; } .ie7 #portfolioCat #projectInfo { overflow:visible; } .ie7 #portfolioCat #projectInfo h2.more { height:25px; float:none; background:url("../img/icons/arrow_r.png") no-repeat 0 50%; margin-left:370px; padding-left:20px; margin-top:15px; } .ie7 #portfolioCat #projectInfo h2.more a { float:left; line-height:15px; background:none; margin-left:0; padding-left:0; } .ie7 #portfolioCat .category li.last{ margin-right:0; } .ie7 #portfolioCat .category div span.tags { margin-top:16px; } /* PORTFOLIO CATEGORIE SINGLE */ .ie7 #singleCat #categoryInfo h2.readMore { height:25px; float:none; background:url("../img/icons/plus.png") no-repeat 0 50%; margin-left:370px; padding-left:20px; margin-top:15px; } .ie7 #singleCat #categoryInfo h2.readMore a { float:left; line-height:15px; background:none; margin-left:0; padding-left:0; } .ie7 #singleCat div.row li.last { margin-right:0; } /* PORTFOLIO PROJECT SINGLE */ .ie7 #singleProject #project #share{ overflow:hidden; } .ie7 #singleProject #project h2.back { clear:both; } .ie7 #singleProject #project .launch { margin-top:10px; } .ie7 #singleProject #project #projectInfo p { width:580px; } .ie7 #singleProject #project{ margin-bottom:100px; } /* CONTACT / QUOTE */ .ie7 #contact #banner #officeImage span { line-height:45px; bottom:25px; } .ie7 #contact #mainContent #project input[type="radio"] { margin-top:4px; } .ie7 #contact #mainContent #message textarea { overflow:auto; } .ie7 #contact #mainContent input[type="text"]{ margin-bottom:-8px; } .ie7 #contact #mainContent form label{ margin-bottom:15px; } .ie7 #contact #mainContent #message form label{ margin-bottom:10px; } /* FAQ */ .ie7 #faq #mainContent div.item div.question { overflow:hidden; } /*------------------------------------------------------------------------*/ /* END CONDITIONAL STYLES FOR IE7 */ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /* CONDITIONAL STYLES FOR IE8 */ /*------------------------------------------------------------------------*/ /* sticky footer */ .ie8 #siteWrapper { display:table; height:100% } .ie8 #infoPanel{ background:url("../img/home/infobg.png") repeat-y; } .ie8 #banner #nextSlide{ background:url("../img/home/nextbg.png") repeat-y; } /* HOMEPAGE */ .ie8 #mainNav li.navLast{ margin-right:0; } .ie8 #newsletter{ margin-left:120px; } .ie8 #newsletter input[type="text"]{ line-height:30px; } .ie8 #stats li.last { padding-top:20px; } /* SIDE NOTES */ .ie8 #sideNotes #sidebar ul.last { margin-top: 20px; } /* BLOG MAIN */ .ie8 #blogMain #sidebar input[type="text"]{ line-height:30px; } .ie8 #blogMain #mainContent div.last { border-bottom:none; margin-bottom:0; } /* BLOG POST */ .ie8 #blogPost #sidebar input[type="text"]{ line-height:30px; } .ie8 #blogPost #mainContent .post div.download { margin:0 auto 15px auto; float:left; left:55%; } .ie8 #blogPost #mainContent .post div.download div { position:relative; right:50%; float:left; } .ie8 #blogPost #commentsForm form{ overflow:hidden; } .ie8 #blogPost #commentsForm textarea{ overflow:auto; } /* PORTFOLIO CATEGORIES */ .ie8 #portfolioCat .category li.last{ margin-right:0; } /* PORTFOLIO CATEGORIE SINGLE */ .ie8 #singleCat div.row li.last { margin-right:0; } /* CONTACT / QUOTE */ .ie8 #contact #mainContent #message textarea { overflow:auto; } /*------------------------------------------------------------------------*/ /* END CONDITIONAL STYLES FOR IE8 */ /*------------------------------------------------------------------------*/ /*------------------------------------------------------------------------*/ /* END CONDITIONAL STYLES FOR IE9 */ /*------------------------------------------------------------------------*/ /* sticky footer */ .ie9 #siteWrapper { display:table; height:100% } /* BLOG POST */ .ie9 #blogPost #commentsForm textarea{ overflow:auto; } /* CONTACT / QUOTE */ .ie9 #contact #mainContent #message textarea { overflow:auto; } /*------------------------------------------------------------------------*/ /* END CONDITIONAL STYLES FOR IE9 */ /*------------------------------------------------------------------------*/ /* STYLES FOR PRETTYPHOTO LIGHTBOX */ .prettyPhotoHilight { position: absolute; cursor: pointer; z-index: 10000; background: white url("../img/icons/zoom_03.png") no-repeat center center; } .prettyPhotoVideoHilight { position: absolute; cursor: pointer; z-index: 10000; background: white url("../img/icons/video_play_icon_01.png") no-repeat center center; } p.pp_description{ color:#222; } .galleryHilight { position: absolute; cursor: pointer; z-index: 10000; width: 176px; height: 112px; background: white url("../img/portfolio/current_thumb.png") no-repeat center center; } #contactForm.noquote #contactType { display: none; } /*------------------------------------------------------------------------*/ /* STYLES FOR APPLE DEVICES (iDevices) */ /*prevent auto adjustment of text size*/ .iDevices body, .iDevices p, .iDevices div, .iDevices h1, .iDevices h2, .iDevices h3, .iDevices h4, .iDevices h5, .iDevices h6 { -webkit-text-size-adjust: none; } /*contact page footer fix*/ .iDevices #footer{ height:300px; overflow:hidden; } .iDevices #footer #twitter{ overflow:hidden; } /*contact page sidebar fix*/ .iDevices #contact #sidebar #textWidget{ overflow:hidden; margin-bottom:30px; } .iDevices #contact #sidebar{ overflow:hidden; } .iDevices #contact #sidebar div{ padding-top:50px; overflow:hidden; margin-bottom:15px; } .iDevices #contact #sidebar .contactDetails .label{ top:0; overflow:hidden; } .iDevices #contact #sidebar .contactDetails p{ overflow:hidden; width:260px; } /*------------------------------------------------------------------------*/ /*FINISH CONDITIONAL STYLES FOR APPLE DEVICES*/