/*CSS & Web Design by dotUK - http://www.dotuk.net*/

/* Default Overrides */
html {
	/*height: 100%;   Only works if *ALL* parents are 100% too */
}
body {
	margin: 0px auto;
	padding: 0px;
	text-align: left;
	background-color:#333333;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#333333;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/bg.gif');
	/*height: 100%;   Only works if *ALL* parents are 100% too */
}

pre.debug {
	clear: both;
	width: 96%;
	margin: 2% 2% 2% 2%;
	padding: 2px 2px 2px 2px;
	font-size: 0.8em;
	border: 1px dashed #666666;
	color: #333333;
	background: yellow;
}


img {
	border:0px;
	vertical-align: middle;
}
img.icon{
	padding: 0.1em 0.5em 0.1em 0.1em;		/*Top, Left, Bottom, Right*/
	/*float: left;*/
	height: 16px;
}


h1{
	padding: 0.5em;
	color:#215102;
	font-size:1.4em;
	margin: 1px;
}

h2{
	padding: 0.5em;
	color:#215102;
	font-size:1.2em;
	margin: 1px;
}

h3{
	color:#328100;
	font-size:1.0em;
	margin: 1px;
	padding: 0.2em;
}

h4{
	font-size:0.9em;
	margin: 1px;
	padding: 0.2em;
	color:#328100;
}

i{
	font-weight: normal;
	font-size: 0.8em;
	font-style: italic;
}


/* Specific Control / Display Classes */
.hidden
{
	display: none;
}

.clear{
	clear: both;
}

.noborder{
	border: none;
}


/* Classes */
#container{
	padding: 10px;
	/*height: 100%;   Only works if *ALL* parents are 100% too */

}
#header {
	position: relative;
	width: 900px;
	height: 146px;
	margin: 0px auto;
	padding: 0px;
	background-color:#328100;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/header-bg-sustrans.png');
	text-align: right;
	color: #ffffff;
}
#header ul{
	padding: 0em;
	margin: 0px;
	margin-right: 50px;
	font-size: 1.0em;
	float: right;
}
#header ul li {
	display: inline;
}
#header ul li a {
	color:#FFFFFF;
	text-decoration:none;	
	padding: 0.5em 0.6em;
	float: right;
}
#header ul li a:hover {
	text-decoration:underline;
}

#logo {
	position: absolute;				
	top: 16px;
	left: 10px;
	width: 142px;
	height: 114px;
	margin: 0px;
	padding: 0px;
	background-color:#328100;
	text-align: center;
	color: #ffffff;
}


/*
	NAV
*/
#nav {
	position: relative;
	width: 900px;
	height:36px;
	margin: 0px auto;
	background-color:#328100;
	padding: 0px;
	text-align: right;
	color: #ffffff;
}
#nav img {
	height: 36px;
}

ul.topnav{
	padding: 0em;
	width: 722px;
	margin: 0px;
	font-size: 1.3em;
	background-color: #328100;
	float: left;
	list-style: none;
}

ul.topnav li {  
	float: left;  
	margin: 0;  
	padding: 0 0 0 0;  
	position: relative; /*--Declare X and Y axis base for sub navigation--*/  
	z-index: 999;
} 

ul.topnav li a{  
    padding: 0.4em 0.5em; 
    color: #fff;  
    display: block;  
    text-decoration: none;  
    float: left;  
}  
 

ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/  
ul.topnav li ul.subnav {  
    list-style: none;  
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/  
    left: 0; top: 30px;  
    background-color: #328100;
    margin: 0; padding: 0;  
    display: none;  
    float: left;  
    width: 180px;   
    z-index: 999; 
    font-size: 0.7em;
}  
ul.subnav{
	border: 1px solid #61aa00;
}
ul.topnav li ul.subnav li{  
    margin: 0;
    padding: 0;  
    clear: both;  
    width: 180px;  
}  
html ul.topnav li ul.subnav li a {  
    float: left;  
    width: 155px;  
    padding-left: 20px;  
}  

