/*--------------------------------------------------------------------------
* Copyright 2009 Mark. Sydney :: www.marksydney.com :: All Rights Reserved *
 	                          __             
	 /'\_/`\                 /\ \            
	/\      \    __      _ __\ \ \/'\        
	\ \ \__\ \  /'__`\  /\`'__\ \ , <       
	 \ \ \_/\ \/\ \L\.\_\ \ \/ \ \ \\`\   __ 
	  \ \_\\ \_\ \__/.\_\\ \_\  \ \_\ \_\/\_\
	   \/_/ \/_/\/__/\/_/ \/_/   \/_/\/_/\/_/

* Author: Robbie Shepherd
* Project: Mark.com.au
* Written: 18 Jan 2010
--------------------------------------------------------------------------*/
/* generic elements
-------------------------------*/
body { background: #FFF url(../_images/bg-header.gif) left top repeat-x; color: #000; font-family: Arial,Helvetica,Verdana,sans-serif; font-size: 12px; text-align:center;}
body *{line-height: 1.4em;}
a{color: #c60c30; text-decoration: none; font-size: inherit;}
a:hover{color: #660000;text-decoration: underline;}
a:active, a:focus { outline: none; }
h1 { font-size: 30px; font-weight: normal;}
h1 span{color: #c60c30;}
h2{ font-size: 30px; font-weight: bold; margin:10px 0px 18px 0px;line-height: 1.2em;}
h2 a{color: #000;}
h2 a:hover{color: #000; text-decoration: none;}
p{line-height: 1.4em; margin: 2px 0px 10px 0px; font-size: 13px; color: #666;}
h3{font-size: 19px; color: #c60c30;}
h4{font-size: 16px;}
h5{font-size: 13px;}
ul{color: #666; list-style-type: disc; list-style-position: outside; margin-bottom: 10px;}
li{margin-left: 25px;}
ol{list-style-type: decimal; list-style-position: outside;}
/* html5 elements
------------------------------*/
header, footer, nav, article, section, aside, time{display:block;}

/* wrapper for clearing/overflowing floated elements
-----------------------------------------------------*/
.wrapper{width: 100%; overflow: hidden;}

/* masthead
-----------------------------------------------------*/
header{height: 94px; width: 798px; padding-left: 162px; background-color: #c60c30; margin-bottom: 25px; position: relative;}
header nav{padding-top: 58px;}
header ul{width:100%; height: 36px; margin:0;}
header ul li{float: left; display: inline; margin-right: 35px; margin-left:0px; position: relative; padding-top: 9px;}
header ul li a{display:block; height: 15px; text-indent: -5000px; font-size:0;}
header ul li ul {position: absolute; margin-right: 0px; margin-left:0px;}
header ul li ul li{position: absolute; margin-right: 0px; margin-left:0px;}
#nav-about{background: #c60c30 url(../_images/bg-menu-about.gif) left top no-repeat; width: 40px;}
#nav-work{background: #c60c30 url(../_images/bg-menu-work.gif) left top no-repeat; width: 35px;}
#nav-careers{background: #c60c30 url(../_images/bg-menu-careers.gif) left top no-repeat; width: 50px;}
#nav-innovation{background: #c60c30 url(../_images/bg-menu-innovation.gif) left top no-repeat; width: 65px;}
#nav-contact{background: #c60c30 url(../_images/bg-menu-contact.gif) left top no-repeat; width: 50px;}
#nav-about:hover, #nav-work:hover, #nav-careers:hover, #nav-innovation:hover, #nav-contact:hover{background-position: bottom left;}
#nav-about.selected, #nav-work.selected, #nav-careers.selected, #nav-innovation.selected, #nav-contact.selected{background-position: bottom left;}

#logo{position: absolute; top: 26px; left:0px;}
#logo-movember{position: absolute; top: 22px; left:0px;}

#container{width: 960px; margin:0px auto; text-align:left; position: relative;}

/* Home Page
-------------------------------*/
.main-content{width: 632px; float: left; padding-bottom: 30px;}
#hero{margin-bottom: 30px;}
#hero h1{line-height: 1.5em; letter-spacing: -0.5px; border-bottom: 1px solid #c60c30; padding-bottom: 20px;}
article{width:100%;overflow: hidden;}
article time{font-size: 13px;}
article time strong{font-weight:bold;}
article time a{color:#000;}
article time a:hover{color:#000;text-decoration:none;}

/* Tags and social tool-bar
-------------------------------*/
.tags{font-size: 13px; font-weight: bold; margin-top:1em;}
.tags a{}
.tool-bar{margin: 30px 0px; background-color: #c60c30; padding:5px; width: 620px; overflow: hidden; color: #FFF; font-size:13px;}
a.email{ text-transform: capitalize; float: left; display: block; width: 40px; padding-left: 18px; padding-top: 1px; background: transparent url(../_images/icon-email.gif) left center no-repeat; color: #FFF; text-decoration:none; margin-right:5px;/*30*/ line-height: 14px;}
a.email:hover, a.print:hover{text-decoration: underline;}
a.print{float: left; display: block; width: 40px; padding-left: 18px; background: transparent url(../_images/icon-print.gif) left center no-repeat; color: #FFF; text-decoration:none; line-height: 14px;}
.tool-bar span, a.facebook, a.twitter, a.delicious, a.digg{float: right; display: block; width: 16px; line-height: 14px; margin-left: 12px;}
.tool-bar a.facebook{margin-left:15px;}
.tool-bar span{width: auto; white-space:pre; padding-top:1px;}
.tool-bar .gplus{float: right;}

/* tool-bar for article page */
.tool-bar.no-bg{background-color: #FFF; color: #000; width: 630px; padding: 5px 0px}
.tool-bar.no-bg a.email{background: transparent url(../_images/icon-email-grey.gif) left center no-repeat; color: #c60c30;}
.tool-bar.no-bg a.print{background: transparent url(../_images/icon-print-grey.gif) left center no-repeat; color: #c60c30;}
/* Pagination
-------------------------------*/
.pagination{margin-top: 0px; text-align: left;}
.pagination ol{width:100%; overflow: hidden;}
.pagination ol li{float: left; display:block; color: #000; font-size: 13px; font-weight: bold; margin-right: 6px; margin-left: 0px; width: 22px; height: 22px; text-align: center; background-color: #c60c30; color: #FFF; line-height:1.2em;}
.pagination ol li.current{ padding-top: 6px; height:16px; line-height:1em;}
.pagination ol li a{color: #000;padding:3px 4px 5px; border: 1px solid #999; text-align: center; display:block; width: 12px; height: 12px;background-color: #FFF; color: #000; line-height:1.2em;}
.pagination ol li#previous{background-color: #FFF; border:0; width: 70px;text-align: left;}
.pagination ol li#next{background-color: #FFF; border:0; width: 70px;text-align: left;}
.pagination ol li#previous a, .pagination ol li#next a{border:0; color: #c60c30;white-space: pre;}

/* Sidebar
-------------------------------*/
aside{float: right; width: 237px;}
#form-search{margin: 5px 0px 10px 0px;}
#form-search p{margin:0; width:100%; overflow: hidden;}
#form-search input{border: 1px solid #cecece; height: 18px; padding:2px 2px; float: left; width: 150px;}
#form-search button{padding: 0px 15px; background-color: #c60c30; color: #FFF; height: 24px; float:right;}
#form-search button:hover{background-color: #660000;}
aside h5{font-size: 13px; font-weight: bold; margin: 20px 0px 15px;}
aside ul{margin-bottom: 30px; list-style-type:none;}
aside li{margin-left:0; font-size: 11px;}
ul.with-arrows li{margin-bottom: 5px; line-height: 1.4em; background: #FFF url(../_images/icon-red-arrow.gif) right center no-repeat;}
ul.with-arrows li a{display: block;}
aside li.selected a, aside dd.selected a{color:#600;}

aside dl{width: 100%; overflow: hidden; margin-bottom: 15px; font-size:10px;}
aside dt{float: left; width: 45px; font-weight: bold; margin-bottom: 5px; line-height: 1.4em;}
aside dt a{color:#000;}
aside dt a:hover{color:#000;text-decoration:none;}
aside dd{float: left; width:96px; margin-bottom: 5px;line-height: 1.4em;}
aside dl a{display: block; font-size: 11px;}
#tweets{color: #666; margin-top: 45px;}
#tweets time{color: #000; font-size: 10px;}
#tweets h5{margin-top:0px; color: #000;}

/* Footer
-------------------------------*/
footer{width: 100%; background-color: #c60c30; margin-top: 20px;}
footer ul{list-style-type:none;}
footer ul li{margin-left:0;}
#footer-wrapper{width: 960px; overflow: hidden;margin: 0px auto; padding: 30px 0px;text-align: left;}
#reading, #delicious{float: left; display: inline; width: 237px; margin-right: 12px;}
#last-fm, #flickr{float: left; display: inline; width: 215px; margin-right: 12px; padding: 0px 5px; }
#flickr{padding-left: 25px; width: 195px;}
#delicious{width: 225px; margin-right: 0; padding-left: 12px;}
footer h5{ color: #FFF; font-size:13px; margin-bottom: 15px; font-weight: normal;}
#reading ul{margin-top: 15px; width: 200px;}
#reading ul li{padding-left: 20px; background: transparent url(../_images/icon-google-reader.gif) left top no-repeat; line-height:16px; color: #FFF; margin-bottom: 10px;}
#reading ul li a{color:#FFF; text-decoration:none;}
#reading ul li a:hover{color:#FFF; text-decoration:underline;}
#delicious ul { margin:0; padding:0; list-style:none; text-align:justify; }
#delicious li { margin:0; padding:0 3px; display:inline; position:static; }
#delicious li a { text-decoration:none; }

#subscribe{color: #666; margin-top: 45px;}
#subscribe h5{margin-top:0px; color: #000;}
#subscribe ul{}
#subscribe ul li{ margin-bottom:10px;}
#subscribe ul li a{color: #C60C30;}
#subscribe ul li img{vertical-align: middle; margin-right: 10px;}

#copyright {clear: both; color: #FFF; padding-top: 15px; text-align: center; width:695px;}
#copyright a {color: #FFF;}


/* Listen
-------------------------------*/
table.lastfm{width:100%;margin:5px 0px 25px 0px;}

.lastfm th, .lastfm td{border:none;padding:3px 5px;vertical-align:top;font-size:1em;line-height:14px;border-bottom: 2px solid #c60c30;}
.lastfm .odd td {background-color:#EBEBEB;}
.lastfm .even td {background-color:#FFF; }
.lastfm tr:hover td {background-color:#fadce1;}
.lastfm a{text-decoration:none; color: #999;}
.lastfm a:hover{color:#E31937;text-decoration:underline;}
.lastfm .positionCell{color:#666;width:20px;text-align:right;}
.lastfm .subjectCell div{height:1.4em;overflow:hidden;}
.lastfm .chartbarCell{width:33%;padding:0;background-color:transparent !important;}
.lastfm div.chartbar{overflow:hidden;background:no-repeat url(../_images/listen-bar-end.gif) 100% 0;}
.lastfm div.chartbar span{display:block;height:16px;background:#E31937 repeat-x url(../_images/listen-bar-bg.gif) 0 0;color:#FFF;margin-right:3px;padding:3px 0.5em 1px;font-size:0.9em;overflow:hidden;}
.lastfm .dateCell {color:#999;font-size:0.9em;text-align:right;white-space:nowrap;}

/* Flickr
-------------------------------*/
#flickr table{border: 1px solid #FFF; border-collapse: collapse;}
#flickr td{border: 1px solid #FFF;}
#flickr td img{display:block;}


/* Contact Form in header/global nav
---------------------------------------*/
#contact-wrapper{position: absolute; top: 48px; right: 0px; width: 248px; z-index:99;}
#contact-wrapper.show{background-color: #000;}
#contact-wrapper h3 a{display:block; width: 248px; height: 46px; background: transparent url(../_images/bg-contact-hdr.gif) left top no-repeat; text-indent: -9000px;}
#contact-form{display:none; border-top: 1px solid #FFF; width: 218px; padding: 15px; overflow: hidden; color: #FFF;}
#contact-form dl{width:100%; overflow: hidden; font-size: 13px;}
#contact-form dt{float: left; width: 60px; padding-bottom: 15px;line-height: 1.4em;}
#contact-form dd{float: left; width: 158px;padding-bottom: 15px;line-height: 1.4em;}
#contact-form dd input{width: 150px; border: 0px; background-color: #404040; color: #FFF; padding:2px 1px;}
#contact-message{width: 150px; overflow-y:scroll; height: 60px;border: 0px; background-color: #404040; color: #FFF; padding:0px 1px; font-family: Arial, Helvetica, Verdana; font-size: 12px;}
#contact-me{float: left; margin-right: 10px; margin-bottom: 10px; width: 20px; padding: 2px;}
#contact-me-lbl{float: left; display:block; line-height: 1.4em; width: 180px; height: 60px;}
#contact-form button{padding: 0px 15px; background-color: #c60c30; color: #FFF; height: 24px; float:right; margin:0; height:24px; font-size:11px;line-height:1.4em;}
#contact-form button:hover{background-color: #660000;}
.left {float: left;}

/* Article Page
---------------------------------------*/
#breadcrumbs{font-size: 13px; font-weight: bold; width:100%; overflow: hidden; margin-bottom: 20px; color: #c60c30;}
#breadcrumbs a{line-height: 1.6em;}
#breadcrumbs #back{float: left; padding-left: 7px; background: transparent url(../_images/icon-red-arrow-left.gif) left center no-repeat;}
#breadcrumbs #previous{float: right; padding-left: 7px; margin-right: 5px;background: transparent url(../_images/icon-red-arrow-left.gif) left center no-repeat;}
#breadcrumbs #next{float: right; padding-right: 7px; margin-left: 5px;background: transparent url(../_images/icon-red-arrow.gif) right center no-repeat;}
#breadcrumbs span{float: right;line-height:1.6em;}

/* About Page
---------------------------------------*/
.about h2{margin: 0px 0px 15px 0px;}
.about .wrapper{border-bottom: 1px solid #c60c30; padding-bottom: 20px;}
.key-ppl.left{width: 260px; float: left; display:inline; clear:both;}
.key-ppl.right{width: 260px; float: right; display:inline;}
.key-ppl h5{font-size: 13px; margin: 15px 0px 0px; color: #666; font-weight: bold;}
.key-ppl p.title{color: #666; margin-top:0;}
#team{margin-top: 30px;}
#staff-pics{width: 100%; overflow:hidden;}
#staff-pics img{float: left; display: block;}

#tooltip{display:none; position: absolute; background-color: #c60c30; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 2px solid #FFF; padding: 10px; color: #FFF; width: 150px; text-align: left; font-size: 11px;-moz-box-shadow: 5px 5px 10px #ccc;-webkit-box-shadow: 5px 5px 10px #ccc;box-shadow: 5px 5px 10px #ccc;}
#tooltip p{color: #FFF;font-size: 10px; margin-bottom:0;}
#tooltip div{width:100%; position: relative;}
#tooltip-cnr{position: absolute; bottom: -9px; left: -7px;}

#clients{margin-top: 30px;}
#clients .col1, #clients .col2, #clients .col3, #clients .col4{width:158px; height:128px; line-height:128px; float:left; text-align:center;}
#clients .col1{text-align:left; clear:both;}
#clients .col4{text-align:right;}
#clients img{vertical-align:middle;}

#awards{margin-top: 30px;}
#awards.wrapper{border-bottom:0;}
#awards h5{font-size: 11px; margin: 20px 0px 0px; color: #000; font-weight: bold; clear:both;}
#awards h6{font-size: 13px; margin: 0; color: #666; font-weight: bold;}
#awards h6 a:hover{text-decoration:none;}
.awarder-item{margin: 10px 0px 0px;}
.awarder-item.left{width: 260px; float: left; display:inline; clear:both;}
.awarder-item.right{width: 260px; float: right; display:inline;}
.award-item p.award-name{color: #666; margin-top:0; margin-bottom:0px;}
.award-item p.award-name a{color: #666;}
.award-item p.award-name a:hover{color: #666; text-decoration:none;}
.award-item p.award-work{color: #999; margin-top:0;}
.award-item p.award-work a{color: #999;}
.award-item p.award-work a:hover{color: #999; text-decoration:none;}

#data{margin-top: 30px; border-bottom:none;}

/* Work Page
---------------------------------------*/
.work h2{margin: 0px 0px 15px 0px;}
.work h3{font-size: 16px; color: #888;}
.workitem{float: left; display: inline; margin: 0px 15px 15px 0px; width: 200px;}
.workitem.right{margin-right:0px;}
.workitem img{display:block;}
.workitem .title{background-color: #c60c30; color: #FFF; padding: 0px 10px 10px 10px; height: 30px; font-size: 13px;}
.title a{color: #FFF;}

aside dl.awards dt{float: left; width: 70px; font-weight: bold; margin-bottom: 5px; line-height: 1.4em; clear:both;}
aside dl.awards dd{float: left; width:167px; margin-bottom: 15px;line-height: 1.4em;}

section.awards{margin:30px 0px;}
section.awards h5{font-size: 12px; font-weight:bold; margin-bottom: 10px;}
section.awards ul {list-style-type: none;}
section.awards ul li{margin-left:0px;margin-bottom:5px;}

/* Work Detail Page
---------------------------------------*/
#img-gallery{width:620px; overflow: hidden; margin-bottom: 10px; height: 320px;}
#img-gallery.loading{background: #FFF url(../_images/loader.gif) 50% 50% no-repeat}
.pagination.gallery{margin-bottom: 20px;}
.pagination.gallery ol li#view-site{background-color: #FFF; border:0; width: 150px;text-align: right; float: right;margin-right:0;}
.pagination.gallery ol li#view-site a{border:0; color: #c60c30;white-space: pre; width:133px; padding-right: 7px; background: #FFF url(../_images/icon-red-arrow.gif) right center no-repeat;}
.pagination.gallery ol li.current{padding-top:0px; height: 22px;}
.pagination.gallery ol li.current a{border:1px solid #c60c30;background-color: #c60c30; color: #FFF; font-weight: normal;}

/* Contact Page
---------------------------------------*/
.contact h2{margin: 0px 0px 15px 0px;}
h2.contact-office{float: left; width: 170px;}
p.contact-info{float: left; width: 212px;}
img.office-pics{float: left; width: 250px;}
.offices{margin-bottom: 50px;}
h2 span{color: #c60c30;}

/* Search Page
---------------------------------------*/
.search #form-search button{float:none;margin-left:5px;}
.search time{margin:25px 0 5px 0; font-size:13px;}
.search h5 a{color:#666;}

/* Validation / Errors
---------------------------------------*/
label.error{color:#C60C30;}
.error-sect { color:#F85350; margin-bottom:1em; }
div#unpublished-warning{padding:5px; margin-bottom:10px; background-color:#EFFF79; text-align:center; border:1px solid #F00;}

/* Facebox for send to friend 
---------------------------------------*/
.clear { clear:both; }
.right  { float:right; }
.hide { display:none; }
form .padit { margin-top:4px; }
#facebox { left: 25%; position: absolute; text-align: left; top: 100px; z-index: 100; }

	#facebox_overlay { height:100%; left: 0px; position: fixed; top: 0px; width:100%; }
	#facebox div.popup { position: relative; }
	#facebox div.content { background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; width: 500px; }
	#facebox a.close { background:url(../_images/closelabel.gif) no-repeat; display:block; height:22px; overflow:hidden; position: absolute; text-indent:-9999px; top: 10px; right: 10px; width:66px; }
	/*#facebox div#sendtofriend { background: #edecec; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; width: 480px; }*/
	#facebox div#sendtofriend { padding: 10px; width: 480px; }
	#facebox .loading { background-color: transparent; height: 300px; text-align: center; width: 500px; }

	/*#facebox h2	{ color:#2b2b2b; }*/
	#facebox p	{ width:70%; }
	#facebox p.stf_intro { border-bottom:1px solid #C60C30; padding-bottom:1em; width:100%; }
	#facebox form ul { padding: 6px 0px 0px 0px; margin: 0; }
	#facebox form li { display: inline; float: left; margin: 0 10px 0 0; padding: 0px 0px 8px 0px; width: 230px; }
	#facebox label { font-weight:bold; padding: 0px 0px 5px 0px; }
	#facebox input { border:1px solid #797979; width: 225px; }
	#facebox input.right, #facebox button.right { margin-right:12px; }
	#facebox textarea { border: 1px solid #797979; height: 79px; width: 465px; }
	#facebox button {padding: 0px 15px; background-color: #c60c30; color: #FFF; height: 24px; float:right;}
	#facebox button:hover {background-color: #660000;}
 	
	.facebox_hide { z-index:-100; }
	.facebox_overlayBG { background-color: #000; z-index: 99; }
	
	* html #facebox_overlay { /* ie6 hack */
	  position: absolute;
	  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
	}