@charset "utf-8";
/* CSS Master Stylesheet for Sunumbrella's Sircle (webv4) */

/* ------------------------------------------------------
Version: 4.0
Author: Sunumbrella
Email: sunumbrella@dfsunumbrella.net
Website: http://www.dfsunumbrella.net

Comments:
20/4/08 Version 2.0
Previously there were 6 stylesheets with a lot of overlap. This new version is intended to simplify 
the css and increase consistency across the whole site.

12/7/08 Version 3.0
Some of the styles are changing a lot between version 2 and version 3 of the website, so the css is being
renamed to match the website version.

15/1/09 Version 4.0
Two stylesheets: style and colour. The master style sheet was getting cluttered with duplicate code depending on 
which sircle content belonged to. This separates all that from the master style sheet.


FIXED WIDTH 3 COLUMN DESIGN WITH HEADER AND FOOTER
-total width: 950px
-navpanel width: 160px
-main width: 490px
-sidepanel width: 220px

TYPOGRAPHY
major headings - serif
minor headings - sans serif (wide)
body text - sans serif

UNITS
positioning - px
text - em
proportions - %

-------------------------------------------------------- */

/* ----- GLOBAL ATTRIBUTES ----- */
body {color: #000; font-family: arial, tahoma, "sans serif"; font-size: 90%; margin: 0; padding: 0; text-align: center;} 
	/* black text, text-align:center = centering IE hack */

h1, h2{font-family: "Book Antiqua", "Palatino Linotype", palatino, georgia, "Times New Roman", serif; font-style: italic; line-height: 70px; margin: 0; text-align: center;}
h3 {font-family: verdana, arial, sans-serif; margin: 5px; padding: 5px 0; text-align: center;}
h4 {color: #000; font-weight: bold;}
h5 {font-weight: bold; margin: 0; padding: 5px 0 0;}

dl , ul {text-align: left;} 
dt {font-weight: bold; }
dd {padding-left: 15px; margin-left: 0;}

table {background: #fff url(../images/background/graygradient.png) repeat-x top; border: thin solid #ccc; margin: 1em 0; width: 99%;}
thead {border-bottom: thin solid #000; font-variant: small-caps; font-weight: bold;}
th {text-align: center;}
tr {line-height: 1.5em; vertical-align: top;}
td {vertical-align: middle;}

blockquote {font-style: italic; text-align: justify;}
del {text-decoration: line-through;}
ins {font-style: italic; text-decoration: none;}

/* ----- STRUCTURAL DIVISIONS ----- */
#container {background-color: #000; border: 1px solid #666; margin: 0 auto; padding: 0; text-align: left; width: 960px;}
	/* black background, silver thin border, centered in window, FIXED WIDTH */

#header {color: #cc0; margin: 0; padding: 10px; text-align: center;}

#content {float: left; margin: 10px 0 10px 10px; padding: 5px; width: 700px;} 
	/* contains navigation and main content columns, left-hand side, FIXED WIDTH */

#navigation {float: left; margin: 0; padding: 5px; width: 170px;}
	/* left-hand side narrow column, FIXED WIDTH */

#main {margin-left: 190px;} /* moves main content column to right-hand side of navigation column (center of window) */

#sidepanel {float: right; margin: 10px; padding: 0 5px 10px 5px; text-align: center; width: 200px;}
#sidepanel dl, #sidepanel ul {margin-left: 5px; padding: 0;}
	/* right-hand side narrow column, FIXED WIDTH */
#adverts {margin-bottom: 10px;}

#footer {clear: both; color: #fff; padding: 0; width: 960px;} /* full width, add margins/padding to child elements */

#profile {width: 45%; border-right: 2px solid #cc0;}

/* ----- COMPONENTS ----- */
#header h1, #header h2 {color: #cc0; margin: 0; padding: 0;}
#header ul {list-style-type: none; margin: 0 0 5px;	padding: 0;} /* horizontal menu */
#header ul li {float: left; text-align: center; width: 20%;} /* 100% / 5 = 20% each li */

#content ul {list-style-type: circle;}

.navmenu ul {margin: 0; padding: 0;}
.navmenu ul li {line-height: 30px; list-style-type: none; }
.navmenu ul li a {color: #000; display: block; font-weight: bold; padding-left: 0; text-decoration: none; font-variant:small-caps;}
.navmenu ul li a:hover {text-decoration: underline;} 

#adverts ul {list-style-type: none; margin: 0; padding: 0;}

/* footer */
/*.char {margin: 0 2px; width: 16%;} /* 3 characters squeezed into 50% (Footer/About div)*/
#footer h4 {color: #fff;}
#footer div {padding: 0 5px;}
#footer a:link {color: #fff;} /* white links on black background */

#contact, #visitors, #about {float:left; margin-left: 5px; width: 300px;}
#about {text-align: justify;}

#contact p {clear: left;}
#contact label {float: left; margin-bottom: 5px; width: 80px;}
#contact .text {float: left; margin-bottom: 5px; width: 210px;}
#contact #message {width: 290px;}
/* /footer */

#main ul.gallery {display: block; float: right; font-size: 85%; list-style-type: none; margin: 0; padding: 0; width: 100%;}
#main ul.gallery li {float: left; margin: 0; text-align: center;}
.clear-gallery {clear: right;}

ul.series {border: 1px solid #ccc; float: right; list-style-type: none; margin: 0 0 10px; padding: 5px;}
ul.series li {display: inline; line-height: 1.5; padding-left: 5px;} 
ul.series li a {font-weight: bold; text-decoration: none;}
ul.series li a:hover {background-color: #ccc;}

.thumbnail {height: 100px; width: 100px; padding: 5px;} /* small square image */
.thumbnail-frame {border: 1px solid #000; height: 100px; width: 100px; padding: 2px; margin: 5px;}
.thumbnail-mini {height: 50px; width: 50px; padding: 5px;}
.thumbnail-big {height: 200px; width: 200px; padding: 5px;} /* large square image */
.thumbnail-xrect {height: 100px; padding: 5px; width: 150px;}
.thumbnail-yrect {height: 100px; padding: 5px; width: 75px;}
.bigpic {height: 230px; width: 340px;}


.banner-h{height: 100px; padding: 5px; width: 400px;}
.slogotext {height: 35px; vertical-align: middle; width: 110px;}
.slogotextbig {height: 50px; width: 160px;}

a>img {border: none;} /* no border for image links */

ul.alphabet {border: 1px solid #ccc; list-style-type: none; margin: 0; padding: 5px 4%; width: 90%;}
ul.alphabet li {display:inline; padding: 0 2px;}

.rowlist10 li {line-height: 1.2em; padding: 0; width: 150px;}
.rowlist10 li.col1 {margin-left: 0;}
.rowlist10 li.col2 {margin-left: 160px;}
.rowlist10 li.newcol {margin-top: -12em;} /* move next column up by height of first column = 10 x 1.2em = 12em */

.dialogue {display: block; font-style: italic; margin: 10px;}

#current_page a:link {color: #666;}
/* ----- DISPLAY SETTINGS ----- */
.clear {clear: both;}
.clear-left {clear: left;}
.clear-right {clear: right;}
.left {float: left;}
.right {float: right;}

.center {text-align: center;}
.poscenter {margin: 0 auto;}

.small-text {font-size: 80%;}

.inline {display: inline;}

.padded {padding: 1em;}

.rounded {border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;} /* CSS 3 - does not work in IE/Opera at present */