/*
On The Line PR
@author: Rick Stoopman
@version: 20090807-01

Used colors:
Orange: #ffa200;
Grey: #8d8d8d;
*/

/* Set Sprite elements
**********************************/
#header h1 a,a.more, div#contact ul, div#contact, a#hbmeo-logo, a#sopr-logo, div#twitter h2, div#footer p{
	background:url(/images/ontheline/sprites/main.png) no-repeat bottom right;
	}

/* Background images
**********************************/	
#header h1 a, a#hbmeo-logo, a#sopr-logo{
	display:block;
	text-indent:-5555px;
	}

/* Clean lists
**********************************/
ul#nav, ul.blocks,div#social-media ul, div#contact ul, div#twitter ul{
	list-style:none;
	margin:0;
	padding:0;
	}

/* General layout
**********************************/
body, #publerBody, #header {
	text-align: center;
	background: url(/images/ontheline/background/body.png) repeat-x top left #efefee;
	}

#container {
	position:relative;
	width:830px;
	margin:0 auto;
	text-align: left;
	}

#header {
	height: 66px;
	text-align:left;
	}
	#header h1{
		margin:0;
		padding:0;
		}
		#header h1 a{
			background-position:0 0;
			height:66px;
			width:210px;
			}
			
div#main {
	margin-top: 0;
	height:1%;
	}
	
div#wrapper {
	float:left;
	width:100%;
	height:1%;
	}
	
/* Contents
**********************************/	
div#contents {
	margin: 0 420px 0 0; /* 410+10px margin */
	background-color:white;
	padding:20px;
	min-height:370px;
	position:relative;
	}
	
	body.home div#contents{
		background:none;
		padding:0;
		background:none;
		height:410px;							
		}
		
	div#contents h1, p#breadcrumb{
		color:#ffa200;
		margin:0 0 .5em 0;
		font-size:2.55em;
		position:relative;
		top:-4px;
		}
	
	p#breadcrumb{
		margin-bottom:0;		
		font-size:.82em;
		padding-top:0;
		}

/* Right Column
**********************************/	
div#right-column{
	float:left;
	width:410px;				
	margin-left:-410px; 	
	background-color:#efefee;
	}
	
	div#right-column ul.blocks{
		position:absolute;
		background:#efefee;
		padding-top:10px;
		top:336px;
		margin-bottom:10px;
		}
		div#right-column ul.blocks li{
			width:112px;
			height:110px;
			padding:10px 9px;
			}
			div#right-column ul.blocks li h2{
				font-size:1.35em;
				line-height:1.4em;
				top:-5px;
				}

	img#attachment{
		display:block;
		}
	
/* Bottom holding Contact & Social Media & Twitter
**********************************/		
div#bottom{
	margin-top:10px;
	background: url(/images/ontheline/background/bottom.png) repeat-y top left;
	height:1%; /* for ie < 8*/	
	}
	body.home div#bottom{ /* big mystery */
		margin-top:0;
		*margin-top:10px; /* TODO ie7 only, ie6 is corrected in ie6.css */
		}

/* Contact & Social Media
**********************************/			
div#contact,div#social-media{
	height:210px;
	margin-right:10px;
	}

div#contact{
	background-position:0 -79px;
	}
	div#contact h2,div#contact ul li a,div#contact,div#contact ul li a:hover{
		color:white;
		text-decoration:none;
		}
		
	div#contact h2{
		font-size:1.91em;
		margin-bottom:2px;
		}
		
	div#contact a.more{
		background-position:100% -78px;			
		text-indent:-5555px;
		top:72px;
		}
		div#contact a.more:hover{
			background-position:100% 0;	
			}
	div#contact ul{
		background-position:-817px -117px;
		padding:0 0 4px 18px;
		margin-bottom:41px;
		}
		div#contact ul li{
			font-size:1.09em;
			}
			
	div#contact h3{
		color:#8d8d8d;
		font-size:.82em;
		margin-top:0;
		padding-top:0;
		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		margin-bottom:2px;
		}
		
	a#hbmeo-logo,a#sopr-logo{				
		float:left;
		background-position:-210px 0;
		width:18px;
		height:68px;
		margin:2px 6px 0 0;
		}
	a#sopr-logo{
		width:45px;
		height:47px;
		background-position:-228px 0;
		}

/* Twitter
**********************************/				
div#twitter{		
	width:400px; /* for scrollbar */
	background: url(/images/ontheline/background/loading.gif) no-repeat 50% 50% #f7f7f7;
	background-color: #f7f7f7;		
	padding-top:39px;
	padding-right:0; /* for scrollbar */
	height:333px;		
	}
	div#twitter h2{
		position:absolute;
		height:31px;
		width:400px; /* for scrollbar */
		padding:6px 0 0 10px; /* right:0 for scrollbar */
		background-position:100% -155px;
		top:0;
		left:0;
		}
	div#twitter ul{
		overflow:auto;
		height:310px;
		position:relative; /* ie scrolling */			
		background-color:#f7f7f7; /* ovelay the loading gif */	
		margin:0;			
		}
		div#twitter li{
			padding:0 10px 1.5em 55px;
			position:relative;
			margin-bottom:1em;
			}
			div#twitter li .avatar, div#twitter li .tweet_avatar{
				position:absolute;
				left:0;
				top:4px;
				}
			div#twitter .time, div#twitter .tweet_time{
				position:absolute;
				bottom:0;
				right:10px;
				color:#8d8d8d;
				}	
			div#twitter .tweet_time a{color:#8d8d8d;}
	div#twitter p{
		line-height:1em;
		position:absolute;
		bottom:10px;
		margin:0;
		z-index:999;
		background:lime;
		}		
			
/* Navigation
**********************************/
ul#nav {
	position: absolute;
	top: 30px;
	right:0;
	border-right:1px solid #8d8d8d;	
	}
	ul#nav li{
		float:left;
		border-left:1px solid #8d8d8d;
		margin-right:6px;
		padding-left:6px;
		}
		ul#nav li a{
			color:#8d8d8d;
			line-height:1em;
			display:block;
			vertical-align:middle;
			position:relative;
			top:-1px;
			*top:-4px; /* ie7 */
			font-size:.82em;
			}
			ul#nav li a:hover, ul#nav li.selected a{
				color:#ffa200;
				text-decoration:none;
				}

/* Footer
**********************************/	
div#footer{
	clear:left;
	width:100%;
	background-color:lime;
	height:20px;
	background:url(/images/ontheline/background/footer.png) repeat-x top left;
	margin-bottom:20px;
	text-align:left;
	}
	div#footer p{
		width:820px;
		margin:0 auto;
		position:relative;
		color:#8d8d8d;
		top:-22px;
		padding-left:10px;
		font-size:.82em;
		height:42px;
		background-position:-631px 100%;
		}
		div#footer p a{
			color:#8d8d8d; 
			}
		div#footer p a#disclaimer-link{			
			padding-right:6px;
			margin-right:6px;
			border-right:1px solid #8d8d8d;
			height:1em;
			line-height:1em;
			display:inline-block;
			}
			div#footer p a:hover{
				color:#ffa200;
				}				
			div#footer span{
				position:absolute;
				top:0;
				left:430px;
				color:#010101;
				font-size:1.23em;
				}	
			div#footer span a{
				border:none;
				display:inline;
				margin:0;
				padding:0;
				color:#ffa200;
				}