/*.......................................Main Areas ............................................................................*/

body  { font: 0.9em Arial, Helvetica, sans-serif; background:#000000; margin: 0; padding: 0; text-align: center; color: #ffffff; }
/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults and text align center - centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

#container { width: 900px; background: #000000; margin: 10px auto; text-align: left; border-top:1px solid #282828; border-left:1px solid #282828;border-right:1px solid #282828;border-bottom:1px solid #282828;}
/* the auto margins (in conjunction with a width) center the page and the text align left overrides the "text-align: center" on the body element. */
 
h1 {color:#ffffff; font-size:1.4em; padding-top: 10px }
h2 {color:#ffffff; font-size:1em;}
h3 {color:#ffffff; font-size:0.9em;}
a { color:#cccccc; text-decoration:none;  }
a:hover { color:#999999; text-decoration:underline }

/*.......................................Header ............................................................................*/

#header { background:url(../Images/MainPages/Banner.jpg) no-repeat; height: 120px; width: 900px; }

/*.......................................Main Navigation ............................................................................*/

/*Top Navigation ......................*/
.navbar { height:36px; width:900px; background:url(../Images/Navigation/navbar.jpg); position:relative; font-size:13px; margin:0px; padding:0px; list-style:none; }
.navbar ul {margin: 0px 0px 0px 50px; list-style:none; padding: 0px; background:#00FF00 }
.navbar li {float:left;  }
.navbar a { display:block; height:36px; float:left; background: url(../Images/Navigation/button.jpg); text-decoration:none; line-height:22px; color:#ddd; padding: 0px 20px 0px 20px;  }
.navbar  a:hover, .navbar li:hover a {background: url(../Images/Navigation/button_hover.jpg); cursor:pointer; }

#Home .navbar li.Home a, #About .navbar li.About a, #Calendar .navbar li.Calendar a, #Competitions .navbar li.Competitions a, #Galleries .navbar li.Galleries a, #Resources .navbar li.Resources a, #Contact .navbar li.Contact a {background:url(../Images/Navigation/button_hover.jpg); line-height:27px;cursor:pointer; color:#fff;}
/*sets the top level navigation bar when the group is selected, set the property in the modify template command*/

/*Sidebar Navigation this is currently only used on the index page: sidebar can be on or off using the modify template settings on the relevant page ......................*/
#sidenav {float: left; width: 220px;  padding:0px; margin:20px 0px 0px 0px; }
.sidebar { border:1px solid #CCCCCC; width:198px; margin:0px 0px 20px 10px; padding:0px 0px 20px 0px }
.sidebar h1 { background:#262261; text-align:center; padding:5px}
.sidebar ul{ padding:0px; margin: 0px; }
.sidebar li{ font-size:0.8em;list-style:none; margin:0px; padding: 5px; text-align:left; }
.sidebar a{ display: block; text-decoration:none; color:#ffffff; margin:0px; padding: 0px; }
.sidebar a:hover {color:#999999 }

/*Bottom Navigation Bar....................*/
#bottomnav {padding: 0; margin-top:20px} 


/*.......................................Main Content  ............................................................................*/

#mainContent { margin: 0px 20px 0px 240px; padding: 0px 0px 20px 0px; position:relative;  }
/* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. Remember that padding is the space inside the div box and margin is the space outside the div box */

#singleColumn { margin: 0px; padding: 2px 10px; position:relative; } /*should be used if no sidebar present otherwise you will get a wide margin*/

.text { color:#787878}
a.admin {color:#5a5a5a; border:1px solid #5a5a5a; padding:5px; float:right;}

/* Home Page */
.welcomemessage {padding:0px; margin:10px; text-align:right; line-height:1.3em; float:right; width:250px}

/*Used for blocking the text on recent events on the calendar*/
.block {margin:10px 0px; padding: 0px; border:1px #CCCCCC solid; background:#DFE7EE; color:#000000 }
.block h1 {background:#262261; color:#ffffff; text-align:center; padding:5px 0px;}
.block h2 {margin:10px 5px; color:#000000}
.block p {font-size:0.9em; font-style:italic; margin: 5px 10px}
.block a {color:#0000FF}

/*Used for blocking text and tables on the resources page*/
.smallblock {margin:10px 10px; padding: 10px; border:1px #5a5a5a solid; width:398px; height:450px; float:left; font-size:0.9em; color:#5a5a5a }
.smallblock h1 {/*background:#262261;*/ color:#ffffff; text-align:left; padding:5px 0px;}
.smallblock th {vertical-align:top; width:150px; text-align:left; font-weight:normal}
.smallblock td {vertical-align:top}

/*Used for styling the main competition page links*/
.competition { margin:0px auto; padding:0px; width:400px; }
.competition ul { margin:0px; padding:0px; list-style: none }
.competition li { padding:5px 0px; border:1px #FFFFFF solid; margin:10px; text-align:center; background:#262261; }
.competition a{ font-size:1.2em; padding:2px 0px; margin:0px } 
.competition p{text-align:center; padding:0px; margin:0px; font-size:0.9em; font-style:italic}

/*.......................................Images.................................................................*/

/*Used for styling the images on the main pages - not for galleries or competition pictures*/
img {margin: 0px 0px 10px 0px;}
.imageleft {float:left; text-align:center;  border:1px #5a5a5a solid; margin: 5px 20px 5px 10px; padding:0px 0px 5px 0px; background:#000000; position:relative}
.imageright {float:right; text-align:center;  border:1px #5a5a5a solid; margin: 5px 20px 5px 10px; padding:0px 0px 5px 0px; background:#000000; position:relative}
.imageleft a, .imageleft p, .imageright a, .imageright p { color:#ffffff; padding:0px; margin:0px; font-size:0.8em; font-style:italic; position:relative; background:#000000; display:block }

/*Most of the sizes for the gallery and competitions pictures are set in the code file this is just a catch all*/
#Galleries img {width:auto}
#Competitions img {width:auto}


/*.......................................Tables  ............................................................................*/

/*Used for the calendar tables*/

/* Surrounds the calendar */
.eventmonth {margin-right: auto; margin-left: auto; margin-bottom: 10px; padding-left: 40px; padding-right: 40px; padding-top: 0px; text-align: center; }
/* used as the cssclass of the actual calendar */
.eventmonthtable{ width: 800px; margin-right: auto; margin-left: auto; margin-bottom: 15px;  }
.eventmonthtable a{ text-decoration:none; color:#CCCCCC; font-size:0.8em; margin-left:14px; margin-top:20px; display: block }
.dayNumber { float: left; clear: none; padding: 2px; font-style:italic }
.calcurrentmonth .daynumber {color:#5a5a5a; }
.eventmonthtable td:hover .dayNumber {color:#FFFFFF;}
.eventmonthtable td.calcurrentmonth:hover, .eventmonthtable td.calothermonth:hover, .eventmonthtable td.calweekend:hover, .eventmonthtable td.calcurrentday:hover {border:1px solid #FFFFFF}
.calcurrentmonth { background:#262261}
.calcurrentmonth, .calcurrentmonth, .calothermonth, .calcurrentday, .calweekend
{ text-align: left; height: 60px; vertical-align: top; /*position:relative;*/ border-collapse:separate; border-top: 1px solid #FFFFFF; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid #FFFFFF;}
.calothermonth{ background-color:#000000; color:#5a5a5a}
.calweekend { background-color:#333333}
.calcurrentday { background: #4b497a; }
.calweekend {}
.caldays {background:#000000}

/*Used for the results tables for the competitions*/
#Competitions table.results {font-size:0.8em; width:100%; color:#5a5a5a; }
#Competitions .results td {width:25%; padding:1px; margin:5px 0px; }
#Competitions .results th { color:#FFFFFF;}
#Competitions .results tr {border:1px solid #5a5a5a;}
#Competitions .results tr:hover {color:#FFFFFF; border:2px solid #ffffff; cursor: pointer}

#Competitions .block {width: 880px; margin:auto}
#Competitions table.winners {font-size:0.8em;  width:270px; margin:0px 10px; color:#5a5a5a; line-height:1em; float:left }
#Competitions table.winners a { color:#BEBEBE}
#Competitions .winners td {width:25%; padding:1px; margin:5px 0px; }
#Competitions .winners th {; color:#FFFFFF; text-align:center}
#Competitions .winners tr {border:1px solid #5a5a5a;}
#Competitions .winners tr:hover {color:#FFFFFF; border:2px solid #ffffff; }
#Competitions .winners td.name {text-align:right;}
#Competitions .winners td.title {text-align:left; font-style:italic}

/*Used to style the simple table for external competition results*/
#Competitions table.externalCompetitions {font-size:1em; border:#5a5a5a 1px solid; margin-top:20px; margin-bottom:20px}
#Competitions .externalCompetitions td {padding:1px}
#Competitions .externalCompetitions th {width:20%; /*background: #262261;*/ color:#5a5a5a}
#Competitions .externalCompetitions td.name {text-align:right;}
#Competitions .externalCompetitions td.title {text-align:left; font-style:italic}


/* Flickr Gallery */
.galleryitem, .galleryheaderitem {background-color:Black; text-align:center; border-color:#5a5a5a; border-width:1px; border-style:solid; height:150px; width:150px}
.galleryitem p, .galleryheaderitem p {margin:0px auto; padding:2px; width:100px; text-align:center}
.galleryheaderitem  h2 {text-align:left}
.galleryheaderitem {background-image:url(../images/MainPages/WhatsNew.png); border:2px}
.gallerythumb img {width:70px; height:70px}
.gallerysidebar { border:1px solid #CCCCCC; width:145px; margin:0px 0px 20px 10px; padding:0px 0px 20px 0px;  }
#gallerysidenav {float: left; width: 160px;  padding:0px; margin:0px; }
#gallerysidenav td input[type="image"] {margin:2px auto; border:5px solid white;}
#gallerysidenav p {margin:5px; text-align:center; background-color:black; font-style:italic; font-size:0.7em; }
.gallerycomments p {text-align:center; }
.HiddenColumn{display:none;} 

.gallerysidebar_arrow { background:#666666; }
.gallerysidebar_arrow:hover { background:#FFFFFF}


/*Event Management */
.eventblock {float:left; width:400px; padding:0px 10px 0px 10px; margin:0px 0px 0px 10px; color:#5A5A5A;   }
.eventblock h2 {text-align:center; margin:20px 0px 0px 0px; color:#A0A0A0}
.eventblock a { padding: 10px 0px 0px 0px; color:#A0A0A0; }
.eventblock a:hover { color:#FFFFFF}

.eventblockinner { border: 1px solid #000000; margin:0px 0px 0px 2px; padding:5px 0px 0px 10px; background-image:url(../images/MainPages/buttonbackgroundtop_base.png); }
.eventblockinner p.lastimage {height: 15px; margin:0px 0px 0px -10px; padding:0px; background-image:url(../images/MainPages/buttonbackgroundbottom_base.png);}
.eventblockinner:hover { background-image:url(../images/MainPages/buttonbackgroundtop.png)} 
.eventblockinner:hover p.lastimage {height: 15px; margin:0px 0px 0px -10px; padding:0px; background-image:url(../images/MainPages/buttonbackgroundbottom.png);}
.EventText { float: left;margin-right: 8px; }

.eventlistvisibledate { visibility:visible;cursor: pointer;float:left; width:100px;  color:#5A5A5A;  margin-top:11px;   }
.eventlistvisibledescription { visibility:visible;cursor: pointer;float:left; width:240px; color:#5A5A5A;  margin-top:11px;   }
.eventblockinner:hover .eventlistvisibledate, .eventblockinner:hover .eventlistvisibledescription, .eventblockinner:hover .eventlistinvisible, .eventblockinner:hover p {	color:#FFFFFF;	text-indent: 0px;}
.eventblockinner:hover .eventlistvisibledescription a { text-decoration:none; color:#ffffff}

.eventlistexpand { visibility:visible; cursor: pointer; float:left; height:2.5em; width:2em; background: url(../Images/expand.gif) no-repeat center; }
.eventlistinvisible { visibility:visible; margin:5px 10px 0px 30px; font-size:0.8em; }

.eventlist label {font-weight: bold; padding-right: 4px;   }
.eventlistdate {padding-right: 4px;   }
.eventlisticon {text-align: center;   }
.eventlisttime {text-align: center;    width: 95px;  }
.eventlistevent {font-weight: bold;}
.eventlistlocation {    /* no styles needed at this time */}
.eventlist td {padding-bottom: 4px; font-size: 0.9em; padding-left:20px}
.eventlist label {font-weight: bold;    padding-right: 4px;}
.itemdetails p {color:#ffffff}
.itemdetails_left {width:400px; float:left; color:#FFFFFF; background-color:#FF0000}

.formlabel {width:15%; background-color:#262261; padding-left:5px}
.infobox {text-align:left; width:85%; padding-left:5px;}
.infobox:hover input, .infobox:hover textarea {background-color:#CCCCCC}

.downloadevent img {float:left; border:none}
.downloadevent a {float: left; padding: 10px 0px 0px 10px}

.nextlink a {float:left; border:1px solid #5a5a5a; margin:10px 10px 0px 0px; padding:5px}



/*.......................................Footer  ............................................................................*/

#footer {padding: 0; margin:0px; font-size:0.8em; color:#CCCCCC } 
/* this padding matches the left alignment of the elements in the divs that appear above it. */
#footer p {	margin: 0; text-align:center}
/* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs.  Padding on this element will create space, just as the the margin would have, without the margin collapse issue */

#logos {text-align:center}
#logos img {border:none; margin:5px; padding:0; }
#logos a {text-decoration:none}
#logos p{margin: 10px 0px 0px 0px; padding:0; font-size:10px; font-style:italic;   }

#counter { text-align:center; width:900px; margin: 10px; display:block}

/*.......................................Miscellaneous  ............................................................................*/

/*Floats....................*/

.fltrt { float: right;	margin-left: 8px;}
/* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

.fltlft { float: left;margin-right: 8px;}
/* this class can be used to float an element left in your page */
.tablft {float:left}
.fltlftborder { float: left; padding:3px; border:1px solid #333333; margin:10px 0px 20px 50px}
.fltlftborder h2 {background-color:#333333}
.fltlftborder td { text-align:center;}
.clearfloat {clear:both; height:0; font-size: 1px; line-height: 0px;}
/* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */


/*Standard use........*/
.italic {font-style:italic}
.center {text-align:center; width:600px; margin:auto}
.left {text-align:left; width:600px; margin:auto}
.left h1 {text-align:center}
.left h2 {text-align:center}
.centerfull {text-align:center; margin:auto; width:880px}
.centerright {text-align:center; margin:auto; width:720px; float:right}
.centerright p{font-size:0.8em; color:#5a5a5a}
.centerright h2 { color:#5a5a5a; font-weight:normal; font-style:italic }
.line{ border-bottom: 1px solid #999999; margin-bottom: 10px; margin-top:4px; clear:right; padding: 0px }
.spaced {line-height:1.3em}
.indent {margin-left:25px}
.padding {padding:0px 50px}
.noborder {border:none}
.dashedline { border-bottom: 2px groove #5A5A5A; padding-top: 10px; margin-bottom: 10px; clear:right;}



/* Used by the page number control */
.PageNumbers{display:inline; padding:0px 0px 0px 10px}
.PageNumbers span{ padding-left: 3px;}


.newscrumbs {padding-left:10px; padding-top: 5px; }

.listitem {margin:0px 0px 0px 0px;width:350px; float:left;}
.listitem h3 {background-color:#666666}