ul.topnav li ul.subnav li a:hover {  
    background-color: #61aa00; 
    color: #328100;
} 

#left_nav {
	position: relative;
	width: 200px;
	/*height: 100%;   Only works if *ALL* parents are 100% too */
	margin: 1px;
	margin-right: 20px;
	padding: 0px;
	text-align: left;
	color: #328100;
	border: 1px solid #cccccc;
	padding-left: 5px;
	padding-right: 3px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	float: left;
}

#left_nav h2 {
	padding: 0px;
	margin: 8px;
}

.left_nav ul{
	padding-left: 0px;
	margin: 0px;
	font-size: 1.1em;
	background-color: #ffffff;
	/*background-color: #61aa00;*/ 
	float: left;
	list-style: none;
	width: 98%;
}

.left_nav ul li{
	padding: 4px;
	background-color: #61aa00;
	margin: 1px;
}

.left_nav ul li a{
	text-decoration: none;
	color: #ffffff;
}

.left_nav ul li a:hover {  ; 
    color:#215102;
    text-decoration: underline;
}

/*
	PAGE
*/
#page{
	position: relative;
	width: 900px;
	margin: 0px auto;
	background-color:transparent;
	padding-top: 10px;
	padding-bottom: 10px;
	/*height: 100%;   Only works if *ALL* parents are 100% too */
}


/*
	SMALLPRINT
*/
#smallprint {
	position: relative;
	width: 900px;
	height: 36px;
	margin: 0px auto;
	background-color:#60ab00;
	padding: 0px;
	text-align: center;
	color: #ffffff;
	font-size: 0.8em;
}
#smallprint ul{
	padding-top: 0.4em;
	padding-bottom: 0.1em;
	padding-left: 0.4em;
	padding-right: 0.4em;
	margin: 0em;
}
#smallprint ul li {
	display: inline;
}
#smallprint ul li a {
	color:#FFFFFF;
	text-decoration:none;
	padding: 0em 0.4em;
	margin: 0em;	
}
#smallprint ul li a:hover {
	text-decoration:underline;
}


/*
	CONTENT
*/
#ProfileGraph{
	width: 500px;
	height: 300px;
}

#content{
	position: relative;
	width: 880px;
	overflow: hidden;					/*This give the container div height, ie inhreiting height of containers*/
	/*height: auto;   Only works if *ALL* parents are 100% too */
}
#subcontent{
	position: relative;
	width: 880px;
	margin-top: 10px;
	overflow: hidden;
}
.content {
	padding: 10px;
	margin: 0px auto;
	background-color:#ffffff;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/content-bg.gif');
	text-align: left;
	color: #333333;
	font-size: 1.1em;
}
.content p {
	padding: 0px;
	margin-left: 5px;
	margin-top: 0px;
}

#profile {
	margin-left: 15px;
	margin-right: 15px;
}


div.msgHead {
	border: 1px solid #215102;
	margin: 0px;
	padding: 1px;
}
div.msgHead img.Close
{
	position: relative;
	border: none;
	top: 0px;
	float: right;		
	z-index: 9999;
}
div.msgBody {
	border: 1px solid #215102;
	border-top: none;
	background-color: #ffffff;
	margin: 0px;
	padding: 3px;
}

#fbiframe {
	overflow:hidden;
	margin-top: 3px;
	width:100px;
	height:35px;
	float: left;
}

div#footer {
	position: relative;
	width: 900px;
	height: 50px;
	margin: 0px auto;
	background-color:#ffffff;
	padding: 0px;
	color: #666666;
	font-size: 1.0em;
}
div#footer-left {
	position: relative;
	top: 10px;
	float: left;
	margin-left: 15px;
	text-align: left;
}
div#footer-right {
	position: relative;
	float: right;
	margin-right: 15px;
	text-align: right;
}
#footer a {
	float: left;
	color: #666666;
	text-decoration:underline;
	padding-right: 5px;
	vertical-align: middle;
}
.paddown{
	margin-top: 5px;
}
#footer a:hover {
	text-decoration:none;
}
img.footer-funded{
	margin: 3px;
	vertical-align: middle;
}


