/*
##-------------------------------------------------------------------
##
## FILE: 
## CREATED: 03/07/08 by Ben Childs, Common Agency Ltd.
##
## NOTES:
##
##-------------------------------------------------------------------
*/

/*
 SOME RULES FOR CONSISTENCY. NOT TO LIVE HERE FOREVER BUT JUST FOR NOW...
 
 1. Order CSS properties consistently for easier co-working. I think of it
 as structure followed by styling [often separated completely]. As a rule,
 you can't style something until you've built it! Therefore, working from the 'outside'
 of an element inwrads it should be something like...
 display, float, clear,  etc
 positioning, z-index, etc
 height, width, etc
 margin, border, padding [in that order - working out to in]
 border styling, rounded corners, etc [in css 3]
 background
 fonts
 text-alignment, text-decoration, etc.
 anything else
 
 2. Consistent code styling/layout. Agree preferred closing bracket position - indented or not?
 
 3. Stick to lowercase for properties where possible.
 
 4. Always use shorthand unless there is a good reason not to. Check out http://www.dustindiaz.com/css-shorthand/ if in doubt.
 
 5. Where suitable, indent/next related styles e.g. h3 span.bullet would be nested just after h3.
 
*/

/*-------------------------------------------------------------------
## CLIENT SPECIFIC NOTES

Main color:
Secondary color:
Preferred web font:

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## HTML ELEMENTS START HERE */

body {
	padding: 12px 8px 12px 8px; /* Side-margins help with alignment at 800 x 600 */
	background-color: #3399cb;
	color:#333333;
	font: normal normal normal 12px/140% Helvetica, Arial, sans-serif;
	margin:0;
	padding:0;
	text-align:center;
}

hr {
	display:block;
	clear:both;
	visibility:hidden;
	height: 0;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border: none;
}

dl {
	margin: 0px 22px;
}

dl dd {
	margin: 0 0 0 0;
}

dl dt {
	font-size: 1.3em;
	font-weight: bold;
}

h1 {
	display: block;
	
	width: 100%;
	margin: 0 0 15px 0;
	color: #2C83B0; 
	font: normal bold normal 20px/100% Helvetica, Verdana, sans-serif;
}

    h1.home{
        padding-left: 40px;
        margin-top: 20px;
    }

h2 {
	display: block;
	width: 100%;
	color: #2C83B0; 
	font: normal bold normal 15px/100% Helvetica, Verdana, sans-serif;
    margin: 0;
    padding: 10px 0;
}

h3 {
	display: block;
	width: 100%;
	color: #2C83B0; 
	font: normal bold normal 18px/100% Helvetica, Verdana, sans-serif;
	margin-bottom: 18px;
	line-height: 140%;
}

h4 {
	display: block;
	margin: 0;
	color: #2C83B0; 
	font: normal bold normal 15px/100% Helvetica, Verdana, sans-serif;
}

a {
	text-decoration: underline;
	font-weight: bold;
	color: #333333;
    outline: none;
}

a:hover {
	text-decoration: none;
}

img {
	border: none 0px;
}

p {
	margin: 0 0 10px 0;
	position: relative;
}

pre {
	font-size: 1.1em;
}

table,td,th {
	border: none 0;
}

td {
	text-align: left;
	vertical-align: top;
}

th {
	text-align: left;
	vertical-align: middle;
}

ul, dl, ol {
	display: block;
	margin: 0 12px 12px 6px;
	padding: 0;
}

	ul.linkList {
		padding: 0 0 0 0;
		}

		ul.linkList li {
			margin: 0 0 6px 0;
			list-style: none;
			}
			
			ul.linkList li a {
				padding: 3px;
				background: #333333;
				color: #ffffff;
		
				text-decoration: none;
				text-transform: uppercase;
				}
			
			ul.linkList li a:hover {
				background: #ff0000;
				}

