/* ==== Set overall font size, color and family in the body tag below === */

body { 
color: #000;
font-size: 12px; 
font-family: Trebuchet MS, Verdana, Geneva, Swiss; 

margin: 10px;

background-color: white;
}


p {
color: #000;
font-size: 12px; 
font-family: Trebuchet MS, Verdana, Geneva, Swiss;
}




/* ==== Set link styles within text (not menu - see below) - hover, active and visited colors ==== */

a  {  
color: blue;
text-decoration: none;
}

a:hover {  
color: purple; 
text-decoration: underline;
}

a:visited {  
color: purple; 
text-decoration: none;
}





/* ==== styles for different headers ==== */

h1 { 
color: black;
font-weight: bold; 
font-size: 20px; 
font-family: Trebuchet MS, Verdana, Geneva, Swiss; 
}

h2 { 
color: black;
font-weight: bold; 
font-size: 16px; 
font-family: Trebuchet MS, Verdana, Geneva, Swiss; 
}

h3 { 
color: black;
font-weight: bold; 
font-size: 16px; 
font-family: Trebuchet MS, Verdana, Geneva, Swiss; 
}

h4 { 
color: black;
font-weight: bold; 
font-size: 14px; 
font-family: Trebuchet MS, Verdana, Geneva, Swiss; 
}

h5 { 
color: black;
font-weight: bold; 
font-size: 12px; 
font-family: Trebuchet MS, Verdana, Geneva, Swiss; 
}

h6 { 
color: black;
font-weight: bold; 
font-size: 9px; 
font-family: Trebuchet MS, Verdana, Geneva, Swiss; 
}






/* ==== miscellaneous tags ==== */



hr {
color: black;  
height: 1px; 
}

form {
margin-top: 1px; 
margin-bottom: 1px;
}

input {
font size: 10px;
}

li {
margin-bottom: 10px;
}






/* ==== Classes - used to change the style of certain things like tables of data or admin functions ==== */



/* Used on the stats page to create graphs */
.graphbar {
background-color: #ddddff;
border: 1px solid navy;
}


/* Design for tables of data (rather than layout tables) */
.datatable {
border: 1px black solid;
}

.datatable th {
font-size: 12px;
background-color: #999999;
text-align: left;
font-weight: bold;
}

.datatable td {
font-size: 11px;
background-color: #cccccc;
text-align: left;
}

/* Alternating colours etc for table rows */
.row0 {background-color: none; padding: 5px;}
.row1 {background-color: none; padding: 5px;}


/* Pictures - you can put a border around all images here for instance */
.photo {
}

.photo img {
margin-right: 10px;
margin-left: 10px;
}


/* Captions to go below pictures */
.caption {
font-size: 9px;
text-align: center;
font-face: courier;
}

.hiartsevent {
margin-bottom: 10px;
border-bottom: 1px solid #aaaaaa;
}





/* ==== The Divs ==== */

/* Click to log in - normally at top left hand corner. */
#hiddenlogin {
position: absolute; 
top: 0px; 
left: 0px; 
width: 5px; 
height: 20px; 
z-index: 500;
visibility: hidden;
}



/* Main div holding all others */
#container {
position: absolute;
top: -50px;
left: 8px;
width: 330px;
margin: 0px 0px 20px 0px;
visibility: visible;
display: block;
padding-left: 392px;
padding-top: 124px;
padding-right: 10px;



}



/* Divs for 3 pics on left side */

#threepics {
background-color: white;
position: absolute;
top: 15px;
left: 0px;
height: 322px;
width: 337px;
z-index: 1;
}

#bigpic { 
position: absolute;
top: 127px;
left: 0px;
width: 336px;
height: 148px;
visibility: visible;
display: block;
z-index: 5;
}

#medpic { 
position: absolute;
top: 282px;
left: 144px;
width: 192px;
height: 148px;
visibility: visible;
display: block;
z-index: 5;
}
#weepic { 
position: absolute;
top: 282px;
left: 0px;
width: 137px;
height: 148px;
visibility: visible;
display: block;
z-index: 5;
}


#thetext {
position: absolute;
top: 127px;
left: 350px;
width: 280px;
}






/* branded headers at top */
#hedrs { 
position: absolute;
top: 55px;
left: 180px;
width: 339px;
height: 48px;
visibility: visible;
display: block
}



/*coloured block on left */
#leftblok {
position: absolute;
left: 0px;
top: 337px;
width: 336px;
height: 10px;
text-align: center;
font-weight: bold;
color: white;
}

/*IE only*/
* html #leftblok {
height: 40px;
}

/*For Opera Menu*/
#leftblok a {
font-weight: bold;
color: white;
}







/* Credits - showing Plexus and Site Map etc */
#credits {
font-family: tahoma; 
font-size: 10px; 
color: #888888;
padding-top: 14px;
margin-top: 16px;
clear: both;
}

#credits a {
}

#credits a:hover { 
background-color: #AEC512; 
color: #fff;
}