#slideshow-container {
	position: relative;
	float: left;
	width: 650px;
}
#slideshow {
	position: relative;
}
#slideshow ul, #slideshow li{
	margin:0;
	padding:0;
	list-style:none;
	width:650px;			/*Width, height and overflow where in li def below, but here means non jquery enabled see one nice picture not *all* */
	height:200px;
	overflow:hidden; 
}
#slideshow li{ 
	/* 
		define width and height of list item (slide)
		entire slider area will adjust according to the parameters provided here
	*/ 

}
/* slideshow numeric controls */	

ol#controls{
	margin:1px 0;
	padding:0;
	height:18px;	
}
ol#controls li{
	margin:0 0px 0 0; 
	padding:0;
	float:left;
	list-style:none;
	height:18px;
	line-height:18px;
}
ol#controls li a{
	float:left;
	height:18px;
	line-height:18px;
	border:1px solid #ccc;
	background:#666666;
	color:#333333;
	padding:0 5px;
	text-decoration:none;
}
ol#controls li.current a{
	background:#333333;
	color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
	
/*
	CMS BLOCKS
*/


.cmsblock {
	margin: 1px;
	padding: 1px;
}

.cmsblock p {
	margin-left: 2px;
	padding: 1px;
}

.cmsblock img{
	margin: 5px;
	margin-top: 0px;
	padding: 2px;
	border: 1px solid #cccccc;
}

.cmsblock hr{
	color: #cccccc;
	width: 95%;
}

.cmsblock table{
	border-color: #cccccc;
	border-collapse: collapse;
	border-width: thin;
}

.cmsblock th, td {
	padding: 2px;
}

.cmsblock ul{
	list-style-position: inside;
}

.cmsblock a
{
	color: #328100;
	text-decoration: underline;
}

.cmsblock a:hover
{
	text-decoration: none;
}

.cmsblock img.miniparmo {
	margin: 0px;
	margin-left: 2px;
	margin-bottom: 2px;
	border: 0px;
	vertical-align: middle;
}


#cms_home-top-main{
	position: relative;
	float: left;
	margin-top: 10px;
}
#cms_home-top-right{
	position: relative;
	float: right;
	width: 215px;
}	

#cms_home-bottom-left{
	position: relative;
	float: left;
	width: 275px;
}
#cms_home-bottom-right{
	position: relative;
	float: left;
	width: 320px;
}
#cms_home-bottom-right-results{
	position: relative;
	float: left;
	width: 320px;
}

#cms_container-home-bottom-farright{
	position: relative;
	float: right;
	width: 250px;
}
#cms_home-bottom-farright{

}
#cms_home-bottom-farright-parmopopup{
	width: 245px;
	height: 115px
}


a.alink
{
	color: #328100;
	text-decoration: underline;
}

a.alink:hover
{
	text-decoration: none;
}

/*

LOGIN and POPOVERs

*/

.ParmoOver
{
	display: none;
	position: fixed;
	background-color: #317e00;
	padding: 0px;
	overflow: hidden;
	opacity: 0;
	-moz-border-radius: 5px;
	-moz-box-shadow: 2px 2px 6px rgba(0,0,0,1.0);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,1.0);
	width: 300px;			/*Height and Width get overriden by popover function later */
	height: 300px;
	z-index:9998;
	left: 50%;
	top: 50%;
	margin-left: -200px;	
	margin-top: -200px;		
	border: 10px solid #444444;
}
.ParmoOver img.Close
{
	position: relative;
	border: none;
	top: 0px;
	float: right;			
	z-index: 9999;
}

