/*

Steven McTainsh
Portfolio (v22)
Stylesheet

Copyright © 2009 Steven McTainsh.

*/

*
{
padding: 0;
margin: 0;
}

body
{
background: #87cdde url(images/back.png) repeat-x top left;
color: #000;
font: 10pt Georgia, serif;
}

a
{
color: #216778;
}

p
{
line-height: 14pt;
}

#container
{
width: 750px;
margin: 0 auto;
}

#heading
{
text-align: center;
margin-top: 20px;
}

#years
{
list-style: none;
padding: 0px 5px 180px 0px;
background: url(images/treeleft.png) no-repeat bottom right;
width: 175px;
overflow: hidden;
float: left;
}

#years li a
{
background: rgb(90, 171, 191);
color: rgb(169, 211, 222);
text-decoration: none;
width: 165px;
float: left;
clear: both;
text-align: right;
padding: 5px;
font: 18pt Arial, Helvetica, sans-serif;
letter-spacing: 1px;
margin-top: 5px;
}

#years li a:hover
{
color: #2c89a0;
}

#years li a#selected
{
background: #2c89a0;
color: #fff;
}

#portfolioentry
{
float: left;
margin: 5px 0px 0px 0px;
width: 535px;
}

.entry
{
width: 535px;
background: #fff;
overflow: hidden;
margin-bottom: 10px;
height: 350px;
position: relative;
}

.entry p
{
margin: 10px 0px;
}

.title
{
background: #2c89a0;
overflow: auto;
font: 14pt Arial, Helvetica, sans-serif;
padding-bottom: 1px;
}

.entrytext
{
padding: 10px;
font-size: 9pt;
}

.thumb
{
float: right;
margin: 5px;
width: 149px;
height: 108px;
}

h1
{
font-size: 14pt;
margin: 8px 0px 8px 8px;
color: #fff;
letter-spacing: -1px;
}

h2
{
color: #5fbcd3;
float: right;
font-size: 10pt;
font-weight: bold;
margin: 12px 12px 0px 0px;
}

.sidedisplay
{
float: left;
width: 30px;
margin-left: 5px;
}

a.arrow
{
padding: 5px 35px 5px 5px;
background: rgb(195, 230, 239) url(images/arrowbutton.png) no-repeat top right;
font: 11pt Arial, Helvetica, sans-serif;
font-style: italic;
color: #2c89a0;
text-decoration: none;
margin-bottom: 10px;
position: absolute;
bottom: 5px;
right: 10px;
}

a.arrow:hover
{
text-decoration: underline;
}

#abouttext, #contacttext
{
padding: 10px;
background: #fff;
margin: 0px 5px;
float: left;
width: 470px;
}

#contacttext
{
width: 680px;
}

#abouttext p, #contacttext p
{
margin-bottom: 10px;
}

#about, #contact
{
clear: both;
margin: 10px 0px;
float: left;
width: 750px;
}

.start
{
color: #216778;
font-size: 16pt;
}

.submit
{
padding: 5px 40px 5px 5px;
background: rgb(195, 230, 239) url(images/arrowbutton.png) no-repeat right;
border: 1px solid rgb(195, 230, 239);
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
font-style: italic;
color: #216778;
cursor: pointer;
/* The next two lines fix IE's 'long buttons' */
width: auto;
overflow: visible;
}

#contact .start
{
margin-top: 10px;
padding-top: 10px;
border-top: 2px solid #eee;
}

.portfolionav, .portfolionavjs
{
position: absolute;
bottom: 10px;
left: 10px;
}

.portfolionav
{
display: none;
}

a.previous, a.next
{
width: 37px;
height: 28px;
float: left;
margin: 5px 5px 5px 0px;
}

a.previous span, a.next span
{
display: none;
}

a.previous
{
background: url(images/arrowleft.png) no-repeat center;
}

a.next
{
background: url(images/arrowbutton.png) no-repeat center;
}

.count, .countjs
{
position: absolute;
bottom: 16px;
left: 100px;
}

.count
{
display: none;
}

.current
{
font-size: 16pt;
}

.total
{
color: #888;
font-size: 12pt;
}

abbr
{
cursor: help;
}

#twitter
{
float: left;
margin: 30px 5px 5px 0px;
}

#twitterbubble
{
background: #eee url(images/bubble.png) no-repeat top left;
float: left;
padding: 10px 10px 10px 36px;
height: 103px;
width: 355px;
overflow: hidden;
}

h2#tweet
{
font-size: 16pt;
font-weight: normal;
float: left;
width: 100%;
font-style: italic;
color: #216778;
margin: 0;
margin-bottom: 10px;
}

#twitterlink
{
float: right;
margin: 0px 10px;
}

.fullinput, .fulltextarea
{
padding: 5px;
width: 660px;
margin: -5px 0px 5px 0px;
border: 1px solid rgb(195, 230, 239);
font-family: Georgia, serif;
font-size: 10pt;
}

.fullinput:focus, .fulltextarea:focus
{
background: rgb(195, 230, 239);
border: 1px solid #216778;
}

.fulltextarea
{
height: 175px;
}

#contacttext form p
{
font-weight: bold;
letter-spacing: -0.5px;
}

#contacttext form p#detail
{
font-style: italic;
color: #666;
font-size: 9pt;
margin-top: -6px;
font-weight: normal;
letter-spacing: 0;
}

#footer
{
clear: both;
text-align: center;
font-size: 9pt;
font-style: italic;
padding-bottom: 10px;
margin-bottom: 10px;
float: left;
width: 100%;
color: #216778;
}

#footer a
{
color: #216778;
text-decoration: none;
border-bottom: 1px dotted #216778;
}

#footer a:hover
{
border-bottom: 1px solid #216778;
}

#yearLoading
{
position: absolute;
left: 50%;
top: 150px;
background: #87cdde url(images/loading.gif) no-repeat center;
width: 540px;
height: 360px;
z-index: 1000;
margin: 0px 0px 0px -196px;
display: none;
}

#portfolioBlock
{
clear: both;
}

#heading img
{
width: 672px;
height: 112px;
}

#notfound h1
{
font-size: 20pt;
color: #000;
font-weight: normal;
letter-spacing: -1px;
}

#notfound p
{
margin: 10px 0px;
}

#notfoundtitle
{
width: 30px;
height: 125px;
float: left;
margin-top: 5px;
}

#notfound
{
padding: 10px;
background: #fff;
width: 695px;
margin: 5px 5px 10px 0px;
float: left;
}

a#blog img, a#gohome img
{
width: 141px;
height: 72px;
margin: -62px 0px -8px 0px;
border: 0;
}

a#gohome img
{
width: 124px;
height: 69px;
}

#notify
{
background: url(images/notify.png) repeat;
padding: 5px;
color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
overflow: auto;
z-index: 10000;
}

#notify a
{
color: #eee;
}

a#close span
{
display: none;
}

a#close
{
float: right;
background: url(images/close.png) no-repeat top left;
width: 26px;
height: 24px;
}

a#close:hover
{
background-position: top right;
}

#notify img
{
float: left;
margin-right: 5px;
}

#notify span
{
padding-top: 5px;
float: left;
}

#abouttitle
{
width: 30px;
height: 134px;
}

#portfoliotitle
{
width: 30px;
height: 213px;
}

#contacttitle
{
width: 29px;
height: 178px;
}

/* ReCAPTCHA Styles */

.recaptcha
{
margin: 0px 0px 10px 0px;
float: left;
clear: both;
}