/*
==================================
jameswragg.com - 6th Nov 2006
Main stylesheet
James Wragg
==================================*/
* {
border:medium none;
margin:0pt;
padding:0pt;
}
pre, code {
font-family:courier;
line-height:1.5em;
padding-bottom:0.25em;
padding-top:0.25em;
}
.article {
margin-bottom:60px;
}
pre {
margin:0pt 25px 20px;
}
#enc-wrapper {
margin:0pt auto;
max-width:800px;
padding:0pt 5%;
}
html, body {
height:100%;
margin:0pt;
}
body {
background:transparent url(../../images/top-fade.jpg) repeat-x scroll left top;
color:#525252;
font-family:"Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.6em;
min-width:596px;
}
ul, ol, li, h1, h2, h3, h4, h5, p {
margin:0pt 0pt 0.8em;
}
p.update {
font-weight:bold;
padding:0.3em;
}
ol.comments li {
background-color:#F1FBFD;
border:1px solid #AEC5E5;
padding:3px 5px;
}
ol.comments li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt 0pt 1.5em;
}
#txpCommentInputForm input, #txpCommentInputForm textarea {
border:1px solid #AEC5E5;
padding:1px 2px;
}
acronym {
border-bottom:1px dotted;
}
#content h1, #content h2, #content h3, #content h4, #content h5 {
margin:25px 0pt 4px;
}
#content h1, h2, h3, h4, h5 {
font-family:georgia;
font-size:18px;
}
a {
color:#739DB3;
text-decoration:none;
}
a:hover {
color:#507A8F;
text-decoration:underline;
}
#wrapper {
background:transparent url(../images/bg-pic.jpg) repeat-y scroll right top;
margin:0pt 2%;
min-width:420px;
overflow:hidden;
padding-right:180px;
position:relative;
}
#banner {
background:transparent url(../images/top-butterflys.png) no-repeat scroll right top;
display:block;
height:200px;
padding-left:5px;
position:relative;
width:503px;
}
#banner h1.title {
background:transparent url(../images/hi-im-james.png) no-repeat scroll left top;
height:100px;
left:0pt;
position:relative;
top:40px;
width:100%;
}



/*
=====================================
nav rollovers mainly lifted from hicksdesign.co.uk

works by setting the li background-image as the highlighted link image
then use the a's to overlay with default link image. the on hover removes the background-image to reveal the highlighted link image
=====================================*/
#nav {
background-image:url(../images/nav.gif) no-repeat 100%;
left:5px;
position:relative;
}

#nav ol {
position:relative;
}

#nav ol li,#nav ol a {
background-image:url(../images/nav.gif);
background-repeat:no-repeat;
display:block;
float:left;
height:18px;
margin-right:10px;
overflow:hidden;
text-indent:-10000px;
width:51px;
}

#nav ol #nav-labs,#nav ol #nav-labs a {
width:60px;
}

#nav ol a {
position:absolute;
}

/* solves moving nav in Safari */
#nav-home a {
background-position:0 0;
}

#nav-labs a {
background-position:-70px 0;
}

#nav-about a {
background-position:-143px 0;
}

#nav-home {
background-position:0 -26px;
}

#nav-labs {
background-position:-70px -26px;
}

#nav-about {
background-position:-143px -26px;
}

#nav ol li a:hover {
background-image:none;
}



#content {
background:transparent url(../images/content-foot.jpg) no-repeat scroll right bottom;
margin:15px 15px 10px 8px;
}
#content h3.header {
font-size:12px;
margin:0pt 0pt 20px;
text-align:right;
}
#content h3.header span {
float:left;
font-size:24px;
}
#content .article-pic {
float:left;
margin:10px 10px 0pt 0pt;
}
.comments-wrapper table {
width:80%;
}
.comments-wrapper table #message {
height:200px;
width:100%;
}
#more-info {
background:transparent url(../images/intro-box-curly.png) no-repeat scroll left top;
height:220px;
position:absolute;
right:83px;
top:0pt;
width:177px;
}
#more-info * {
position: absolute; text-indent: -1000em
}
#more-info p {
background:transparent url(../images/intro-text.gif) no-repeat scroll 50% 0pt;
height:111px;
margin:0pt 8px 0pt 0pt;
position:relative;
text-indent:-10000px;
top:40px;
}
#extra {
background:transparent url(../images/bg-bottom-bar.jpg) no-repeat scroll right top;
margin:0pt 2%;
min-width:600px;
padding:20px 0pt 0pt;
position:relative;
text-align:center;
}
#links, #flickr {
float:left;
margin:0pt 5% 15px;
padding:10px 0pt;
width:90%;
}
#flickr img, #content img {
border:1px solid #DFDFDF;
opacity:0.85;
padding:1px;
}
#flickr img {
height:75px;
width:75px;
}
#flickr img:hover, #content img:hover {
border:1px solid #506D7C;
opacity:1;
}
#flickr > #img-wrapper a {
float:left;
height:79px;
margin:5px;
width:79px;
}
.flickr_badge_image a, .flickr_badge_image {
padding:0pt;
}
#flickr > #img-wrapper {
margin:0pt auto;
width:534px;
}
#footer {
background:#EEEEEE url(../images/header-underline.gif) repeat-x scroll left 24px;
float:left;
font-size:80%;
height:70px;
left:0pt;
position:relative;
text-align:left;
width:100%;
margin-top:8em;
}
#footer p {
background-color:#FFFFFF;
border-bottom:1px solid #000000;
padding:0pt 5px;
}
table {
margin:10px 0pt;
}
table td {
padding:3px;
}
#txpcommentinputform {
background-color:#FEFFBF;
border:1px solid #FEFF7F;
font-style:italic;
margin:20px 0pt;
padding:3px 4px;
}
.hide {
height:0pt;
left:-10000px;
position:absolute;
text-indent:-10000px;
}