/*
Optimus Business and Portfolio
Created: 9/2009
By: myTheme at ThemeForest.net
http://themeforest.net/user/myTheme
*/


body {font:76%/1 Arial,'Helvetica Neue',Helvetica,sans-serif;text-align:center;background:#fafafa url(../img/body-bg.png) repeat-x;border-top:8px solid #CC0000;}

* {margin:0;padding:0;}
img, form fieldset {border:none;}
ul {list-style:none;}
a {text-decoration:none;}
:focus {outline:0;}
.clearBoth {clear:both;}
.textRight {text-align:right;}


/*
1. LAYOUT -------------------------------------*/

#wrapper {width:860px;margin:0 auto;text-align:left;}
#home #wrapper {background:url(../img/wrapperHome-bg.jpg) 50% 175px no-repeat;}

#header {width:780px;margin:0 auto;height:134px;position:relative;background:url(../img/header-bg.png) 0 100% no-repeat;}

#contentArea {clear:both;float:left;padding:45px 40px 0 40px;width:780px;}

#primaryContent {float:left;width:480px;padding-right:35px;background:url(../img/primaryContent-bg.png) 100% 0 no-repeat;}
#secondaryContent {float:right;width:240px;}

#footerArea {clear:both;background:#101010 url(../img/footerArea-bg.png) repeat-x;text-align:center;padding-top:59px;}
#footerContent {margin:0 auto;width:780px;text-align:left;border-top:4px solid #CC0000;}
#contactInfo {padding:15px 0 12px 0;border-bottom:1px solid #222;background:url(../img/contactInfo-bg.png) no-repeat;}

.footerColumn {float:left;width:240px;padding:30px 30px 30px 0;border-top:1px solid #000;background:url(../img/footerColumn-bg.png) 248px 25px no-repeat;}
.footerColumn.last {float:right;padding-right:0;background:none;}

#footerBottom {clear:both;margin:0 auto;height:60px;padding-top:20px;width:780px;border-top:2px solid #171717;}

.widePage #primaryContent {width:100%;background:none;}
.contentBox {float:left;width:360px;margin:10px 30px 0 0;}


/*
2. HEADER  -------------------------------------*/

a.logo {width:180px;height:60px;position:absolute;left:0;bottom:37px;background:url(../img/logo.png) no-repeat;text-indent:-9999px;}

ul.mainNavi {position:absolute;right:0;top:0;}
ul.mainNavi li {float:left;height:97px;}
ul.mainNavi li a {display:block;font-size:1.1em;color:#bbb;width:80px;height:49px;padding-top:47px;text-align:center;border-left:1px solid #000;}
ul.mainNavi li a:hover {color:#eee;border-bottom:1px solid #fff;}
ul.mainNavi li.current a {color:#fff;font-weight:bold;border-bottom:2px solid #CC0000;}
ul.mainNavi li a span {display:none;font-weight:normal;font-size:.7em;padding-top:4px;}
ul.mainNavi li a:hover span {display:block;color:#777;}

p.breadcrumbs {position:absolute;left:0;bottom:12px;font-size:.9em;color:#bbb;}
p.breadcrumbs a {color:#bbb;font-weight:bold;background:url(../img/breadcrumbs-arrow.png) 0 50% no-repeat;padding-left:10px;}
p.breadcrumbs a:hover {color:#999;}

form#search fieldset {position:absolute;right:0;bottom:6px;}
form#search fieldset input {width:160px;background:#eee url(../img/formSearch-bg.png) no-repeat;color:#ccc;font-size:.8em;border:1px solid #DFDFDF;padding:4px;}
form#search fieldset input#searchSubmit {width:34px;height:23px;cursor:pointer;background:url(../img/searchGo.png);color:#CC0000;font-weight:bold;border:none;margin-left:-6px;}
form#search fieldset input#searchSubmit:hover {color:#333;}


/*
3. MAIN CONTENT  -------------------------------------*/

#contentPage #contentArea h1 {font:2.6em Calibri,Arial,'Helvetica Neue',Helvetica,sans-serif;color:#CC0000;font-weight:bold;}
#contentArea h2 {font-size:1.5em;color:#555;padding-top:10px;}
#contentArea h3 {clear:both;font-size:1.2em;color:#555;padding-top:10px;}
#secondaryContent h3 {font-size:1em;color:#666;text-transform:uppercase;font-weight:normal;padding-top:5px;}

#contentArea p {clear:both;font-size:1.15em;line-height:1.5em;padding:5px 0;color:#444;}
#contentArea #primaryContent blockquote p {color:#888;font:1.15em Georgia,'Times New Roman',Times,serif;line-height:1.5em;padding:10px 20px;background:#fff url(../img/blockquote-bg.png) 20px 15px no-repeat;text-indent:12px;margin:5px 0;border:1px solid #eee;}
#secondaryContent p {color:#666;font-size:1em;}

/* note */
#secondaryContent .note {clear:both;width:200px;margin-top:10px;padding:14px 20px 20px 20px;background:#FFF8CF url(../img/note-bg.png) 0 100% no-repeat;font-size:.9em;color:#666;}

/* links */
#contentArea h2 a {color:#555;}
#contentArea h2 a:hover {color:#444;}
#footerContent h2 a {color:#ddd;}
#contentArea p a {color:#CC0000;font-weight:bold;border-bottom:1px solid #ddd;}
#contentArea p a:hover {border-bottom:2px solid #ccc;}

/* lists */
#primaryContent ul, #primaryContent ol, #secondaryContent ul {padding:5px 0 5px 28px;color:#999;}
#primaryContent ul span, #primaryContent ol span {color:#333;font-weight:normal;}
#primaryContent ul li, #primaryContent ol li, #portfolioMore ul li {font-size:1.15em;line-height:1.4em;}
#primaryContent ul li, #secondaryContent ul li {list-style-type:disc;}
#primaryContent ol li {list-style-type:upper-roman;}

#secondaryContent ul {font-size:1em;line-height:1.4em;}
#secondaryContent ul li span {color:#666;}
#secondaryContent ul li a {color:#666;}

/* images */
#primaryContent img.bigImage {float:left;width:470px;margin:5px 0 15px 0;border:5px solid #e8e8e8;}
#primaryContent.portfolio img {float:left;width:350px;height:140px;margin-top:5px;padding:5px;background:url(../img/portfolioPreview-bg.png);}
#primaryContent.portfolio img:hover {background-position:0 150px;}
#secondaryContent img {float:left;width:95px;height:70px;margin:5px 5px 5px 0;padding:5px;background:url(../img/roundedImg-bg.png);}
#secondaryContent a img:hover {background-position:0 80px;}
.contentBox img {float:left;margin:3px 6px 0 0;}

/* tables */
table {margin:5px 0;border-collapse:collapse;border-spacing:0;}
table thead th {padding:5px 22px;}
table tbody th, table tbody td {padding:5px 15px;color:#444;text-align:left;}
table thead th {background:#CC0000;color:#fff;}
table tbody {font-size:1.1em;}
table tbody tr {background:#ddd;}
table tbody tr.alt {background:#eee;}


/*
4. FOOTER  -------------------------------------*/

/* contact info in the footer */
#contactInfo ul li {padding:6px 10px 6px 28px;color:#999;font-size:1.2em;display:inline;}
#contactInfo ul li a {color:#999;}
#contactInfo ul li a:hover {color:#ccc;}
#contactInfo ul li.address {background:url(../img/icons/address.png) 0 50% no-repeat;}
#contactInfo ul li.phone {background:url(../img/icons/phone.png) 0 50% no-repeat;}
#contactInfo ul li.email {background:url(../img/icons/email.png) 0 50% no-repeat;}

/* headers */
#footerContent h2 {font-size:1.1em;color:#ddd;clear:both;font-weight:bold;line-height:1.4em;}
#footerContent h2.twitter {padding-left:20px;background:url(../img/icons/twitter.png) no-repeat;}

/* text */
#footerContent p {clear:both;color:#aaa;line-height:1.4em;padding:0 10px 5px 0;font-size:1em;}
#footerContent p span {color:#555;font-size:.9em;}
#footerContent p a {color:#CC0000;font-weight:bold;border-bottom:1px solid #333;}
#footerContent p a:hover {color:#ccc;border-bottom:1px solid #555;}

/* links */
#footerBottom p a {color:#444;}
#footerBottom p a:hover {color:#666;}
#footerBottom p {float:right;clear:none;padding:0;text-align:right;font-size:.9em;color:#333;line-height:1.3em;}
#footerBottom p span {color:#CC0000;font-weight:bold;}

/* link with an arrow */
a.goLink {background:url(../img/goLink-bg.png) 0 50% no-repeat;color:#bbb;font-weight:bold;padding-left:9px;text-transform:uppercase;font-size:.9em;}
a.goLink:hover {color:#ccc;background-position:1px 50%;}

/* lists */
#footerContent .footerColumn ul {padding-bottom:5px;}
#footerContent .footerColumn ul li {color:#aaa;font-size:1em;line-height:1.4em;}
#footerContent .footerColumn ul li a {background:url(../img/goLink-bg.png) 0 50% no-repeat;color:#aaa;padding-left:9px;}
#footerContent .footerColumn ul li a:hover {color:#ccc;}

/* images */
#footerContent img {float:left;margin:5px 5px 5px 0;}
#footerBottom img {float:left;}


/*
5. HOMEPAGE -----------------------------*/

/* slideshow */
#slideshowArea {width:760px;height:320px;padding:10px;background:url(../img/slideshowArea-bg.jpg) no-repeat;position:relative;}
#slideshow ul, #slideshow li {list-style:none;width:760px;height:320px;overflow:hidden;}

#prevButton, #nextButton {float:left;position:absolute;left:-70px;top:150px;text-indent:-9999px;background:url(../img/prevButton.png) no-repeat;width:40px;height:40px;}
#nextButton {float:right;left:810px;background-image:url(../img/nextButton.png);}
#prevButton a, #nextButton a {float:left;width:40px;height:40px;}

/* intro text */
#introContent {margin:0 auto;width:780px;text-align:left;}
.introColumn, #portfolioMore {float:right;width:240px;padding:0;}
.introColumn.wide, #portfolioText {float:left;width:495px;padding-right:35px;background:url(../img/introColumn-bg.png) 100% 0 no-repeat;}

#introContent h1 {font-size:1.6em;line-height:1.1em;letter-spacing:-1px;color:#CC0000;padding:20px 0 4px 0;}
#introContent h1 span {font-size:1.2em;color:#ccc;font-style:italic;}
#introContent p {color:#aaa;line-height:1.3em;font-size:.9em;padding-right:12px;}
#introContent .introColumn.wide p {font-size:1.2em;color:#444;}
#introContent p a {background:#FFF1BF;color:#444;font-weight:normal;}
#introContent p a:hover {background:#FFEDAF;color:#111;}
#introContent img {margin:20px 0 5px 0;}


/*
6. PORTFOLIO -----------------------------*/

.portfolioSlideshow {margin:10px 0;padding:0;}

ol#controls {float:left;font-size:1em;position:absolute;left:10px;bottom:10px;background:url(../img/transparentBg.png);width:755px;padding-left:5px;}
ol#controls li {margin:0 1px 0 0;padding:0;float:left;list-style:none;font-size:1em;}
ol#controls li a {float:left;color:#888;padding:5px 3px;text-decoration:none;}
ol#controls li.current a {color:#CC0000;font-weight:bold;}

#portfolioMore ul li {border-bottom:1px solid #e1e1e1;font-size:1em;color:#666;line-height:1.5em;padding:4px 0;}
#portfolioMore ul li span {font-weight:bold;color:#CC0000;}

a.linkButton {background:url(../img/linkButton-bg.png);width:240px;height:40px;float:left;color:#fff;text-align:center;font-weight:bold;line-height:40px;margin-top:25px;}
a.linkButton:hover {color:#ddd;}


/*
7. CONTACT FORM  -------------------------------------*/

.required {color:#f00;font-size:1.2em;font-weight:bold;}

form fieldset input, form fieldset textarea {background:#fff;border:1px solid #ddd;color:#444;padding:4px;font-family:Verdana,'Helvetica Neue',Helvetica,sans-serif;}
form fieldset input:focus, form fieldset textarea:focus {background:#fafafa;border:2px solid #ddd;padding:3px;}
form fieldset label {color:#888;font-size:.9em;font-weight:bold;padding:12px 0 4px 0;display:block;}
form#contact {clear:both;}
form#contact fieldset textarea {width:425px;overflow:auto;margin-bottom:10px;}
form#contact fieldset .radio {border:none;background:none;margin:3px 0 3px 2px;font-size:.9em;color:#888;}
form#contact fieldset button {font:1em Arial,'Helvetica Neue',Helvetica,sans-serif;padding:4px 8px;cursor:pointer;color:#fff;background:#CC0000;text-transform:uppercase;border:1px solid white;}
form#contact fieldset button:hover {color:#ddd;}

/* after successfully sent message */
#primaryContent .success {float:left;color:#333;background:#FFFFCC;font-weight:bold;border:1px solid #ddd;margin:10px 0;padding:6px 50px;text-align:center;font-size:1em;}