li, dt, dd {
	list-style:disc inside;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## MAIN LAYOUT BLOCKS START HERE

REMEMBER... the crux of this layout is a columns based format, centrally aligned, which is optimised
for 1024 x 768 but degrades gracefully to support 800 x 600 as long as no more than 12-columns are
used. The ideal is 12-col + stacked 3-cols, where the 3-cols should contain supplementary content
or advertising that will wrap beneath the 12-col block on smaller screens.

*/

/* header */
.blockHeader {
	display: block;
	position: relative;
	width: 1000px;
	padding: 10px 12px 0 12px;
	margin: 0 auto;
	background:url(/x/img/static/shadow-bg-top.jpg) bottom no-repeat;

}

	.blockHeader h1{
		text-indent: -10000px;
		background: url('/x/img/static/logo.gif') top left no-repeat;
		display: block;
		width: 260px;
		height: 61px;
		margin: 0;
	}
	    
    .blockHeader #tagline-container{
        display: block;
       padding-top: 9px;
       height:41px;
       width: 739px;
       position: relative;;
    }
    
    .blockHeader #tagline-container img{
     display:none;  
     position:absolute;  
     top:0px;  
     left:0px;  
    }

/* central wrapper */
.blockContent {
	display: block;
	width: 1000px;
	padding: 0 12px 20px 12px;
	margin: 0 auto;
	text-align: left;
	background:#FFFFFF url(/x/img/static/shadow-bg-repeat.jpg) top repeat-y;
	
}

    .blockContent.full{
        background:url(/x/img/static/shadow-bgfull-repeat.jpg) top repeat-y;
        width: 960px;
        padding: 0 32px 20px 32px;
    }

	.blockContent .sidebar{
		padding: 15px 0 0 10px;
		width: 180px; 
	}
		
	.blockContent .content {
		width: 810px;
	}

