/* Built for Andrew Rae by Simon Collison www.erskinedesign.com 2005 */

body {
margin: 20px auto;
padding: 0;
color: #333;
text-align: center;
font: 11px normal 'Lucida Grande',Verdana,sans-serif;
background-color:#CCC;
background-image: url(http://www.andrewrae.org.uk/images/background.jpg);
}

.viewer {
text-align:center;
}

img {border:0}

.thumb {
float:right;
margin:0 0 5px 5px;
}

a:link {
	text-decoration: underline;
	color: #333;
	background: transparent;
outline:0;
}
a:visited {
	text-decoration: underline;
	color: #333;
	background: transparent;
outline:0;
}
a:hover {
	text-decoration: none;
	color: #FFF;
	background: #333;
outline:0;
}

/* the wrapper holds the whole thing centrally in the browser window */

#wrapper {
margin: 0px auto;
padding:0 0 0 0;
width:800px;
background:url(http://www.andrewrae.org.uk/images/topcurves.gif) no-repeat;
}

/* the masthead. Change the image reference to the one you want to use */

#header {
margin:0px 0 0 0px;
padding-top:20px;
}

#header ul {list-style-type:none;margin:20px 0 20px 0;padding:0;text-align:center;}
#header ul li {
display:inline;
height:31px;
margin-right:30px;
font-size:13px;
}
#header ul#secondary li {font-size:11px;margin-right:10px;}

#header ul#primary li a:link {
height:31px;
padding:10px 0 5px 40px;
font-weight:bold;
text-decoration:none;
background:url(http://www.andrewrae.org.uk/images/button.gif) left 0 no-repeat;
}
#header ul#primary li a:visited {
height:31px;
padding:10px 0 5px 40px;
text-decoration:none;
font-weight:bold;
background:url(http://www.andrewrae.org.uk/images/button.gif) left 0 no-repeat;
}
#header ul#primary li a:hover {
height:31px;
padding:10px 0 5px 40px;
font-weight:bold;
text-decoration:none;
color:#333;
background:url(http://www.andrewrae.org.uk/images/button.gif) left -31px no-repeat;
}
#header ul#primary li a:active {
height:31px;
padding:10px 0 5px 40px;
text-decoration:none;
font-weight:bold;
background:url(http://www.andrewrae.org.uk/images/button.gif) left 0 no-repeat;
}

#header ul#secondary li a:link {
height:31px;
padding:10px 0 5px 37px;
font-weight:bold;
text-decoration:none;
background:url(http://www.andrewrae.org.uk/images/buttonsml.gif) left 0 no-repeat;
}
#header ul#secondary li a:visited {
height:31px;
padding:10px 0 5px 37px;
text-decoration:none;
font-weight:bold;
background:url(http://www.andrewrae.org.uk/images/buttonsml.gif) left 0 no-repeat;
}
#header ul#secondary li a:hover {
height:31px;
padding:10px 0 5px 37px;
font-weight:bold;
text-decoration:none;
color:#333;
background:url(http://www.andrewrae.org.uk/images/buttonsml.gif) left -28px no-repeat;
}
#header ul#secondary li a:active {
height:31px;
padding:10px 0 5px 37px;
text-decoration:none;
font-weight:bold;
background:url(http://www.andrewrae.org.uk/images/buttonsml.gif) left 0 no-repeat;
}

/* the content style holds the two main columns together */

#content {
margin:0;
padding:20px 40px 20px 40px;
background:#FFF;
}

/* blog is the right hand column where your entries and main content appear */

#blog {
float:right;
margin:0px 0px 0 0px;
padding-right:0;
padding-left:10px;
width: 560px;
text-align:left;
line-height:165%;
border-left:1px dashed #CCC;
}

#blog ul {margin:0 0 15px 0;}

/* sidebar is the left column where all the links and secondary info show up */

#sidebar {
float: left;
margin:0px 0 0 0px;
width:110px;
text-align: left;
}

#sidebar img {
float:left;
margin:0 5px 5px 0;
padding:0;
}

#sidebar p {
margin-top:5px;
font-size:11px;
}

/* the footer, containing credits, rss links etc */

#footer {
margin: 0;
height:47px;
background:url(http://www.andrewrae.org.uk/images/footer.gif) no-repeat;
}
#footer p {
padding:10px 0 0 90px;
margin:0;
}

.posted {
margin-top:-10px;
font-size:10px;
color:#666;
}

/* Header definitions. h1 is hidden, and only shows when styles are off. Note, there are specific definitions for the sidebar h3 header, blog h3 header, and the blog h2 link. The blog h2 link is a clickable rollover of the entry title */

h1 {
display: none;
}
h3 {
font-size:14px;
}
#sidebar h3 {
margin:0;
font-size:12px;
}
h2 {
margin-top:0;
font-size:16px;
}
h2 a:link, h2 a:visited {
text-decoration: none;
font-size:16px;
}
h2 a:hover {
color: #CCC;
}

.center {
text-align: center;
}

/* Dont ask. Just don't delete this spacer class */

.spacer {
	clear: both;
}

object {
margin:0;
}

/* The standard list styles. There are specific sidebar list styles later on */

ul {
	list-style-type: none;
	margin-top: 3px;
	margin-bottom: 2px;
	margin-left: 0;
	padding-left: 0;
}
li {
	border-bottom: 0 solid #CCC;
	padding-bottom: 2px;
}

/* Some form styling. Not much though */
form {
margin-top:3px;
margin-bottom:0;
}
checkbox {
border: 3px double #999999;
padding:1px;
color: #333333;
font-size: 10px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
textarea {
border: 3px double #999999;
padding:1px;
color: #333333;
font-size: 10px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
input {
border: 3px double #999999;
padding:1px;
color: #333333;
font-size: 10px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
input.submit {border: 0;margin-bottom: -5px !important;margin-bottom: -2px;background: transparent;color: #333;font-size: 10px;}

fieldset {
margin:0 0 10px 0;
padding:0;
border:0;
}

/* As mentioned above, these are the sidebar-specific list styles, based on my ticked-off links technique. Note the sidebar-specific links also. They have set widths so you can rollover anywhere along the link line */

#sidebar ul {
	list-style-type: none;
	margin-right: 10px;
margin-bottom:14px;
	padding: 3px 0 0 0;
	border: 0 solid #CCC;
}
#sidebar li {
	border-bottom: 1px solid #CCC;
}
#sidebar li a:link {
display:block;
width:90px;
	color: #333366;
	text-decoration: none;
padding:2px;
}
#sidebar li a:visited {
display:block;
width:90px;
	color: #000;
	text-decoration: none;
padding:2px;
}
#sidebar li a:hover {
display:block;
width:90px;
	color: #FFF;
	text-decoration: none;
padding:2px;
background:#333;
}
#sidebar li a:active {
display:block;
width:90px;
	color: #333366;
	text-decoration: none;
padding:2px;
}