/**********************************
Description...:Master Screen CSS
Author........:lewis@fointypinger.co.uk
Last Changed..:12-09-2009
Notes #1......:Do NOT modify
/**********************************
Layout**/
* {padding:0;margin:0;border:0;}
body {
font-family:arial, helvetica, sans-serif;
font-size:100%;
text-align:center;
background:url(../img/bg.jpg) 0 150px;
line-height:100%;
}
.head-container, .container {
position:relative;
width:990px;
margin:0 auto;
text-align:left;
}
.head-container {width:100%;background:url(../img/header_bg.jpg);}
h1, h2, h3, h4, h5, h6 {font-family:georgia, "times new roman", times, serif;font-weight:normal;}
/******************
Logo Area**/
#header {
position:relative;
width:990px;height:150px;
margin:0 auto;
}
#header h1 {
position:absolute;
top:0;left:6px;
z-index:99;
width:370px;height:170px;
background:url(../img/logo.png);
}
#header h1 a {
display:block;
width:325px;height:60px;
margin:35px 0 0 10px;
}
#header h1 span, #header p {display:none;}
/******************
Twitter**/
#twitter {
position:absolute;
top:10px;right:0;
width:130px;height:135px;
}
#twitter a {
display:block;
width:130px;height:135px;
background:url(../img/icon-twitter.png);
}
#twitter a:hover {
background-position:bottom;
}
.tweet 
{
width:400px;
height:auto;
font-family: Georgia, serif;
font-size: 1em;
color: #848484; 
float:left;
overflow:auto;
}
.tweet .tweet_list 
{
-webkit-border-radius: .5em;
list-style-type: none;
margin: 0;
padding: 0;
background-color: none; 
}
.tweet .tweet_list li 
{
overflow: auto;
padding: .5em; 
}

.tweet .tweet_list .tweet_even 
{
background-color: #91E5E7; 
}
.tweet .tweet_list .tweet_avatar 
{
padding-right: .5em;
float: left; 
}
.tweet .tweet_list .tweet_avatar img 
{
vertical-align: middle; 
}

