/* 
(C) SurfSki.co.za 2007	
Devloper: Richard Willis 	
Filename: mainstyles.css	
*/


body {background:#fff;color:#003F87;margin:18px 0 20px 0;text-align:center;font-family: Helvetica, Verdana, Tahoma, Serif;font-size:9pt}
td, div, form, p, font {font-family: Helvetica, Verdana, Tahoma, Serif;font-size:9pt}
img {margin:0;border:0;display:inline}
small {font-size:8pt}
a, a:visited {text-decoration:none;color:#08058F;font-weight:bold}
a:hover {text-decoration:underline}
select {font-family: Helvetica, Verdana, Tahoma, Serif;font-size:9pt;color:#333}
#wrapper {width:724px;margin:auto}
h3 {margin:2px 0 2px 0;font-size:12pt;padding:0;color:#023D81}
h2 {margin-bottom:3px;font-size:14pt}
h4 {font-size:9pt}
big {font-size:11pt}
form {margin:0}
blockquote {margin-bottom:0;margin-top:0}
p {margin:0;padding:2px 0 8px 0}
ul, ol {margin-bottom:0;padding-bottom:8px}
fieldset {-moz-border-radius:5px 5px 5px 5px;border:1px solid #0480E4;_padding:10px 8px}
legend {color:#0063B1;_margin-bottom:6px}
input, textarea {font-family: Helvetica, Verdana, Tahoma, Serif;font-size:9pt;border:1px solid #888;color:#333}
input {background:url(images/formback360w.gif);padding:1px}
textarea {background:url(images/textback.gif);padding:3px}
h1 a {color:#023D81}
h1 a:visited {color:#023D81}
h1 a:hover {text-decoration:none;color:#052056}
h3 a, h2 a, h4 a {color:#023D81}
h3 a:visited, h2 a:visited, h4 a:visited {color:#023D81}
h3 a:hover, h2 a:hover, h4 a:hover {text-decoration:none;color:#052056}

	
/* HEADER */
#headerlogo {height:71px}

/* BANNER */
#mainbanner {height:120px;}
#seriesleft {float:left;width:31px;height:29px}
#theseries {float:left;width:216px;height:36px}
#nationalevents {width:220px;height:36px;float:left}
#intnationalevents {width:230px;height:36px;float:left}
#seriesright {width:27px;height:27px;float:left}

/* NAVIGATION */
#navigation {height:27px;float:left;background:#027DDD url(images/navback2.jpg);text-align:center}
#navigation ul {margin:0;padding:0;height:27px;}
#navigation ul li {list-style:none;display:inline;height:27px;line-height:27px;padding:0;margin:0;color:lightsteelblue;font-size:8pt;font-family:Verdana}
#navigation ul li a {color:#fff;text-decoration:none;font-weight:bold;border:0;}
#navigation ul li a:hover {color:lightblue;text-decoration:none;}

/* DROP DOWN NAVIGATION */
#mainnav, #mainnav ul {padding:0;margin:0;list-style: none;line-height:1;text-align:left}
#mainnav a {display: block;height : 27px;color:#fff;text-decoration:none;text-align:center}
#mainnav a:hover {color:#08058F;}
#mainnav li {float: left;width: 84px;height:20px}
#mainnav li ul {position: absolute;width:80px;left: -999em;margin:0;padding:0;text-align:center;height:20px;z-index:99}
#mainnav li ul a {width:92px;height:20px;line-height:20px;display:block;background: #027DDD;}
#mainnav li ul a:hover {color:darkblue} 
#mainnav li ul li {width:92px;height:20px;filter:alpha(opacity=90);-moz-opacity:0.9;opacity: 0.9;khtml-opacity: 0.9;border:1px solid #0468B6;border-width:0 1px 1px 1px;}
#mainnav li ul ul li {width:94px}
#mainnav li ul ul li a {width:94px}
#mainnav li ul ul {margin: -20px 0 0 92px;	_margin: -20px 0 0 46px;}
#mainnav li:hover ul ul, #mainnav li.sfhover ul ul {left: -999em;}
#mainnav li:hover ul, #mainnav li li:hover ul, #mainnav li.sfhover ul, #mainnav li li.sfhover ul {left: auto;}
#mainnav li:hover {background-position: 0 0;}
#mainnav ul li:hover {background-position: 0 0;}
#mainnav ul ul li:hover {background-position: 0 0;}



/* CONTENT BOX */
#contbody {width:519px;text-align:left;float:left;margin-top:16px}
#contbody img {display:inline}
#contbodyfull {width:720px;text-align:left;margin-top:16px}
#contheader {width:508px;height:42px;background:url(images/barbk.jpg);text-align:left}
#contheaderfull {width:720px;height:42px;background:url(images/barbk.jpg);text-align:left}
#contheaderh1 {float:left;width:447px;text-align:left}
#contheadernew {width:409px;height:34px;background:url(images/barbk.jpg);text-align:left}

#contheaderh1 img {margin-top:18px}
#contheaderh1full img {margin-top:18px}


#contheaderh1full {float:left;width:659px;text-align:left}
#contheaderh1 h1 {line-height:48px;font-size:19pt;font-family:Tahoma;font-weight:normal;color:#fff;padding:0;margin:0;font-style:italic;_margin-top:18px}
#contheaderh1full h1 {line-height:48px;font-size:19pt;font-family:Tahoma;font-weight:normal;color:#fff;padding:0;margin:0;font-style:italic;_margin-top:18px}
#contback {width:508px;background:url(images/contbarbkl.jpg) left repeat-y;}
#contbacknew {width:409px;background:url(images/contbarbklnew.jpg) left repeat-y;}
#contbackfull {width:720px;background:url(images/contbarbkl.jpg) left repeat-y;}
#contbkr {background:url(images/contbarbkr.jpg) right repeat-y;}
#contbkrnew {background:url(images/contbarbkrnew.jpg) right repeat-y;}
#contpad {padding:10px 20px 0 20px;text-align:left}
.contpadimg img {margin:5px}
#contpadarticles {padding:10px 20px 0 20px;text-align:left}
#contpadarticles img {margin:5px 0}
#bartl {width:31px;height:42px;float:left}
#bartr {width:30px;height:42px;float:left}

/* RIGHT CONTENT BOX */
#rightcontbody {width:205px;float:left;margin-top:15px}
#rightconthead {height:43px;background:url(images/rightseghead.jpg)}
#rightconthead2 {height:43px;background:url(images/rightseghead2.jpg)}
#rightconthead2 img {margin-top:20px}
#rightconthead h2 {line-height:48px;font-size:19pt;font-family:Tahoma;font-weight:normal;color:#fff;padding:0;margin:0;_margin-top:18px}
#rightconthead2 h2 {line-height:48px;font-size:19pt;font-family:Tahoma;font-weight:normal;color:#fff;padding:0;margin:0;_margin-top:18px}
#rightcontbodybk {background:url(images/rightsegbk.jpg);}
#rightcontpad {text-align:left;padding:5px 12px 0 15px;}

/* FOOTER */
#footerleft {height:55px;width:147px;float:left}
#footermid {height:55px;width:551px;_width:548px;background:url(images/contbotback.jpg);float:left}
#footermid2 {height:55px;width:551px;background:url(images/contbotback2.jpg);float:left}
#footerterms {text-align:right;height:26px;margin-top:30px}
#footerright {width:26px;float:left}

/* FORMATTED TABLES AND TABLE ROWS*/
#listtable {border:1px solid #bbb;border-width:0 0 1px 1px}
#listtable td {border:1px solid #bbb;border-width:1px 1px 0 0}
#listtable td a {}
#listtableresults {border:1px solid #bbb;border-width:0 0 1px 1px}
#listtableresults td {border:1px solid #bbb;border-width:1px 1px 0 0;font-size:8pt}
#head {background:url(images/navback.jpg)}
#head td {font-weight:bold;border:1px solid #aaa;border-width:1px 0 0 0;font-size:9pt;color:#fff}
#head2 {background:url(images/tablenavback.jpg)}
#head2 td {font-weight:bold;border:1px solid #aaa;border-width:1px 0 0 0;font-size:9pt;color:#fff}
.highlight {background:#f1f1f1}
.highlightsmall {background:#eee}
.highlightsmall td {font-size:10pt}
.normal {background:#fff}
.normalsmall {background:#fff}
.normalsmall td {font-size:9pt}

.tbhighlight {border:1px solid #053984;margin-bottom:18px;}
.tbhighlight td {border:1px solid #bbb;border-width:1px 1px 0 0;}

.etbhighlight {border:1px solid #053984;margin-bottom:18px;background:#E2E6FF;}
.etbhighlight td {border:1px solid #bbb;border-width:1px 1px 0 0}

.eventstable {border:1px solid #bbb;border-width:0 0 1px 1px;margin-bottom:18px;border-top:1px solid #fff;border-right:1px solid #fff}
.eventstable td {border:1px solid #bbb;border-width:1px 1px 0 0}

.eventstablebl {border:1px solid #bbb;border-width:0 0 1px 1px;background:#E2E6FF;margin-bottom:18px;border-top:1px solid #fff;border-right:1px solid #fff}
.eventstablebl td {border:1px solid #bbb;border-width:1px 1px 0 0;}
.eventdate {width:45px;text-align:center}
.eventday {font-size:10pt;font-weight:bold}
.eventmonth {font-size:9pt;font-weight:bold}
.eventname {background:#053984 url(images/tablenavback.jpg);line-height:20px;color:#fff;text-align:center;font-weight:bold;font-size:10pt}
.eventmoreinfo {width:45px;text-align:center;font-size:8pt}
.eventvenue {text-align:center;height:18px}
.eventvenueleft {text-align:left;height:18px}
.eventdistance {text-align:center;height:18px}
.eventdistanceleft {text-align:left;height:18px}
.eventinfo td {font-size:12pt}
.noborder td {border:0}

.classborder {border:1px solid #aaa;border-width:0 1px 0 0}
.classborder td {border:1px solid #aaa;border-width:0 0 1px 1px}
.classtrborder {background:#053984}
.classtrborder td {color:white;font-weight:bold}

/* GALLERY */
.gallerypic {float:left;width:112px;margin:0 0 30px 0}
.picdesc {border:1px solid blue;border-width:0 1px 1px 1px;background:#027DDD url(images/hovback3.jpg) repeat-x;color:#fff}
.picdescpad {padding:1px 0;text-align:center;font-size:8pt}
.picimg {}
.picimg a {display:block;border:1px solid blue;height:100px;}
.picimg a:visited {display:block;border:1px solid blue;height:100px;}
.picimg a:hover {border:1px solid #060C65;}

.gthumb {width:52px;height:50px}
.gthumb a, .gthumb a:visited {display:block;border:1px solid #053984;height:50px}
.gthumb a:hover {border:1px solid blue}

.redlink a, .redlink a:visited {font-weight:normal;color:red;font-size:8pt}


/* OTHER LAYERS */
.button {background:#027DDD url(images/hovback.jpg);color:white;font-weight:bold;font-size:9pt;padding:0 5px 1px 5px}
.buttondisabled {background:#053984 url(images/hovback.jpg);color:white;font-weight:normal;}
.clear {clear:both}
.white {color:#fff}
.newstitle {width:280px;height:66px;font-size:9pt}
.newscontent p {margin:0}
.newscont {clear:both}
.newscont img {margin:3px}
.thule a, .thule a:visited {color:#fff}

/* PAGNATION */
.pagcell {text-align:center;width:24px;}
.pagcell a, .pagcell a:visited {display:block;width:24px;border:1px solid #ccc;border-width:1px 1px 1px 0;border-left:1px solid #fff}
.pagcell a:hover {background:#eee;border:1px solid #08058F;border-width:1px 1px 1px 1px}

#subnav, #subnav ul {padding:0;margin:0;list-style: none;line-height:1;text-align:left}
#subnav a {display: block;height : 27px;color:#fff;text-decoration:none;text-align:center}
#subnav a:hover {color:#08058F;}
#subnav li {float: left;width: 84px;height:20px}
#subnav li ul {position: absolute;width:80px;left: -999em;margin:0;padding:0;text-align:center;height:20px;z-index:99;margin-left:30px;}
#subnav li ul a {width:160px;height:20px;line-height:20px;display:block;background: #027DDD;}
#subnav li ul a:hover {color:darkblue} 
#subnav li ul li {width:160px;height:20px;border:1px solid #0468B6;border-width:0 1px 1px 1px;}
#subnav li ul ul li {width:160px}
#subnav li ul ul li a {width:94px;width:170px}
#subnav li ul ul {margin: -20px 0 0 92px;	_margin: -20px 0 0 46px;}
#subnav li:hover ul ul, #subnav li.sfhover ul ul {left: -999em;}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul {left: auto;}
#subnav li:hover {background-position: 0 0;}
#subnav ul li:hover {background-position: 0 0;}
#subnav ul ul li:hover {background-position: 0 0;}