.ParmoOver img.Confirm
{
	margin-left: 3em;
	margin-right: 0.5em;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	vertical-align: middle;
}
.ParmoOver a.Confirm
{
	text-decoration: none;
	border: none;
	color:#333333;
}
.ParmoOver p
{
	margin-left: 1.0em;
}

.PopOver
{
	display: none;	
	position: fixed;
	background-color: white;
	padding: 8px;
	overflow: auto;
	opacity: 0;
	-moz-border-radius: 5px;
	-moz-box-shadow: 2px 2px 6px rgba(0,0,0,1.0);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,1.0);
	width: 300px;			/*Height and Width get overriden by popover function later */
	height: 300px;
	z-index:9998;
	left: 50%;
	top: 50%;
	margin-left: -200px;	
	margin-top: -200px;		
	border: 10px solid #444444;
}
.PopOver img.Close
{
	position: relative;
	border: none;
	top: 0px;
	float: right;		
	z-index: 9999;
}

.PopOver img.Confirm
{
	margin-left: 3em;
	margin-right: 0.5em;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	vertical-align: middle;
}
.PopOver a.Confirm
{
	text-decoration: none;
	border: none;
	color:#333333;
}
.PopOver p
{
	margin-left: 1.0em;
}


.OpaqueGrey
{
	display: none;			
	position: fixed;			
	left: 0px;
	top: 0px;
	z-index: 9997;
	background-color: #328100;
	opacity: 0;
	width: 100%;
	height: 100%;   /*Only works if *ALL* parents are 100% too */
}


/* MsgError */


div.MsgError {
	display: none;
	border: 1px dashed #71180B;
	background-color: #eeeeee;
	float: left;       
	width: 95%;    
	margin: auto auto 2.5% 2.5%;    
	padding: 0.5em 0 0.5em 0;
	text-align: left;
}
div.MANMsgError {
	display: none;
	float: left;
	border: 1px dashed #71180B;
	background-color: #eeeeee;    
	width: 45%;    
	margin: auto auto 2.5% 2.5%;    
	padding: 0.5em 0 0.5em 0;
	text-align: left;
}

.MsgError h3, .MANMsgError h3{
	padding-left: 1.0em;
	font-size: 1.0em;
	color: #71180B;
	margin: 0;
}
.MsgError p, .MANMsgError p{
	padding-left: 1.5em;
	font-size: 0.9em;
	margin: 0;
}
.MsgError ul, .MANMsgError ul{
	list-style-type: square;
}
.MsgError li, .MANMsgError li{
	padding-left: 1.0em;
	font-size: 0.8em;
	color: #71180B;
}
.inputError {								/*Used in Validation to Highlight*/
	border: 1px dashed #71180B;
	color: #71180B;
}

.InlineError{
	position: relative;
	width: 880px;
	height: 300px;
	overflow: hidden;					/*This give the container div height, ie inhreiting height of containers*/
	padding: 10px;
	margin: 0px auto;
	background-color:#ffffff;
	text-align: left;
	color: #333333;
	font-size: 1.2em;
}



/* divCenter */

div.divCenter {   
	width: 95%;    
	text-align: center;
}
div.divHiddenCenter {
	display: none;  
	width: 95%;    
	text-align: center;
}



/*

FORMS, FIELDSETS and LABELS

*/

legend  {    
	margin-left: 1em;    
	padding: 0;    
	color: #215102;  
	font-size: 1.0em;  
	font-weight: normal;    
}

