﻿html, body {
    font-family: Tahoma, Verdana, Helvetica, Helvetica-Narrow, sans-serif;
    background-color: #fff;
    color: #000;
    margin: 0;
    padding: 0;
    text-align: center;
}

body {
    font-size: .8em;
}

#page{
    background-color: #fff;
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 960px;
}
a:link {
    color: #000;
}
a:visited {
    color: #333;
}
a:hover {
    text-decoration: none;
    color: #333;
}
a:active {
    text-decoration: none;
    color: #333;
}

input, select, textarea {
    font-size:1em; 
    font-family: arial, Verdana, Helvetica, Helvetica-Narrow, sans-serif;
}

/* Use headers in the markup for accessibility reasons but control look with styles below*/

h1, h2, h3, h4, h5, h6 {
   margin: .2em 0;
}

h1 {
   font-size: 34px;
   font-weight: bold;
   margin: 5px 0 5px 0;
}

h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
    text-decoration: none;
    color: #000;
}
.membercard h3 {
    font-size: 1em;
}

#loginbanner h2 {
    font-size: 1em;
    font-weight: normal;
    margin-top: 8px;
}

#masthead h2 {
    font-size: 13px;
    font-weight: bold;
    color: #333;
}
.leftblock h2, .rightblock h2, .fullwidth h2 {
    font-size: 1.6em;
}

.rightblock h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 0 0 .5em 0;
    padding: 0;
    display: block;
}

.eventmonth h3 {
    padding-left: 20px;
    padding-right: 20px;
}

p {
    margin: 0 0 1em;
}

.eventlist label {
    font-weight: bold;
    padding-right: 4px;
}

/************************************************************************
* 
* Main navigation used by the masterpage
*
************************************************************************/

#masthead, #footer {
    background-color: #222;
    color: #fff;
    font-weight: bold;
    margin: 0;
}
#masthead {
    height: 160px;
    margin: 0;
    padding: 10px;
    text-align: right;
}

#footer {
    clear: both;
    margin-top: 20px;
    padding: 10px;
    text-align: center;
}

#footer a 
{
    color: #fff;
}


#primarynavigation 
{
	background-color: #222;
	clear: left;
	margin: 0;
	text-align: center;
	width: 100%;
}

#primarynavigation ul {
    background-color: #222;
    color: #fff;
	margin: 0 auto;
	padding: 0;
	text-indent: 0;
	width: 960px;
}


#primarynavigation a {
	display: block;
	font: bold 18px Arial, Helvetica, sans-serif;
	line-height: 1.8em;
	text-align: center;
	text-decoration: none;
	width: 135px;
}

#primarynavigation a:link {
	color: rgb(200,200,200)
}

#primarynavigation a:visited {
	color: rgb(200,200,200);
}

#primarynavigation a:hover {
	color: #fff;
}

#primarynavigation a:active {
	color: #fff;
}

#primarynavigation li {
	display: block;
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-indent: 0;
}

/************************************************************************
* 
* Formatting common to most pages
*
************************************************************************/

/* 2 column layout */
#columnleft {
    float: left ;
    margin: 0;
    width: 300px;
}

#columnright {
    margin: 0 0 0 330px;
}

.leftblock {
    padding: 10px;
    vertical-align: top;
}

 .rightblock {
    margin-bottom: 5px;
    padding: 10px;
    position: relative;
}

.clear2column {
    margin:0;
    padding:0;
    line-height:0;
    font-size:0px;
    height:0px;
    clear: both;
}    

/* A full width block on the page */

.fullwidth, #loginbanner, .internalnav {
    /*border: 1px solid #999;*/
    /*width: 690px;*/
    /*background: #fcfcfc url(images/background_fullwidth.jpg) repeat-y;*/
    margin-bottom: 5px;
    padding: 10px 15px;
    text-align: left;
}

.internalnav {
    text-align: center;
}

/* for the login block
    picks up most of its properties from .fullwidth */

#loginbanner {
  padding-bottom: 0px;
}

/* Goes around controls that need to be presented as a block of functionality  */
.controlblock {
    border: 1px solid #DBDB79;
    padding: 3px;
    margin: 2px 0 5px 0;
    vertical-align: top;
}

