/*
	Template CSS
	Developed by Alliance Software
	
	
	==========================================================
	
	TABLE OF CONTENTS
	
		1. Reset and colours
		2. General Setup
		3. Tiny MCE Default Styles
		4. Layout
		5. Nav
		6. Header
		7. Content
		8. Footer
		9. Forms
	
	=========================================================

*/
/* 	*********************************

		1. RESET AND COLOURS
		
	*********************************
*/
/* 
Css Rest ----------------------------------------------------------*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	
	/* remember to define focus styles! */
	:active {
		outline: 0;
	}
	
	/* remember to highlight inserts somehow! */
	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}
	
	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

/* End CSS Reset -----------------------------------------------*/

	
	/*
		page colours go here for easy reference
	*/


/* 	*********************************

		2. GENERAL SETUP
		
	*********************************
*/
	body{
		font-family: "Lato","Helvetica Neue",Helvetica,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Arial,Sans-serif;
		font-size:75%;
		line-height:1.4;																		
		color:#fff;
		background:url(../images/bg-web2tv.jpg) no-repeat center 0 #00152b;
	}
	
	h3,h4,h5,h6 {
		margin:1em 0 0 0;
	}
	
	h1,h2 {font-weight:bold;color:#fff;margin:0;}
	h2,h3,h4{line-height:1.2;}

	h1{font-size: 2.4em; }
	h2{font-size:1.8em; font-weight:bold; }
	h3{font-size:1.25em; }
	h4{font-size:1em; color:#79abd9;}
	
	p {
		margin:0.5em 0 0.8em;
		line-height:1.3;
		font-size: 1.2em;
	}
	em{font-style:italic;}
	strong{font-weight:bold;}
	.text-left{text-align:left;}
	.text-right{text-align:right;}
	.text-center{text-align:center;}
	
	ul, ol, dl{margin:1em 2em; list-style-position:outside;}																																											
	ol{list-style-type:decimal; list-style-position:outside;}
	ol li{margin-left:1.5em;}
	li{margin:0 0 0.5em;}													
	ul{list-style-type:square;}
	.no-bullet li{list-style-type:none;}


	
	/* keep in LoVe HAte */
	a:link{color:#80c4ff;}
	a:visited{color:#80c4ff;}
	a:hover{color:#80c4ff; text-decoration:underline;}
	a:active{color:#80c4ff;}
	
	#content a:link{color:#3475B2;}
	#content a:visited{color:#3475B2;}
	#content a:hover{color:#f2932f;}
	#content a:active{color:#3475B2;}
	
	blockquote{border:1px solid #ccc; padding:12px; width:90%; margin:12px auto;}
	blockquote h2{font-size:1.4em;}
	blockquote img{float:right; margin:3px 8px;}
	
	/* To force the blockquote to clear itself */
	blockquote:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
	blockquote {display:inline-block;}/* Hide from IE Mac \*/
	blockquote {display:block;}/* End hide from IE Mac */
	
	/* generic float and clear classes */
	.left{float:left;}
	.right{float:right;}
	.clear{clear:both;}
	.clear-left{clear:left;}
	.clear-right{clear:right;}
	
	/* clearfix enables self clearing floats, add class="clearfix" to any floated element to clear itself */
	.clearfix:before,
	.clearfix:after {
		content:"";
		display:table;
	}
	.clearfix:after {
		clear:both;
	}
	.clearfix {
		zoom:1; /* For IE 6/7 (trigger hasLayout) */
	}

	hr {
		border: 0px;
		height: 1px;
		color: #006cc9;
		background-color: #006cc9;
		margin-top: 20px;
		margin-bottom: 20px;
	}



/* 	*********************************

		3. TINY MCE STYLES
		
	*********************************
*/
	.mceContentBody{
		background:#fff;															/* sets background to white when editing in CMS */
		color:#222;																	/* sets text colour at a good contrast on white background */
		text-align:left;															/* to make sure it does not take centre styles from body */
		height: 100%;
	}
	.mceContentBody ul, .mceContentBody ol, .mceContentBody dl{margin:1em 0;}									
	.mceContentBody ol li{list-style-type:decimal; margin-left:30px;}
	.mceContentBody li{margin:0 0 0.5em;}															
	.mceContentBody ul li{list-style-type:square; margin:0 0 0 30px;}




/*	*********************************

		4. NAVIGATION
		
	*********************************
*/

	/*
	=================================
	Important for accessibility, skip
	navigation link initially hidden
	but shown on focus using keyboard
	=================================
	*/
	#skip a, #skip a:hover, #skip a:visited {
		position:absolute;
		left:-9999em;		
		overflow:hidden;
	}
	#skip a:active, #skip a:focus{
		position:static;
	}
	
	/* Main navigation bar */
	#nav{
		list-style-type:none;
		margin:30px 0 0 0;
		position:relative;
		float:right;
		background:url(../images/bg-content.png); border:1px solid #006cc9; -moz-border-radius:8px;-webkit-border-radius:8px;-khtml-border-radius:8px;border-radius:8px;
		padding:5px;
		font-size:14px;
	}
	#nav li{
		float:left;
		padding:0 10px;
		margin:0 1px;
		position:relative;
		border-right:1px solid #006cc9;
	}
	#nav li.last {border:none;}
	#nav li a{
		display:block;
		text-decoration:none;
	}
	#nav li a:hover{
		text-decoration:underline;
	}
	#nav .send-photo a {
		color: #ffffff;
		font-weight: bold;
	}

	#nav .highlight a {
		color: #eee;
	}