/* footer */
.blockFooter {
	display: block;
	clear: both;
	width: 1000px;
	padding: 12px;
	margin: 0 auto;
	background:url(/x/img/static/shadow-bg-footer.jpg) top no-repeat;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## NAVIGATION STYLES START HERE */

ul.nav{
		margin-bottom: 80px;
}

ul.nav li{
	font: normal bold normal 15px/100% Helvetica, Verdana, sans-serif;
	list-style: none;
	padding: 9px 0 7px 0;
	background: url('/x/img/static/nav-divider.gif') bottom left no-repeat;

}

	ul.nav li a{
		color: #2C83B0;
		text-decoration: none;
	}
	
	ul.nav li a.here{
		color:#333333;
	}
	
	ul.nav li a:hover{
		color: #1B5272;
	}
	
	ul.nav li a.selected{
		color: #12374C;
	}

a.facebook{
	text-indent: -10000px;
	display: block;
	width: 170px;
	height: 53px;
	background: url('/x/img/static/facebook-btn.jpg') top left no-repeat;
	
}

a.twitter{
    margin-top: 15px;
	text-indent: -10000px;
	display: block;
	width: 170px;
	height: 53px;
	background: url('/x/img/static/twitter-btn.jpg') top left no-repeat;
}

.tweet{
	background: url('/x/img/static/twitter-bg-bottom.gif') bottom left no-repeat;
	padding: 0 0 10px 0;
	margin: 15px 0 30px 0;
}

.tweet p{
	background: #CCE5F2 url('/x/img/static/twitter-bg-top.gif') top left no-repeat;
	padding: 30px 10px 0 10px;
	margin: 0;
	width: 150px;
	color: #333333;
	font: normal normal normal 12px/130% Arial, Helvetica, sans-serif;
    display: block;
    overflow: hidden;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## FORM STYLES START HERE */

label{
    display: block;
    font-weight: bold;
}

label.opt{
    font-weight: normal;
    font-style: italic;
}

input{
    display: block;
    margin-bottom: 10px;
    padding: 3px;
}

    input.hidden{
        padding: 0;
        margin: 0;
    }
    
    input.submit{
        font-size: 13px;
        font-weight: bold;
    }

textarea{
    padding: 3px;
    font: normal normal normal 12px/130% Arial, Helvetica, sans-serif;
    width:300px; 
}

p.formtext{
    color: #2C83B0;
    margin-top: 15px;
    font-weight: bold;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## TABLE STYLES START HERE */

table {
	width: 100%;
	margin: 5px 0 0 0;
}

	table tr td, table tr th {
		border-bottom: 1px solid #cccccc;
	    padding: 3px;
	    font: normal normal normal 1.2em/1.0em Helvetica, Arial, sans-serif;
	    vertical-align: middle;
	}
	
	table tr th {
		border-bottom: 1px solid #333333;
		font-weight: bold;
	}

/*-------------------------------------------------------------------*/


/*-------------------------------------------------------------------
## FUNCTIONAL STYLES START HERE */

/* float clearer */
.fc, .s{
	clear: both;
	visibility: hidden;
	overflow: hidden;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.fLeft{
	float: left;
}

.fRight{
	float: right;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## FOOTER STYLES START HERE */

.blockFooter a {
	color: #5F532F;
}

.blockFooter .footerLinks{
    margin-bottom: 10px;
    color: #FFFFFF;
}

.blockFooter .footerLinks p{
    padding: 0 0 5px 10px;
    margin: 0;
}

.blockFooter .footerLinks img{
    margin-right: 20px;
}

.blockFooter .footerCol{
    float: left;
    border-left: 1px solid #66B3D8;
    width: 150px;
    padding: 0 0 0 10px;
    height: 150px;
    margin: 0 15px 0 0;
    color: #FFFFFF;
}

.blockFooter .footerCol.first{
    border: none;
}

    .blockFooter .footerCol h3{
        font: normal bold normal 13px/120% Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        margin: 0 0 5px 0;
    }

    .blockFooter .footerCol a{
        color: #FFFFFF;
        font-weight: normal;
        text-decoration: none;
    }
    
    .blockFooter .footerCol a:hover{
        text-decoration: underline;
    }

.blockFooter .footerColWide{
    float: left;
    border-left: 1px solid #66B3D8;
    width: 250px;
    padding: 0 0 0 10px;
    height: 150px;
    margin: 0 15px 0 0;
    color: #FFFFFF;
}

.blockFooter .footerColWide h3{
        font: normal bold normal 13px/120% Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        margin: 0 0 5px 0;
    }
    
.blockFooter .footerColWide a{
        color: #FFFFFF;
        font-weight: normal;
        text-decoration: none;
    }
    
.blockFooter .footerColWide a:hover{
        text-decoration: underline;
    }

.blockFooter p.footer{
    color: #C1E2EF;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## DEBUG STYLES START HERE */

.blockDebug {
	width: 760px;
	margin: 0 auto;
	border: 1px dashed #999999;
	padding: 0px;
	background-color: #ffffff;
	text-align: left;
}

.blockDebug {
	margin-top: 15px;
}

.blockDebug li strong {
	font-size: 12px;
}

.blockDebug pre {
	color: blue;
	font-size: 11px;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## REMAINING MISC STYLES START HERE */

.blockContent .sidebar h3, .blockContent .sidebar h4{
		color: #2C83B0; 
		font: normal bold normal 15px/100% Helvetica, Verdana, sans-serif;
	}
	
		.blockContent .sidebar h4{
			font-size: 12px;
			font-weight: normal;
		}
	
.content p.homeIntro{
	background:url('/x/img/static/hp-intro-para.gif') top left no-repeat;
	height: 112px;
	width:810px;
	margin-top: 0px;
	text-indent: -10000px;
}

.content h2.community{
	background:url('/x/img/static/second-header.gif') top left no-repeat;
}

.content ul{
    list-style: circle inside;
}

.fullWidthContent{
    width: 720px;
    margin: 0 auto;
}

.splitColumn{
	width: 340px;
	padding-left: 45px;
	margin: 10px 0;
}

	.splitColumn h3{
		color:#2D87B6;
		font-size: 18px;
		font-weight: bold;
		line-height: 140%;
	}
	
.splitColumn a.more{
	display: block;
}

.widerColumn{
	width: 500px;
	padding-left: 40px;
	margin-top: 15px;
}

.contentSidebar{
	width: 205px;
	padding-left: 20px;
	margin-top: 15px;
}

a.download{
	display: block;
	float: left;
	height: 22px;
	text-decoration:none;
	color: #FFFFFF;
	font-weight: normal;
	padding: 0 0 0 25px;
	background: url('/x/img/static/download-bg-left.gif') top left no-repeat;
	margin-bottom: 15px;
}

a.download span{
	background: url('/x/img/static/download-bg-right.gif') top right no-repeat;
	padding: 3px 10px 0 0;
	display: block;
	height: 22px;
}

    a.download:hover{
        text-decoration: underline;
    }

/*-------------------------------------------------------------------*/

.fan_box .connect_top{
    padding:5px !important;
  
}

.FB_SERVER_IFRAME{
    background: url(/x/img/static/facebook-btn.jpg) no-repeat scroll left top;
}

.fan_box .profileimage{
    padding: 0 5px 0 0;
}

.fan_box .connect_action{
    padding: 0;
    
}

.fan_box .connect_action .name_block{
    padding-bottom:10px;
}

.fan_box .connect_action .name{
    font-size:13px;
}

.fan_box .connect_button{
    text-align: center;
}