/* Rob Lafratta | www.lafrattacreative.co.uk */

/* PAGE SETUP */
* {	margin: 0;	padding: 0}
body {background-color: #1b1b1b;font-family:"Lucida Grande", "Lucida Sans Unicode", sans-serif;padding: 0;text-align: center;color:#000000;}
ul {list-style: none inside;}
a {outline: none;color:#111;}
a:hover {color:#009999;}
a img {border: none;}

/* HEADINGS/STYLES */
h1, h2 {font:bold italic 24px Georgia, serif;color:#009999;padding:2px 0 4px 0;margin-bottom:12px;letter-spacing:-1px;}
.green {color:#009999;}
.lgrey {color:#999;}

/* TOOLS */
.floatleft {float: left;}
.floatright {float: right;}
.clear {clear: both;padding:0;margin:0;}
.clear-right {clear: right;}
.clear-left {clear: left;}

/* STRUCTURE */
#bg-container {background: #e3e3e3 url(../images/bg.jpg) top left repeat-x}
#container {width: 980px;margin: 0 auto;text-align: left;background: url(../images/bg-bot.png) bottom center no-repeat;}

/* Header */
#header {height: 75px;padding: 13px 0 0 0;}
#logo h1 a {display: block;	width: 192px;height: 74px;float: left;background: url(../images/logo.png);text-indent: -9999px;margin:7px 0 0 0;}
#right-header {text-align:right;float:right;}
#right-header h2 {color:#fff;margin:0 0 0 0;padding:0;}
#right-header h3 {color:#999;font-weight:normal;font-size:13px;padding:3px 0 0 0;}

/* Navigation */
#navigation {height:47px;}
#navigation ul#nav {float: left; list-style: none; margin: 26px 0 0 0;position:relative;}
#navigation ul#nav li {float:left;}
#navigation ul#nav li.off a, #navigation ul#nav li.on  {display:block; float:left;line-height:26px; color:#fff; text-decoration:none; font-size:13px; text-align:center; padding:0 15px 0 11px; }
#navigation ul#nav li.off a span, #navigation ul#nav li.on span {float:left; display:block; padding:0 16px 0 5px;}
#navigation ul#nav li a:hover, #navigation ul#nav li.on {color:#fff; background:url(../images/left-navbar.png) no-repeat;}
#navigation ul#nav li a:hover span, #navigation ul#nav li.on span {background:url(../images/right-navbar.png) right top;}
#navigation ul#nav li.on a {color:#fff;text-decoration:none;}

/* Image Navigation */
ul#pic-nav {float:right;margin-top:27px;}
ul#pic-nav li {	display: inline;}
ul#pic-nav li a {display: block;height: 25px;text-indent: -9999px;float: left;margin:0 0 0 9px}
ul#pic-nav li.faceb a, ul#pic-nav li.twitter a, ul#pic-nav li.rss a, ul#pic-nav li.lastfm a {width:25px;}
ul#pic-nav li.faceb a {background: url(../images/faceb-btn.png) no-repeat;}
ul#pic-nav li.twitter a {background: url(../images/twitter-btn.png) no-repeat;}
ul#pic-nav li.rss a {background: url(../images/rss-btn.png) no-repeat;}
ul#pic-nav li.lastfm a {background: url(../images/lastfm-btn.png) no-repeat;}

/* Content */
#content {padding: 30px 0;margin:15px 0 0 0;font-size:13px;line-height: 22px;min-height:300px;}
#content p, #content ul {margin-bottom: 15px;}
.subheading, .subheading a, .subheading a:hover {color:#009999;text-decoration:none;}
#right-col {width: 300px;float: right;padding:0 0 0 0;}
#right-col a, #left-col a {color:#000;border-bottom:1px dotted #666;text-decoration:none;}
#right-col a:hover, #left-col a:hover {color:#009999;border-bottom:1px dotted #009999;text-decoration:none;}
#right-col a.btn, #right-col a.btn:hover, #left-col a.btn, #left-col a.btn:hover {border:none;text-decoration:none;}
#left-col {width: 620px;float: left;padding:0}
.col-left {float:left;width:48%;}
.col-right {float:right;width:48%;}
.right-sep {background:url(../images/right-separator.gif) no-repeat;width:300px;height:2px;padding:0 0 10px 0;}
#slide-image {width: 618px;height:500px;border:1px solid #ccc;}
#slide-image a, #slide-image a:hover {border:none;text-decoration:none;}


/* Portfolio Images */
.pro-container {float:left;position:relative;padding:0;margin:0 11px 20px 11px;width:221px;border:1px solid #ccc;background-color:#fff;}
.pro-thumb {width:209px;height:135px;margin:0;padding:6px;}	
.pro-text {padding:6px;margin:0;width:209px;}
.pro-text ul li {list-style:none;width:209px;}
.pro-link a {color:#666;border-bottom:1px dotted #666;text-decoration:none;font-style:italic;}
.pro-link a:hover {color:#009999;border-bottom:1px dotted #009999;text-decoration:none;}
.new { margin:0;position:absolute; bottom:0;right:0;width:43px;height:36px;}

/* List with ticks */
ul.content-list-2 {}
ul.content-list-2 li {background:url(../images/tick.png) no-repeat 2px 3px;padding:0 0 5px 35px;}

/* Footer */
#footer-bg {background:#1b1b1b url(../images/bg-footer.jpg) top left repeat-x;}
#footer-container { width:980px; margin:0 auto; text-align:center;}
#footer {color:#fff;font-size:13px;text-align:left;padding:25px 0 15px;line-height:22px;}
#footer a.btn, #footer a.btn:hover {border:none;text-decoration:none;}
#footer a:hover {color:#999;border-bottom:1px dotted #999;text-decoration:none;}
#footer a {color:#bbb;border-bottom:1px dotted #bbb;text-decoration:none;}
.footer-col {width:211px;float:left;padding:0 45px 20px 0;}
.footer-col.last {padding:0 0 20px 0;}
.footer-sep {background:url(../images/footer-sep.jpg) no-repeat;width:980px;height:2px;clear:both;padding:10px 0;}
#footer h2 a {color:#009999;text-decoration:none;border:none;}
#footer h2 a:hover {color:#009999;text-decoration:none;border:none;}

/* Copyright */
#copyright {font-size:12px;color:#999;text-align:left;margin:0 0 80px 0;}
#copyright span.left {float:left;width:70%;}
#copyright span.right {float:right;width:30%;text-align:right;}

/* Calendar Badges */
.datetime {font-family:"Lucida Grande", "Lucida Sans Unicode", sans-serif;width:40px;height:37px;background:url(../images/calendar.png) no-repeat;float:left;margin:4px 11px 0 0;padding:0;text-align:center;line-height:10px;}
.top {font-size: 11px;color:#ffffff;padding:1px 0 0 0;margin:0}
.date {font-size:20px;font-weight:bold;color:#333;padding:10px 0 0 0;margin:0;}


/* Contact Form */
.contact_form em {text-decoration: none;color: #000;font-style:normal;}
.contact_form em.error, .contact_form form em { color: #FF0000;font-style:  italic;font-weight:normal;}
.contact_form div.error { margin-bottom: 15px; }
.contact_form label, .contact_form input, .contact_form textarea, .contact_form select { width:600px; }
.contact_form label { position: absolute; text-align:left; font:13px "Lucida Grande", "Lucida Sans Unicode", sans-serif; color:#009999; margin:0 0 0 0; }
.contact_form input, .contact_form textarea, .contact_form select { margin-left: 0; margin:5px 0 15px 0; padding:10px; font-size:15px; }
.contact_form textarea { font-family:"Lucida Grande", "Lucida Sans Unicode", sans-serif; }
.contact_form input.submit { width:148px; height:36px; float:left; border:none; text-decoration:none; padding:0; }
.contact_form input.submit:focus { border:none; text-decoration:none; outline:none; }
.contact_form input, .contact_form textarea { border: 1px solid #ccc;outline:none; }
.contact_form input:focus, .contact_form textarea:focus { border: 1px solid #009999; }
.contact_form input.code {width:100px;}

#projectimg { z-index: 50; position: absolute; bottom: 10px; left: 10px }
#projectimg a { margin: 0 5px 0 0; padding: 3px 5px; border: 1px solid #ccc; background: #fff; text-decoration: none }
#projectimg a:hover { border: 1px solid #ccc; background: #fff; text-decoration: none;color:#009999; }
#projectimg a.activeSlide { background: #009999;color:#fff }
#projectimg a:focus { outline: none; }