/*	*********************************

		5. LAYOUT 
		
	*********************************
*/

	html{}
	#page{width:960px;margin:0 auto;}
	#header{height:95px;width:960px;background:url(../images/logo-web2tv.png) 0px 15px no-repeat;}
	#content{}
	#footer{ text-align: center; margin-bottom: 1em; } 
	#copyright{}
	
	
/* 	********************************* 

		6. HEADER 
		
	*********************************
*/
	
	#logo{	}

	
/*	********************************* 
		
		7. CONTENT 
		
	*********************************
*/
	.gutter{}
	#main-content {
		background:url(../images/bg-content.png);
		border:1px solid #006cc9;
		-moz-border-radius:12px;
		-webkit-border-radius:12px;
		-khtml-border-radius:12px;
		border-radius:12px;
		width:908px;
		padding:20px 25px;
		margin-bottom:25px;
	}
	#sub-content{}
	#secondary-content{width:250px;float:right;border-left:1px solid #006cc9;min-height:400px;margin-left:20px;}
	#intro {padding:10px 25px 40px 0px;}
	#intro img {float:left;margin-right:10px;}
	#intro h1 {line-height:1.1;text-align:center;font-size:39px;margin-bottom:0.9em;font-weight:700;}
	#intro h2 {line-height:1.1;text-align:center;font-size:28px;color:#ffffff;font-weight:300;margin-bottom:0.5em;}
	#intro .left-box {width:370px;padding-left: 20px;}
	#intro .right-box {width:544px;}
	#intro .right-box h2 {color:#0194EE;font-weight: 700;font-size: 27px;text-align: left;}
	#intro .right-box ul {font-weight: 300;font-size: 25px;list-style-image: url(../images/icon-tick.png);margin-top: 0.7em;padding-left: 40px;
	}
	#intro .right-box li {}

	.twoColCol {width:60%;float:left;margin:15px 20px 15px 0; border-right:1px solid #006cc9;padding:5px 15px 0px 0px;min-height:225px;height:225px;}
	.threeColCol {width:30%;float:left;margin:15px 20px 15px 0; border-right:1px solid #006cc9;padding:5px 15px 0px 0px;min-height:225px;height:225px;}
	.threeColCol.rightCol {margin-right:0px;border:none;}
	.threeColCol h2 {margin-right:0px; font-size: 20px;margin-top:5px;}
	.left-box {float:left;width:48%;}
	.right-box {float:right;width:48%;display:block;}
	#top-section h2 {font-size:27px;font-weight:normal;margin-bottom:1em;}
	#top-section .screenbox {width:200px;margin-right:25px;float:left;padding:0px 4px 4px;}
	#top-section .screenbox.last {margin-right:0px;}
	#top-section .screenbox p {font-size:13px;line-height:18px;}
	#middle-section h2 {font-size:27px;margin-bottom:1em;}
	#middle-section img.installs {margin-left:33px;}
	a#send-button {width:275px;height:75px;overflow:hidden;background:url(../images/button-send-photo.png);display:block;text-indent:-9999px;float:right;margin:0px 30px 0 0;}
	a#send-button:hover {background-position:0px -75px;}

/* New CSS for front page */
	p.friends {
		font-size:20px;
		line-height:1.2em;
		margin:0 0 0 1.8em;
		float:left;
		display:inline;
	}
	.section-wrap {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #006cc9;
	}
	.section-wrap:first-child {
		margin-top: 0px;
		padding-top: 0px;
		border-top: none;
	}
	.oneCol {
		float: left;
		width: 30%;
		margin-right: 20px;
		padding-right: 20px;
		border-right: 1px solid #006cc9;
	}
	.oneCol img.icon {
		float: left;
		clear: both;
		margin: 0px 10px 10px 0px;
		position:relative;
	}
	.oneCol img.gdrlogo {
		float: left;
		margin: 5px 15px 15px 0px;
	}
	.twoCol img.installs {
		display: block;
		margin: 0 auto;
	}
	.oneCol.last{
		margin-right: 0px;
		border-right: none;
		width: 29%;
		padding-right: 0px;
	}
	.oneCol h3{
		font-size: 20px;
		display: block;
		padding: 4px 0px 0px 60px;
		height: 34px;
		margin:0px 0px 14px;
	}
	.oneCol h3.how{
		background:url(../images/icons/icon-system.png) no-repeat;
		padding-left: 55px;
	} 
	.oneCol h3.news{
		background:url(../images/icons/icon-news.png) no-repeat;
	} 
	.oneCol h3.more{
		background:url(../images/icons/icon-more.png) no-repeat;
	} 
	.oneCol div.connect {
		width: 100%;
		padding-top: 10px;
		border-top: 1px solid #006cc9;
		margin-top: 20px;
	}
	.oneCol div.connect h3{
		padding-left: 0px;
		margin-bottom: 0px;
	} 
	.oneCol div.connect div.options {
		float: left;
		margin: 10px 0px;
	}
	.oneCol div.connect div.options a {
		display: block;
		width: 75px;
		height: 32px;
		padding-left: 42px;
		text-align: left;
		text-decoration: none;
	}
	.oneCol div.connect div.options a:hover {
		text-decoration: underline;
	}
	.oneCol div.connect div.options a h4 {
		margin-top:0px;
	}
	.oneCol div.connect div.options a.twitter {
		background:url(../images/icons/icon-twitter.png) no-repeat;
		margin-right: 15px;
	}
	.oneCol div.connect div.options a.facebook {
		background:url(../images/icons/icon-facebook.png) no-repeat;
	}
	.section-wrap h2 {
		font-size:27px;
		margin-bottom:0.8em;
	}
	.section-wrap:first-child h2 {
		font-weight:normal;
	}
	.section-wrap .screenbox {width:200px;margin-right:25px;float:left;padding:0px 4px 4px;}
	.section-wrap .screenbox.last {margin-right:0px;}
	.section-wrap .screenbox p {
		font-size:13px;
		font-weight: 300;
	}
/* 
	*********************************

		8. FOOTER
		
	*********************************	
*/


	#footer {}
	#footer b { color: #80C4FF; }


/* 	*********************************
	
		9. FORMS

	*********************************
*/

.swfupload {
	margin-left: 1em;
	top: 0.5em;
	position: relative;
}

.successBox {
	padding: 0.25em 0.5em;
	background: #cfc;
	color: #333;
	border: 1px solid #0f0;
}

.errorBox {
	padding: 0.25em 0.5em;
	background: #fcc;
	color: #333;
	border: 1px solid #f00;
}

.fileUploaderImage {
	background: #f0f8ff;
	padding: 0.25em 0.5em;
	border: 1px solid #006CC9;
	color: #444;
	position: relative;
}

.fileUploaderImage a {
	color: #000080;
}

#sendphoto {
	width: 460px;
}

/* 
	*********************************

		10. SPECIFIC PAGES
		
	*********************************	
*/

#sendphoto { padding-left: 1.15em; }
#sendphoto h3 { margin-left: -1.15em; }

#sendPhoto h1 { text-align: center; }
#sendPhoto h2 { margin-bottom: 1em; }
#sendPhoto h3 { margin-top: 1.5em; }

#photoSendInstructions {
	float: right;
	border: 1px solid white;
	padding: 0.5em;
	margin-top: 1em;
	margin-left: 0;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	-khtml-border-radius:8px;
	border-radius:8px;
}