/******************
Flickr**/
#flickr {
position:absolute;
top:0px;right:139px;
width:239px;height:139px;
}
#flickr a {
display:block;
width:239px;height:139px;
background:url(../img/icon-flickr.png);
}
#flickr a:hover {background-position:bottom;}
/******************
Clip**/
#clip {
position:absolute;
top:100px;left:-110px;
width:145px;height:158px;
background:url(../img/icon-clip.png);
}
/******************
Navigation**/
#nav {
float:right;
width:100%;height:42px;
background:url(../img/nav_bg.png) 550px 0 no-repeat;
}
#nav ul {float:right;margin:0 10px;}
#nav li {
float:left;
list-style:none;
}
#nav li a {
float:left;
width:87px;height:25px;
margin:9px 0 0 4px;
}
#nav li.nav01 a {width:68px;background:url(../img/navitem-01.png);}
#nav li.nav02 a {width:79px;background:url(../img/navitem-02.png);}
#nav li.nav03 a {width:116px;background:url(../img/navitem-03.png);}
#nav li.nav04 a {margin-left:45px;width:172px;background:url(../img/navitem-04.png);}
#nav li.nav05 a {width:135px;background:url(../img/navitem-05.png);}
#nav li.nav06 a {width:74px;background:url(../img/navitem-06.png);}
#nav li a.selected, #nav li a:hover {background-position:bottom;}
#nav span {display:none;}
/******************
Main Content**/
#main-content_holder {
float:left;
width:990px;
margin:-7px 0 0;padding:15px 0 0;
background:url(../img/main-content_holder_bg.png) no-repeat;
}
.main-content {
float:left;
width:940px;
padding:12px 25px 0;
color:#848484;
background:url(../img/main-content_bg.png);
}
.main-content h2 {
font-size:1.9em;
margin:0 0 15px;padding-bottom:12px;
border-bottom:1px solid #e3e3e3;
line-height:1.2em;
}
.main-content h3 {
font-size:1.3em;
margin:0 0 15px;padding-bottom:12px;
border-bottom:1px solid #e3e3e3;
}
.main-content p {
font-size:0.8em;
margin:0 0 15px;
line-height:1.6em;
}
.main-content blockquote p, .main-content p.featured {
font-family: georgia, "times new roman", times, serif;
line-height:150%;
font-style:italic;}
.main-content p.featured {color:#bfbebe;}
.main-content ul {margin-bottom:15px;}
.main-content ul li {
list-style:disc;
font-size:0.8em;
line-height:1.5em;
margin:0 0 0 20px;
}
.main-content ol {margin-bottom:15px;}
.main-content ol li {
list-style:decimal;
font-size:0.8em;
line-height:1.5em;
margin:0 0 0 30px;
}
.main-content img {
float:right;
margin:0 0 15px 15px;
}
.main-content img:hover {}
.main-content a:link, .main-content a:active, .main-content a:visited {
color:#dd4d40;
}
.main-content a:hover {text-decoration:none;
}
.backtotop {
padding-left:50px;
}
#backtotop a {
font-size:11px;
float:right;
}
/******************
Columns**/
#mid-col {
float:left;
width:620px;
}
#side-col {
float:right;
width:300px;
}
/******************
Post-it**/
.post-it {
float:left;
width:280px;height:224px;
padding:110px 0 0 20px;
background:url(../img/post-it_bg.png) no-repeat;
}
.post-it ul li {
list-style:none;
font:1.2em/1em georgia, "times new roman", times, serif;
margin:0 0 10px 0;padding:0 20px;
background:url(../img/icon-bul01.png) 0 6px no-repeat;
}
/******************
Flash Content**/
#flashcontent {
float:left;
width:604px;height:370px;
margin:0 20px 0 0;padding:7px;
border:1px solid #e1e1e1;
background-color:#FFFFFF;
}
/******************
Flash Zoom**/
div#zoom_content img {
width:auto !important
}
/******************
Flickr Preview**/
#flickrPreview
{
border:none;
float:left;
}
#images 
{ 
height: 185px; 
width: 240px; 
padding:0; 
margin:0; 
overflow: hidden;
}
#images img 
{ 
border:none;
}
.flickrNav
{
display:block;
width: 240px;
padding:0; 
margin:0;
text-align:center;
}
.flickrNav a
{font-size:12px;
margin-left:5px;
margin-right:5px;
}