/* shows a visual seperation */
.dashedline {
    border-bottom: 1px dashed #ccc;
    padding-top: 10px;
    margin-bottom: 10px;
    clear:right;
}

/* Command buttons on pages */
.actionbuttons {
  text-align:right;
  position: relative; 
  padding: 1px 1px 1px 1px;
}

/************************************************************************
* 
* Calendar specific formatting 
*
************************************************************************/

/* Surrounds the calendar */
.eventmonth {
    width: 940px;
    margin-right: auto;
    margin-left: auto;
    /*background: #f5f5f5 url(images/background_fullwidth.jpg) repeat-y;*/
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    text-align: center;
}

/* used as the cssclass of the actual calendar */
.eventmonthtable {
    width: 940px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    margin-bottom: 10px;
    border-collapse:collapse;
}

.dayNumber {
    float: right;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    clear: none;
    padding: 2px;
}

.calcurrentmonth {
    /* no styles needed at this time */
}
.calothermonth {
    background-color: #ddd;
}
.calcurrentday {
    background-color: #fff;
}
.calweekend {
    background-color: #eee;
  /*  width: 15%; */
}

.calcurrentmonth , .calcurrentmonth , .calothermonth , .calcurrentday , .calweekend {
    text-align: left;
    border: 2px solid #ccc;
    height: 80px;
    vertical-align: top;
    /* needed for positioning the dayNumber part */
    position: relative;
    border-collapse: separate;
    border-spacing: 5px;
}

/************************************************************************
* 
* Next / previous specific formatting 
*
************************************************************************/

.nextlink {
    position:absolute;
    right:0;
    padding-right:15px;    
}

/************************************************************************
* 
* Global formatting
*
************************************************************************/

/* all the legend tags use this same style */

legend {
    font-weight: bold;
    color: #666;
    font-size: 1em;
    padding-left: 4px;
    padding-right: 4px;
    margin-bottom: 7px;
}

/* apply zero margin to all forms and hide fieldset borders. Keep fieldset borders in the markup for better accessibility */

form {
    margin: 0px;
}

fieldset {
    margin: 0px;
    padding: 0px;
    border: none;
}

/* sometimes we hide elements from display in visual browsers (but leave them in the source for non visual browsers and for accessibility) */

.hidden {
    visibility: hidden;
}

.none {
    display: none;
}

/************************************************************************
* 
* Image functionality
*
************************************************************************/

.photo {
    /*background: #ccc url(images/background_thumbnail.jpg) repeat-x center;*/
    background-color: #fff;
    border: solid 1px #ddd;
    padding: 5px;    
}

.picture {
    background: #ccc url(images/background_thumbnail.jpg) repeat-x center;
    border: solid 1px #ddd;
    padding: 5px;
    margin: 5px;  
}

/* add hover border to href thumbnail images */
/*todo: rectify whether these should be .photo instead 

.thumbnail a:link img, #thumbnail a:visited img {
    border: 2px solid #883D08;
}
.thumbnail a:hover img {
    border: 2px solid #FFFFFF;
}
.thumbnail a:active img {
    border: 2px solid #000000;
}
*/

/************************************************************************
* 
* List type pages
*
************************************************************************/

/* represents each item in a vertical list */
.listitem {
    margin: 0;
    /*width: 444px;*/
}

/* surrounds the buttons for list items */
.editbuttons {
    padding-top: 6px;
}

/* floats the thumbnail off to the right */
.thumbnail {
    float: right;
    margin: 0 0 0 5px;
}

/*used to clear the float for the thumbnail */
.clearlist {
    border-bottom: 1px dashed #ccc;
    clear:right;
    margin:0 0 10px;
    padding: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
}

/* Used by the page number control */
.PageNumbers {
    display:inline;
}

.PageNumbers span {
    padding-left: 3px;
}

.newscrumbs a {
    font-weight: bold;
    padding-right: 2px;
}

/* Used in the two column lists */

.membercard {
    /*background-color: #f6f6f6;
    border: 1px solid #ccc;*/
    padding: 10px;
    margin: 0 10px 10px;
    text-align: center;
    width: 260px;
}

