/*
Theme Name: Our Agency Wordpress
Theme URI: http://themeforest.net
Description: A CMS version of Our Agency theme from TF.net
Version: 1.0
Author: Hein Maas
Author URI: http://heinmaas.com
Tags: cms, modern, white
*/

/* --- Resets --- */
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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
ol, ul { list-style: none; }
.hide { display: none; }
strong { font-weight: bold; color: #000; }
.clear { clear: both; }

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/* --- Basic Styles --- */
body { background: #fff url(images/bg-body.jpg) top left repeat-x; font: 11px/20px "Lucida Grande", Tahoma, sans-serif; color: #545454; }
body#subpage { background: #fff url(images/bg-subbody.jpg) top left repeat-x; }
p { margin: 0 0 15px 0; }
#container { width: 900px; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -120px; text-align: left; }

/* --- Link Styles --- */
a:link, a:visited { color: #1e9be4; text-decoration: none; }
a:hover { color: #1e9be4; text-decoration: underline; }
a:active { color: #1e9be4; text-decoration: none; }

/* -------------------------
--------- HOMEPAGE ---------
-------------------------- */

/* --- Top Header --- */
#top { width: 900px; height: 134px; background: transparent url(images/bg-top.jpg) top left no-repeat; position: relative; }
#top h1 { background: transparent url(images/logo.png) top left no-repeat; text-indent: -9999px; width: 270px; height: 48px; margin: 27px 0 0 120px; float: left; }
#slogan { color: #1f1f1f; float: left; margin: 40px 0px 0px 20px; padding: 0px; height: 20px; background: url(images/bg-sloganright.jpg) no-repeat right; }

/* --- Navigation --- */
#nav { position: absolute; bottom: 0px; }
#nav li { display: block; background: url(images/bg-nav.jpg) top no-repeat; width: 108px; height: 39px; line-height: 39px; float: left; text-align: center; margin: 0 5px 0 0; }
#nav li a { color: #fff; }
#nav li a:hover { color: #1e9be4; text-decoration: none; }
#nav li.current_page_item { background-position: bottom; }
#nav li.current_page_item a { color: #000; }
#nav li a { display: inline; line-height: 39px; }
.navnew { border:none; border:0px; margin:0px; padding:0px; font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:12px; font-weight:bold; position: absolute; bottom: 2px; }
.navnew ul { background:#333333; height:45px; list-style:none; margin:0; padding:0; }
.navnew li { float:left; padding:0px; }
.navnew li a { background:#333333 url("images/navnew/seperator.gif") bottom right no-repeat; color:#cccccc; display:block; font-weight:normal; line-height:35px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; }
.navnew li.current_page_item a, .navnew li a:hover, .navnew ul li:hover a { background: #2580a2 url("images/navnew/hover.gif") bottom center no-repeat; color:#FFFFFF; text-decoration:none; }
.navnew li ul { background:#333333; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200; /*top:1em; /*left:0;*/}
.navnew li:hover ul { display:block; }
.navnew li li { background:url('images/navnew/sub_sep.gif') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:225px; }
.navnew li:hover li a { background:none; }
.navnew li ul a { display:block; height:35px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; }
.navnew li ul a:hover, .navnew li ul li:hover a { background:#2580a2 url('images/navnew/hover_sub.gif') center left no-repeat; border:0px; color:#ffffff; text-decoration:none; }
.navnew p { clear:left; }

/* --- Spotlight / Slider --- */
#spotlight { height: 315px; width: 900px; overflow: hidden; background: url(images/bg-spotlight.jpg) top right no-repeat; position: relative; }
#mover { position: relative; overflow: hidden; width: 3000px; /* Adjust the width based on spotlight-items number (1000*[items number]) */ }
#item { width: 820px; }
.spotlight-item { margin: 15px 50px 0; /*overflow: hidden;*/
	width: 820px; float: left; position: relative; display: inline; }
.spotlight-item h2 { color: #2a2a2a; font: 48px Arial, Helvetica, Verdana, sans-serif; font-weight: bold; margin: 0px 0 15px 0; }
.spotlight-item p { color: #444; font: 22px/25px Arial, Helvetica, Verdana, sans-serif; padding: 0 0 0 2px; height: 65px; }
.spotlight-item .description { margin: 20px 0 0 10px; width: 260px; }
.spotlight-item img { position: absolute; top: 0; right: 0; }
.launch { background: url(images/readmore.png) top left no-repeat; display: block; width: 125px; height: 33px; text-indent: -9999px; /*position: absolute;*/
	bottom: 20px; left: 10px; margin: 20px 0 0 -1px; cursor: pointer }
.pause { background: url(images/pause.png) top left no-repeat; display: block; width: 97px; height: 25px; text-indent: -9999px; position: absolute; bottom: 2px; right: 20px; cursor: pointer; }
#spotlight img.preview { float: right; }

/** contact form homepage **/
#contact-us { width: 345px;display:inline; float: right; margin: 38px 0 0 0; padding: 0 0 0 25px; border-left: 1px solid #e4e4e4; position: relative;}
#contact-us li {padding:0;margin:0;}
#contact-us .gform_wrapper {background:url(images/inviting-operator.jpg) no-repeat 179px 50px;}

#contact-us .gform_description {padding-right: 150px; display: block;}

.inviting-operator {position:absolute; right:25px; top:40px; z-index: -1;}

/* --- MAIN CONTENT --- */
/* --- Content: First Row --- */
#mainContent { background: transparent url(images/bg-maincontent.jpg) top left no-repeat; margin: 2px 0 0; }
#topMain { padding: 13px 0 0 18px; margin: 0 0 20px 0; overflow: hidden; }
#who { width: 490px; float: left; padding: 0 20px 0 0; }
#who img { background-color: #eee; border: 1px solid #ccc; padding: 7px; margin: 0 25px 5px 5px; float: left; }
#who h3 { color: #393939; font: 18px/24px "Lucida Grande", Tahoma, Verdana, sans-serif; font-weight: bold; text-transform: uppercase; width: 435px; background: transparent url(images/bg-h3.jpg) bottom left repeat-x; padding: 0 0 15px 5px; margin: 0 0 20px 0; }
#who p { margin: 0 0 20px 0; }
#who p.more { text-align: right; }
#who p.more a { text-decoration: underline; }
#services { width: 345px; float: right; margin: 38px 0 0 0; padding: 0 0 0 25px; border-left: 1px solid #e4e4e4; }
#services li { width: 260px; height: 47px; display: block; padding: 10px 0 5px 70px; }
#services li h5 { color: #111; font: 12px "Lucida Grande", Tahoma, Verdana, sans-serif; font-weight: bold; }
#services li h5 a { color: #111; }
#services li p { color: #545454; font: 11px "Lucida Grande", Tahoma, Verdana, sans-serif; }
#services li#first { border-bottom: 1px solid #e4e4e4; background: #f6f6f6 url(images/first.png) top left no-repeat; }
#services li#first:hover { text-decoration: none; ; background: #fff url(images/first.png) top left no-repeat; }
#services li#faq { border-top: 1px solid #fff; border-bottom: 1px solid #e4e4e4; background: #f6f6f6 url(images/faq.png) top left no-repeat; }
#services li#faq:hover { text-decoration: none; ; background: #fff url(images/faq.png) top left no-repeat; }
#services li#third { border-top: 1px solid #fff; background: #f6f6f6 url(images/third.png) top left no-repeat; }
#services li#third:hover { text-decoration: none; ; background: #fff url(images/third.png) top left no-repeat; }


/* --- Content: Second Row --- */
#bottomMain { border-top: 1px solid #e4e4e4; padding: 15px 15px 0; margin: 0 0 25px 0; overflow: hidden; }
#notes { width: 265px; padding: 0 25px 0 0; float: left; }
#swipe { width: 270px; padding: 0 25px 0 25px; float: left; border-right: 1px solid #e4e4e4; border-left: 1px solid #e4e4e4; }
#bulb { width: 220px; float: left; padding: 0 0 0 25px; }
#notes h4, #swipe h4, #bulb h4 { color: #222; font: 14px/24px "Lucida Grande", Tahoma, Verdana, sans-serif; font-weight: bold; margin: 0 0 10px 0; height: 20px; padding: 0 0 0 25px; }
#notes h4 { background: url(images/h4-notes.jpg) top left no-repeat; }
#swipe h4 { background: url(images/h4-swipe.jpg) top left no-repeat; }
#bulb h4 { background: url(images/h4-bulb.jpg) top left no-repeat; }

/* --- FOOTER --- */
#footer, .push { height: 120px; padding: 15px 0 0 0; }
#footer { background: #f0f0f0 url(images/bg-h3.jpg) top left repeat-x; }
#footer-inner { width: 850px; margin: 0 auto; overflow: hidden; }
#footer-inner p { float: left; }
#footer-inner p.validate { float: right; line-height: 18px; font-size: 10px; font-weight: bold; text-transform: uppercase; }
#footer-inner p.validate a { color: #555; background: url(images/valid.jpg) top left no-repeat; padding: 0 0 0 20px; margin: 0 25px 0 0; height: 20px; display: block; float: left; }

/* -------------------------
--------- SUBPAGES ---------
-------------------------- */
#content { width: 100%; background: transparent url(images/bg-maincontent.jpg) top left no-repeat; margin: 36px 0 0 0; overflow: hidden; }
#portfolio { margin: 30px 5px 0; overflow: hidden; }

/* --- Single Portfolio Item --- */
.item { width: 700px; float: left; margin: 0 10px 40px; color: #565656; }
.item img { background-color: #ececec; border: 1px solid #ddd; padding: 6px; margin: 0 0 15px; }
.item h2 { font: 18px "Lucida Grande", Tahoma, Verdana, sans-serif; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; padding: 12px 0 12px 2px; margin: 0 7px 15px; }
.item h2 a { color: #565656; }
.item p { padding: 0 10px; }

/* --- Portfolio Nav --- */
#folioNav { width: 100%; height: 35px; margin: 0 5px; background: #ececec url(images/bg-h3.jpg) top left repeat-x; border-bottom: 1px solid #e4e4e4; overflow: hidden; }
#folioNav span#previous { float: left; width: 96px; height: 26px; background: transparent url(images/previous.png) top left no-repeat; text-indent: -9999px; margin: 5px 10px; }
#folioNav span#next { float: right; width: 96px; height: 26px; background: transparent url(images/next.png) top left no-repeat; text-indent: -9999px; margin: 5px 10px; }

/* --- Clients & Testimonials --- */
#wrap { margin: 40px 10px 25px 20px; overflow: hidden; }
#clients { width: 600px; float: left; padding: 0 10px 0 0; border-right: 1px solid #e4e4e4; }
#testimonials { width: 230px; float: left; margin: 0 0 0 20px; }
#clients h4, #testimonials h4 { color: #222; font: 14px/16px "Lucida Grande", Tahoma, Verdana, sans-serif; font-weight: bold; margin: 0 0 10px 0; height: 16px; padding: 0 0 0 22px; }
#clients h4 { background: url(images/h4-clients.jpg) top left no-repeat; }
#testimonials h4 { background: url(images/h4-testi.jpg) top left no-repeat; line-height: 10px; margin-left: 18px; }
#clientlist { overflow: hidden; }
#clientlist li { float: left; margin: 0 15px 0 0; }
#clientlist li img { background-color: #ececec; border: 1px solid #ddd; padding: 6px; margin: 0 0 15px; }
#testimonials blockquote { background: url(images/quotes.jpg) top left no-repeat; padding: 0 10px 0 25px; margin: 0 0 15px 0; color: #999; font-style: italic; }
#testimonials p.author { padding: 0 10px 0 25px; }
#testimonials span.readmore { display: block; width: 96px; height: 25px; background: transparent url(images/readmore.png) top left no-repeat; text-indent: -9999px; margin: 0 20px; }

/* --- CONTACT PAGE --- */
#contactForm { width: 470px; float: left; padding: 0 20px 0 0; margin: 50px 0 25px 20px; }
.topBorder { border-top: 1px solid #e4e4e4; padding-top: 30px; }
#contactInfo { margin-bottom: 50px; }
#contactInfo p { color: #545454; }
#contactInfo h4 { color: #222; font: 14px/16px "Lucida Grande", Tahoma, Verdana, sans-serif; font-weight: bold; background: url(images/contact.png) top left no-repeat; margin: 0 0 10px 0; height: 16px; padding: 0 0 0 25px; }

/* --- Contact Form --- */
#contactForm form label { }
#contactForm form input { display: block; height: 15px; border: none; border: 1px solid #eee; background-color: #fcfcfc; width: 230px; margin: 0 0 20px 0; color: #2c2c2c; padding: 5px; font: 11px/20px "Lucida Grande", Tahoma, sans-serif; }
#contactForm form input#submit { display: inline; height: 25px; width: 97px; background: transparent url(images/send.png) top left no-repeat; border: 0; text-indent: -9999px; float: right; margin: 5px 55px 0 0; }
#contactForm form textarea { display: block; border: none; border: 1px solid #eee; background-color: #fcfcfc; width: 400px; margin: 0 0 20px 0; color: #2c2c2c; padding: 5px; font: 11px/20px "Lucida Grande", Tahoma, sans-serif; }
#error { font-size: 14px; color: #b50606; }
.loading { font-size: 14px; color: #459d10; }

/* --- BLOG POSTS --- */
#blogContent { padding: 13px 0 0 18px; margin: 0 0 20px 0; overflow: hidden; background: transparent url(images/bg-single.jpg) top left no-repeat; }
#blog { width: 545px; float: left; padding: 0 20px 0 0; margin: 30px 0 25px 20px; }
.post-top { overflow: hidden; margin: 0 0 10px 0; }
.post-content { background: transparent url(images/bg-h3.jpg) top left repeat-x; padding: 15px 0 0; }
.post-snippet, .post { background-color: #f4f3f3; padding: 15px 10px 15px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margin-bottom: 25px; overflow: hidden; }
.post-snippet h2, #comments h2 { font: 18px/24px "Lucida Grande", Tahoma, Verdana, sans-serif; font-weight: normal; color: #565656; width: 370px; float: left; }
.post-snippet a, #comments h2 a { color: #343434; }
.post-snippet .comments-link, .post-snippet .readmore, .post-snippet .more-link { float: right; width: 134px; background-color: #292929; color: #fff; font-size: 13px; line-height: 25px; text-align: center; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.post-snippet .comments-link a, .post-snippet .readmore a { color: #fff; }
img.thumb { float: left; margin: 0 15px 15px 0; display: inline; background-color: #ececec; padding: 6px; border: 1px solid #dfdede; }
#post-nav { overflow: hidden; }
#post-nav p { width: 140px; height: 50px; line-height: 50px; font-size: 18px; background-color: #f4f3f3; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; }
#post-nav p a { color: #545454; }
#post-nav p.previous { float: left; }
#post-nav p.next { float: right; }

/* --- SINGLE POST STYLES --- */
.post-img { margin: 0 15px 15px 2px; display: inline; border: 1px solid red; background-color: #ececec; padding: 6px; border: 1px solid #dfdede; }
.post h2 { font: 18px/24px "Lucida Grande", Tahoma, Verdana, sans-serif; font-weight: normal; color: #565656; width: 350px; float: left; }
.post .meta { float: right; background-color: #292929; width: 175px; color: #fff; font-size: 11px; line-height: 25px; text-align: center; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.post blockquote, .post-snippet blockquote { margin: 20px 50px; padding: 10px 15px 5px; background-color: #fff; }
.post ol, .post-snippet ol { list-style: decimal inside; margin: 10px 20px; }
.post ul, .post-snippet ul { list-style: inside; list-style-image: url(images/bullet.gif); margin: 10px 20px; }
.promo { border-top: 1px solid #ddd; padding: 10px 25px 0; overflow: hidden; }
.promo .feeds, .promo .tweet { font-size: 18px; padding: 0 0 0 40px; line-height: 32px; }
.promo .feeds a, .promo .tweet a { color: #292929; }
.promo .feeds { background: transparent url(images/feedicon.jpg) top left no-repeat; float: left; margin: 0 40px 0 0; border-right: 1px solid #ddd; padding: 0 25px 0 40px; }
.promo .tweet { background: transparent url(images/tweeticon.jpg) top left no-repeat; float: left; }

/* --- COMMENTS STYLES --- */
#subpage h3 { background-color: #292929; display: inline; color: #fff; font-size: 11px; line-height: 18px; text-align: left; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 5px 15px 5px; margin: 0 0 30px 0; }
#comments { margin: 20px 0 20px 0; border-top: 1px solid #ddd; }
.comment { margin: 0; background-color: #f4f3f3; padding: 5px 15px 5px; border-bottom: 1px solid #ddd; overflow: hidden; }
.comment .comment-meta { overflow: hidden; margin: 5px 0 5px 0; }
.comment .avatar { float: left; margin: 0 15px 0 0; display: inline; background-color: #ececec; padding: 4px; border: 1px solid #dfdede; }
.comment .name { font-size: 24px; margin: 10px 0 5px 0; }
.comment .name a { color: #292929; }
.author { background-color: #fbfbfb; }
.comment .comment-text { font-size: 12px; margin: 0 0px 0; }

/* --- COMMENT FORM --- */
form#commentform { background-color: #f4f3f3; padding: 15px 20px 15px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margin: 15px 0 25px 0; overflow: hidden; }
form#commentform label { display: block; font-size: 12px; font-weight: bold; color: #292929; margin: 0 0 5px 0; }
form#commentform label span { font-size: 11px; font-weight: normal; font-style: italic; }
form#commentform #author, form#commentform #email, form#commentform #url { width: 270px; height: 30px; background-color: #fff; border: 1px solid #dfdfdf; font-size: 13px; padding: 0 5px 0; margin: 0 0 10px 0; }
form#commentform textarea { width: 470px; height: 120px; background-color: #fff; border: 1px solid #dfdfdf; font-size: 13px; padding: 0 5px 0; margin: 0 0 10px 0; }
form#commentform #submit { background-color: #292929; color: #fff; font-size: 11px; line-height: 18px; text-align: center; border: none; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 3px 15px 3px; }

/* --- SIDEBAR & WIDGETS --- */
#sidebar { width: 270px; float: left; margin: 15px 0 0 0; padding: 0 0 0 20px; }
#sidebar .widget h2 { font: 18px/24px "Lucida Grande", Tahoma, Verdana, sans-serif; font-weight: normal; color: #565656; margin: 0 0 10px 0; }
.widget { margin: 0 0 20px 0; }
.widget .ad { margin: 0 5px 5px 0; }
#sidebar ul div.widget ul li { background: transparent url(images/bg-li.gif) bottom left repeat-x; line-height: 25px; width: 240px; }
.widget ul li a { color: #545454; background: transparent url(images/arrow.gif) top left no-repeat; padding: 0 0 0 15px; }