#flashcontent img {}
/******************
Labelled Images**/
.project-prev {
float:left;
position:relative;
width:300px;
margin:0 20px 0 0;
}
.project-prev span {
display:block;
position:absolute;
}
.project-prev span.tape01 {
top:-40px;left:110px;
width:38px;height:37px;
background:url(../img/icon-tape01.png) no-repeat;
}
.project-prev span.tape02 {
top:-13px;left:30px;
width:169px;height:42px;
background:url(../img/icon-tape03.png) no-repeat;
}
.project-prev span.tape03 {
top:-13px;right:-10px;
width:200px;height:49px;
background:url(../img/icon-tape03.png) no-repeat;
}
.project-prev img {
width:284px;height:114px;
margin:0 0 12px 0;padding:7px;
border:1px solid #e1e1e1;
background-color:#FFFFFF;
}
.project-prev h3 {
font-size:1.25em;
color:#dd4c3f;
margin:0 0 12px;
padding:0;border:0;/*remove inherited styles*/
}
/******************
Project View (Lv2)**/
.project-view {
float:left;
margin:20px 0 10px 0;
}
.project-view img {
float:left;
width:604px;height:180px;
margin:0;padding:7px;
border:1px solid #e1e1e1;
background-color:#FFFFFF;
}
.project-view .info {
float:left;
width:300px;
margin-left:20px;
}
.project-view h3 {
padding:0;margin:15px 0 12px 0;
border:0;
line-height:1.2em;
}
.project-view p {
line-height:1.35em;
}
/******************
Buttons**/
.btn-big a {
float:left;clear:left;
width:235px;height:35px;
font:1.3em georgia, "times new roman", times, serif;
padding:10px 15px 0 15px; margin:5px 0px 0px 0;
background:url(../img/btn-big.png) no-repeat;
}
.btn-big a:link, .btn-big a:visited {color:#fff;text-decoration:none;}
.btn-big a:hover {color:#fff;background-position:bottom;}

.btn-small a {
float:left;clear:left;
width:119px;height:20px;
font:italic 0.8em georgia, "times new roman", times, serif;
padding:3px 8px 0 8px;margin:0px 0px 0px 0;
background:url(../img/btn-small.png) no-repeat;
}
.btn-small a:link, .btn-small a:visited {color:#fff;text-decoration:none;}
.btn-small a:hover {color:#fff;background-position:bottom;}
/******************
Contact Form**/
#form_area {
float:left;
width:580px;
margin:3px 0;padding:20px;
font:italic 1em georgia, "times new roman", times, serif;
border:1px solid #e1e1e1;
}
#form_area label {
float:left;
clear:left;
width:70px;height:18px;
font-size:0.8em;
font-style:italic;
padding:10px 0 0;
}
#form_area input {
float:left;
width:280px;height:25px;
font:0.8em georgia, "times new roman", times, serif;
color:#666;
padding:10px 10px 0;margin:0 0 15px 0;
background:url(../img/contact-input.png);
}
#form_area input:focus {}
#form_area input.submit {
cursor:pointer;
width:145px;height:45px;
text-align:left;
font-size:1.4em;
color:#fff;
margin:0px 0 0 68px;padding:0 10px;
background:url(../img/contact-btn-submit.png);
}
#form_area input.submit:hover {background-position:bottom;}
#form_area textarea {
font:0.8em georgia, "times new roman", times, serif;color:#666;
width:430px;height:165px;
padding:10px;
background:url(../img/contact-textarea.png);
}
#form_area textarea:focus {}
/******************
Back to top**/
#backtotop
{clear:both;
display:block;
}
/******************
Footer**/
#footer_holder {
float:left;
width:990px;
margin:0 0 20px;padding:0 0 12px;
background:url(../img/footer_holder_bg.png) bottom no-repeat;
}
#footer {
float:left;
width:990px;
margin:0 0 0;padding:35px 0 15px;
background:url(../img/main-content_bg.png);
}
#footer p {
position:relative;
color:#848484;
font-size:0.7em;
margin:0 18px;padding:7px 20px 7px;
background:url(../img/footer-credit.png) no-repeat;
}
#footer p span {
position:absolute;
right:20px;top:7px;
padding-right:16px;background:url(../img/icon-xhtml.png) no-repeat right 1px;
}
#footer a:link, #footer a:active, #footer a:visited {}
#footer a:hover {}
/******************
Global Styles**/
.line {
border-bottom:1px solid #f00;
margin:10px 0%;
height:1px;
clear:both;
}
.clearing {clear:both;}
acronym, abbr {cursor:help;border-bottom:1px dotted #000;}
fieldset {border:0;}
strong {font-weight:bold;}
em {font-style:italic;}
address {font-style:normal;font-size:0.8em;margin-bottom:10px;}
blockquote {font-size:1.2em;font-weight:normal;}
.error {color:#f00;font-weight:bold;}
.none {margin:0;padding:0;border:0;}
input {outline:none;}
/******************
Links**/
a:link, a:visited {color:#dd4d40;text-decoration:underline;}
a:hover {color:#dd4d40;text-decoration:none;}
a:active {color:#000;outline:none;}
a:focus {outline:none;}
a.rss {padding-left:16px;background:url(../img/icon-rss01.png) no-repeat 0 50%;}
a.fointy {padding-right:14px;background:url(../img/icon-fp.gif) no-repeat right 50%;}
/******************
Clearfix**/
.clearfix:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}
/******************
Self clearing floats**/
#divname:after, #name:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}