fieldset{    
	width: 75%;    
	margin: auto auto 0.5% 0.5%;    
	/*padding: 2.5em 0 2.5em 0;  */  
	border: 1px solid #215102;    
	background-color: #eeeeee; 
}
fieldset.loginFieldSet {
	float: left;    
	clear: both;    
	width: 95%;    
	margin: auto auto 1.5% 1.5%;    
	padding: 1.5em 0 1.5em 0;    
	border: 1px solid #215102;    
	background-color: #eeeeee; 
}
fieldset.adminFieldSet { 
	float: left;    
	clear: both; 
	width: 95%;    
	margin: auto auto 2.5% 2.5%;    
	padding: 1.5em 0 1.5em 0;    
	border: 1px solid #215102;    
	background-color: #eeeeee; 
}
fieldset.MANadminFieldSet { 
	width: 95%; 
	float: left;    
	clear: both   
	margin: auto auto 2.5% 2.5%;    
	padding: 1.5em 0 1.5em 0;    
	border: 1px solid #215102;    
	background-color: #eeeeee; 
}

fieldset.blankFieldSet{
	clear: both;
	float: none;
	width: auto;
	background-color: transparent;
	border-style: none;
}
fieldset.MANblankFieldSet{
	float: left;
	width: 45%; 
	background-color: transparent;
	border-style: none;
}
fieldset.blankFieldSetNoClear{
	float: none;
	width: auto;
	background-color: transparent;
	border-style: none;
}

label{
	padding-left: 0.5em;
	padding-right: 0.5em;
}
label em{
	color: #328100; 
	font-weight: normal;
	font-size: 0.8em;
	/*text-transform: uppercase;*/
	font-style: italic;
}

input{
	color: #666666;
	font-size: 1.0em;
	padding: 1px;
	margin-bottom: 2px;
}
input.button{
	color: #215102;
	background-color: #999999;
	border: 1px solid #215102;
	padding: 1px;
	margin: 5px;
	margin-left: 15px;
}

select{
	color: #666666;
	font-size: 1.0em;
	vertical-align: top;
}

/*

PARMO CALC

*/

#parmo-popcontainer{
	position: relative;
	margin: 0px;
	padding: 0px;
	height: 400px;
	width: 600px;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/parmocalc/parmobg.png');
}
#parmo-container{
	position: relative;
	margin: 0px auto;
	padding: 0px;
	height: 400px;
	width: 600px;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/parmocalc/parmobg.png');
}

#parmo-form{
	position: relative;
	top: 80px;
	left: 45px;
	width: 325px;
	height: 85px;  
	opacity: 0.9; 
}

#parmo-popform{
	position: relative;
	top: 80px;
	left: 45px;
	width: 325px;
	height: 85px;  
	opacity: 0.9; 
}

fieldset.FldParmoCalc {
	float: left;    
	clear: both; 
	margin: auto auto 2.5% 2.5%;    
	padding: 2.0em 1.0em 2.0em 1.0em;    
	border: 1px solid #c0cace;    
	background-color: #afc8d2; 
}

#parmo-form p{
	color: #5398b4;
	font-size: 1.3em;
	text-align: center;
	font-weight: bold;
}

label.parmoform{
	padding-left: 0.5em;
	padding-right: 0.5em;
	color: #5398b4;
	font-size: 1.2em;
	width: 50px;
}


input.parmoform{
	color: #666666;
	background-color: #e6e6e6;
	border: 1px solid #c0cace;
	font-size: 1.2em;
	margin: 5px;
}

select.parmoform{
	color: #666666;
	background-color: #e6e6e6;
	font-size: 1.2em;
	margin: 5px;
}

.larger{
	font-size: 1.4em;
}


#parmo-plate{
	display: none;
	position: relative;
	top: 140px;
	left: 85px;
	height: 94px;
	width: 250px;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/parmocalc/parmo-plate.png');
	z-index:100;
}

#parmo-popplate{
	display: none;
	position: relative;
	top: 140px;
	left: 85px;
	height: 94px;
	width: 250px;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/parmocalc/parmo-plate.png');
	z-index:100;
}

#parmo-message{
	display: none;
	padding-left: 62px;
}

.parmo-message-text{
	color: #5398b4;
	font-size: 1.3em;
	text-align: center;
	font-weight: bold;
}

