/* Base Style Sheet for Bradfields School website */

body { font-family:Verdana, Arial, sans-serif; margin:0; padding:0; }
.clear { clear:both; }

a { text-decoration:none; }
a:link { border-bottom:1px dashed #3366ff; color:#3366ff; }
a:visited { border-bottom:1px dashed #6600cc; color:#6600cc; }
a:hover { border-bottom:1px solid #ff0033; color:#ff0033; }
a:active { border-bottom:1px dashed #ff0033; color:#ff0033; }

#head { position:relative; background-color:#ffffff; border-bottom:1px solid #3366ff; margin:0; padding:10px; }

#name { margin:70px 0 0 110px; }
#name h1 { font-size:24px; color:#3366ff; margin:2px 0; }
#name h1 * {width:1px;}
#name p { font-size:16px; letter-spacing:0.35em; color:#3366ff; margin:0; }

#topnav { margin:0; padding:0 0 0 150px; position:absolute; top:4px; right:10px; font-size:80%; color:#000066; text-align:right; }
.hide { position:absolute; left:-2500px; top:-500px; width:1px; }
#logo { width:100px; margin:0; padding:0; position:absolute; top:10px; left:10px; }
#awards { width:250px; text-align:right; margin:0; padding:0; position:absolute; top:48px; right:10px; }

#main { position:relative; background-color:#e1faff; background-image:url(images/leaves.gif); background-repeat:repeat-x; 
        margin:0; padding:10px; min-height:25em; }
/* min-height needs to be 2.5 times the largest number of left-hand nav links, eg. (2.5 x 10links) = 25[em] */

#leftnav { position:absolute; top:10px; left:10px; width:100px; margin:0; padding:0; font-size:80%; line-height:110%; color:#000066; }
#leftnav a { display:block; width:100px; padding:10px 0; text-decoration:none; border-bottom:none; }
#leftnav a:link { border-top:1px dashed #3366ff; color:#3366ff; font-weight:normal; }
#leftnav a:visited { border-top:1px dashed #3366ff; color:#6600cc; font-weight:normal; }
#leftnav a:hover { border-top:1px dashed #3366ff; color:#ff0033; font-weight:bold; }
#leftnav a:active { border-top:1px dashed #3366ff; color:#ff0033; font-weight:normal; }
#leftnav a.firstnav { padding:0 0 10px 0; border-top:none; }

#content { margin:0 0 0 110px; padding:0; }
#content h1 { font-size:110%; color:#000066; margin:0 0 10px 0; padding:0; }
#content h2 { font-size:90%; color:#3333ff; margin:25px 0 10px 0; padding:0; }
#content h3 { font-size:small; color:#000066; margin:10px 0 3px 0; padding:0; }
#content p, #content li { font-size:small; color:#000066; line-height:130%; margin:5px 0 10px 0; padding:0; }
#content dl { margin-bottom:0; }
#content dt { font-size:small; color:#000066; font-weight:bold; }
#content dd { font-size:small; color:#000066; position:relative; top:-1.2em; left:100px; }

table { margin:20px 0; }
td, th { vertical-align:top; font-size:small; background-color:#f3ffff; }
#content img { padding:4px; border:1px dashed #3366ff; }

.floatleft { float:left; margin:5px 20px 10px 0; }
.floatright { float:right; margin:5px 0 10px 20px; text-align:right; }
.floatleft img, .floatright img { padding:4px; margin:0; border:1px dashed #3366ff; }
.floatleft p, .floatright p { text-align:center; }

#content .large { font-size:large; }
#content .medium { font-size:medium; }
#content .xsmall { font-size:x-small; }
#content .notice { color: #990000; font-weight: bold; }

#foot { background-color:#ffffff; border-top:1px solid #3366ff; margin:0; padding:10px;
        font-size:70%; color:#000066; text-align:center; }