.leftblock .membercard {
    width: 220px;
}

.clearcard {
    clear:left;
    height:0;
    margin:0;
    padding:0;
}

#membercardcolumnleft {
    float: left;
    position: relative;
}
#membercardcolumnright {
    margin-left: 220px;
}
.membercard p {
    margin: 5px;
}

/************************************************************************
* 
* Compact Event list
*
************************************************************************/


/* define event grid view columns */
/* todo: use or remove */

.eventlistdate {
    padding-right: 4px;
}
.eventlisticon {
    text-align: center;
}
.eventlisttime {
    text-align: center;
    width: 140px;
}
.eventlistevent {
    font-weight: bold;
}
.eventlistlocation {
    /* no styles needed at this time */
}

table.eventlist {
    border-top: 1px dashed #ccc;
    margin: 10px 0;
    width: 100%;
}

.eventlist, .eventlist td, .eventlist tr, .eventlist img {
    border-style:none;
}

.eventlist td {
    border-bottom: 1px dashed #ccc;
    padding: .5em;
}
/************************************************************************
* 
* Rollover buttons
*
************************************************************************/

.buttonsmall, .buttonsmall-ovr {
    background: #000 /*url(images/background_button_small.gif) repeat-x*/;
    border: none;
    color: #fff;
    height: 22px;
    font-weight: normal;
    font-size: 9px;
    padding-bottom: 9px;
    padding-left: 3px;
    padding-right: 3px;
    cursor: pointer;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.buttonsmall-ovr {
    /*background: url(images/background_button_small-ovr.gif) repeat-x;*/
    text-decoration: underline;
    background: #333;
}

/************************************************************************
* 
* Page specific 
*
************************************************************************/

/* even dowload button */
.downloadevent img {
    margin-right: 5px;
    vertical-align: middle;
    border: none;
}

/* Header on view details type pages */
.itemdetails {
    font-size: 1.3em;
}



/************************************************************************
* 
* Photo selection controls
*
************************************************************************/

#popupbody {
    font-family: Tahoma, Verdana, Helvetica, Helvetica-Narrow, sans-serif;
    margin: 0px;
    background: #ccc;
    font-size: 0.7em;
}

#popupinner {
    border: 1px solid #ddd;
    margin: 5px;
    background: #f0f0f0f;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#popupbody h2 {
    font-weight: bold;
    margin: 0px;
    padding: 1px 0px 5px 5px;
    display: block;
}

.selected, .unselected {
    background-color: #fff;
    height: 220px;
    padding: 0;
    text-align: center;
    width: 220px;
}

.unselected {
    border: solid 2px #fff;
}

.selected {
     border: solid 2px #fff;
}

.scrollablelist {
    overflow: auto;
    height: 230px;
    width: 460px;
    border: solid 1px #DBDB79;
}

.scrollablelist2 {
    overflow: auto;
    height: 230px;
    width: 300px;
    border: solid 1px #DBDB79;
}


.scrolledtable {
}

 .selectablephoto {
    background: #FEFFC8 url(images/background_thumbnail.jpg) repeat-x center;
    border: 1px solid #E8DCA3;
    padding: 2px;
}

.contextbuttons {
  margin: 5px 3px 5px 3px; 

}

/************************************************************************
* 
* Forms
*
************************************************************************/

/* label column */
.formlabel, .formlabel label {
    width: 140px; 
    vertical-align: top;
}

/* value column */
.formvalue {
    vertical-align: top;
}

.txtfield {
    width: 300px;
}

.txtblock {
    width: 300px;
}


/************************************************************************
* 
* Tables
*
************************************************************************/

table#subs, #competitions table {
    width: 100%;
}

.th1 {
    background-color: #000;
    color: #fff;
    text-align: center;
}

table#officers tr th, table#officers tr td {
    padding: .5em 1em .5em 0;
}

.CenterImage {margin: 0 auto;}
.imageDetail, .imagedetail img {float: right; text-align: right;}
#affiliate {font-size: 1.5em;}
#affiliate a {text-decoration: none;}

#digitalprojected ul {margin-bottom: 1em;}