.parmo-message-text a {
	color: #ffffff;
	text-decoration:underline;
	font-weight: normal;
}
.parmo-message-text a:hover {
	text-decoration:none;
	font-weight: normal;
}

#parmo-reset{
	position: absolute;
	top: 330px;
	left: 15px;
}

.parmo{
	position: relative;
	top: 53px;
	left: 122px;
	height: 67px;
	width: 181px;
	background-repeat: no-repeat;
	z-index:101
}

.parmo-start{
	position: absolute;
	top: 0px;
	left: 122px;
	height: 67px;
	width: 181px;
	background-repeat: no-repeat;
	z-index:101
}

.parmo1{
	display: none;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/parmocalc/1parmo.png');
	z-index:101
}
.parmo56{
	display: none;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/parmocalc/56parmo.png');
	z-index:102
}
.parmo46{
	display: none;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/parmocalc/46parmo.png');
	z-index:102
}
.parmo36{
	display: none;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/parmocalc/36parmo.png');
	z-index:102
}
.parmo26{
	display: none;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/parmocalc/26parmo.png');
	z-index:102
}
.parmo16{
	display: none;
	background-image: url('http://www.stocktonsbigchallenge.org.uk/images/parmocalc/16parmo.png');
	z-index:102
}
.parmo0{
	display: none;
	z-index:-999;
}


/*
tables, rows and columns
*/

.StatsTable
{
	width: 100%;
	border-collapse:collapse;
	margin: 10px;
}

.StatsTable th
{
	font-size:0.8em;
	border:1px solid #666666;
	padding:3px 7px 2px 7px;
	background-color:#cccccc;
	font-weight: normal;
}
.StatsTable td
{
	font-size:0.9em;
	border:1px solid #666666;
	padding:3px 7px 2px 7px;
}


td.TableRecordCtrl
{
	font-size:0.8em;
}

.TableRecordList th
{
	font-size:0.9em;
	text-align:center;
	padding-top:5px;
	padding-bottom:4px;
	background-color:#cccccc;
	color:#666666;
}


.HomeResultsTable
{
	width: 310px;
	border-collapse:collapse;
	margin: 10px;
}

.HomeResultsTable td.title
{
	width: 150px;
	font-size:0.9em;
	border:1px solid #666666;
	padding:3px 7px 2px 7px;
	background-color:#cccccc;
	font-weight: normal;
}
.HomeResultsTable td
{
	font-size:0.9em;
	border:1px solid #666666;
	padding:3px 7px 2px 7px;
	text-align: center;
}

.ResultsTable
{
	width: 95%;
	border-collapse:collapse;
	margin: 10px;
}

.ResultsTable td.title, th.title
{
	font-size:0.9em;
	border:1px solid #666666;
	padding:3px 7px 2px 7px;
	background-color:#cccccc;
	font-weight: normal;
	text-align: left;
}
.ResultsTable td.main
{
	font-size:0.9em;
	border:1px solid #666666;
	padding:3px 7px 2px 7px;
	text-align: right;
}
.ResultsTable td
{
	font-size:0.9em;
	border:1px solid #666666;
	padding:3px 7px 2px 7px;
	text-align: center;
}

.SummaryResultsTable
{
	width: 400px;
	border-collapse:collapse;
	margin: 10px;
}

.SummaryResultsTable td.title
{
	font-size:0.9em;
	border:1px solid #666666;
	padding:3px 7px 2px 7px;
	background-color:#cccccc;
	font-weight: normal;
	text-align:left;
}
.SummaryResultsTable td
{
	font-size:0.9em;
	border:1px solid #666666;
	padding:3px 7px 2px 7px;
	text-align: center;
}

/*
	HACKS	
*/

@media screen and (-webkit-min-device-pixel-ratio:0)
{
	/* Safari 3.0 and Chrome rules here */
	body {
		font-size:0.7em;			/*Safari Renders Fonts too big */
	}
	#nav ul li a {
		padding: 0.5em 1.0em;
	}
}