#photoSendInstructions h3 {
	margin-top: 0;
}



/* 
	*********************************

		11. TESTING
		
	*********************************	
*/

.selHighlight {
	background: red; 
	color: white;
	text-decoration: blink;
}

/* 
	*********************************

		12. Page Layouts
		
	*********************************	
*/
	@import url(layouts.css);


	.article{ margin-bottom:18px; padding-bottom:18px; margin-top:12px; overflow:hidden;}
			.article-details{overflow:hidden;}
			.article-secondary{width:270px; margin-right:20px; float:left; text-align:center;}
			.gallery{padding:0; margin:12px auto; overflow:hidden;}
			.gallery li{list-style-type:none; padding:0; margin:0 2px 6px; display:inline-block; background:#fff; padding:3px; border:1px solid #00152B;}
			.gallery li{*display:inline;}

/* 
	*********************************

		13. LightBox
		
	*********************************	
*/
			
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxTopLeft{width:14px; height:14px; background:url(../images/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(../images/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(../images/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(../images/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(../images/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(../images/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(../images/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(../images/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(../images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
        
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(../images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious:hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext:hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose:hover{background-position:-100px 0px;}
        
        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;}

#inline-content {
	 padding:10px;
	 background:#555;
}
        
.ie6 .left-box {
	display: none;
}
.ie6 #intro .right-box {
	width: 960px;
}