/*##-------------------------------------------------------------------#### FILE: justmilk.css for use on www.justmilk.com## CREATED: 03/07/08 by Ben Childs, Common Agency Ltd.##			edited for www.justmilk.com by makeonline.co.uk## NOTES:####-------------------------------------------------------------------*//*-------------------------------------------------------------------## CLIENT SPECIFIC NOTESMain color: #FFE900;Secondary color: #EFFCFF;Preferred web font:/*-------------------------------------------------------------------*//*-------------------------------------------------------------------## HTML ELEMENTS START HERE */body {	padding: 0;    margin: 0;    background-attachment:fixed;	line-height: 0.7em;	color: #333333;	height:100%;	background: url('/x/img/gradient-bg.jpg') repeat-x;	font: normal normal normal 14px/120% Arial, Helvetica, sans-serif;}	body.overlay{		background: none;		padding: 0 15px;	}hr {	display: block;	clear: both;	visibility: hidden;	height: 0;	width: 100%;	margin: 0;	padding: 0;	border: none;}dl {	margin: 0px 22px;}dl dd {	margin: 0 0 0 0;}dl dt {	font-size: 1.3em;	font-weight: bold;}h1,h2,h3,h4,h5,h6,h7{    color: #000;}h1 {	display: block;	margin: 0 0 40px 10px;	font: normal normal normal 24px/1.0em Arial, Verdana, sans-serif;}    h1.wide{        margin: 0 0 40px 0;            }h2 {	display: block;	margin: 0 0 20px 0;	font: normal normal normal 24px/1.0em Arial, Verdana, sans-serif;}    h2.successTips{        background: url('/x/img/icon-tick-yellow-black.gif') top left no-repeat;        color: #FFCC00;        font-size: 40px;        padding-left: 55px;    }h3 {	display: block;	margin: 0 0 20px 0;	font: normal normal normal 16px/1.0em Arial, Verdana, sans-serif;}h4 {	display: block;	margin: 0 0 20px 0;	font: normal normal normal 16px/1.0em Arial, Verdana, sans-serif;}a {	text-decoration: underline;	color: #34ACD7;	outline: none;}a:hover {	color: #34ACD7;	text-decoration: underline;}img {	border: none 0px;}p {	margin: 0 0 1em 0;	font: normal normal normal 14px/120% Arial, Helvetica, sans-serif;}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 0 20px 0;	padding: 0;}li, dt, dd {	list-style:square inside;}.fRight{	float: right;}.fLeft{	float: left;}/*--------------------- * STRUCTURE ---------------------*/.blockHeader{	width: 800px;	margin:10px auto 0 auto;}		.blockHeader a h1{		text-indent: -10000px;		background:url('/x/img/logo.jpg') top left no-repeat;		display: block;		width: 285px;		height:105px;		margin: 0;		float: left;	}		.blockHeader a:hover h1{		background-position: bottom left;	}		.blockHeader h2{		text-indent: -10000px;		background:url('/x/img/tag-line.jpg') top left no-repeat;		display: block;		width: 486px;		height:30px;		margin: 0;		margin-top:52px;		float: right;	}.blockContent{	width: 800px;	margin: 30px auto;	padding: 10px 0;}	.blockContent .homePinForm{		width: 445px;		padding: 20px 20px 10px 20px;		background: #000000;	}.blockFooter {	width: 800px;	margin: 0 auto;	padding: 30px 0 0 0;	display: block;	font-size: 12px;	color: #666666;}/*--------------------- * NAVIGATION ---------------------*/.nav{	margin-top:25px;	width:100%;	display:block;	height: 37px;	background: url('/x/img/nav-bg.jpg') repeat-x;}	.nav .items{		width:100%;		display:block;		height: 37px;			}	.nav ul{		margin: 0;	}	.nav ul li {		color: #D7E4F1;		float: left;		height: 27px;		display: block;		padding:10px 15px 0 15px;		background: url('/x/img/nav-divider.gif') left no-repeat;	}		.nav ul li span.screenname{		font-style: italic;		font-weight: bold;	}			.nav ul li.home{			background: none;		}				.nav ul li.twitterSignIn{		}					.nav ul li a{		color: #D7E4F1;		text-decoration: none;		height:17px;		float: left;		font: normal normal normal 14px/120% Arial, Helvetica, sans-serif;		padding-bottom:10px;	}			.nav ul li.twitterSignIn a{			padding:0 0 0 25px;			background: url('/x/img/twitter-nav-icon.gif') left no-repeat;		}		.nav ul li a:hover{		text-decoration: underline;	}		.nav ul li a.here{		color: #FFFFFF;		background: url('/x/img/nav-selected.gif') bottom left no-repeat;	}			/*-------------------------------------------------------------------*//*-------------------------------------------------------------------## MAIN LAYOUT BLOCKS START HEREREMEMBER... the crux of this layout is a columns based format, centrally aligned, which is optimisedfor 1024 x 768 but degrades gracefully to support 800 x 600 as long as no more than 12-columns areused. The ideal is 12-col + stacked 3-cols, where the 3-cols should contain supplementary contentor advertising that will wrap beneath the 12-col block on smaller screens.*/.sidebar{	width: 275px;	font: normal normal normal 14px/120% Arial, Helvetica, sans-serif;}	.sidebar h3{		padding: 0 0 10px 0;		background: url('/x/img/sidebar-h3-bg.gif') 10% 100% no-repeat;	}	.sidebar h3 span{		background: #333333;		display: block;		padding: 9px 0 9px 20px;		width: 255px;	}        .sidebar ul.pinLinks li{    	list-style: none;    	border-top: 1px solid #BFBFBF;    	padding: 5px 0 5px 20px;    }/*-------------------------------------------------------------------## GENERIC PIN LINKS*/ul.pinLinks li.first{	border: none;}ul.pinLinks li p{    font-style: italic;	margin: 0;    color: #000000;    font-size:12px;}    ul.pinLinks li p.nodata{        color: #999;    }        ul.pinLinks li a:hover span{        text-decoration: underline;    }	ul.pinLinks li a p span{	    text-decoration: none;		font-style: normal;		font-size: 14px;        color:#333333;	}		ul.pinLinks li a p.page{}    ul.pinLinks li a:hover p.page{}    ul.pinLinks li a p.pinpoint{}    ul.pinLinks li a:hover p.pinpoint{}    ul.pinLinks li a p.comment{}    ul.pinLinks li a:hover p.comment{}/*-------------------------------------------------------------------*/.toolbar{	/* background-color: #EFFCFF; */}.toolbar h1{	width: 250px;	margin: 0 0 0 10px;	padding: 5px;	float: left;}.toolbar h1 span{	color: #FFE900;}.toolbar form.testerForm{	display: block;	width: 400px;	float: right;	margin: 0;	padding: 10px;}/* for testing the highlighter */.toolbar .pinpointerHighlight{	background-color: #CC0000 !important;}/*-------------------------------------------------------------------*//*-------------------------------------------------------------------## HP FORM *//* 	height: 385px; */.homePinForm{	/**	height: 385px;	*/}/* Needs to be removed and re-enstated as required */.homePinForm.fixedHeight{	height: 325px;}.homePinForm .segment{	position: relative;}.segment .errorFeedback{	position: absolute;	top: 2px;	left: -335px;	display: block;	width: 280px;	height: 30px;	padding: 10px;	background-color: #ff0000;	color: #fff;}.segment .errorFeedback .wrap{	position: relative;}.segment .errorFeedback .wrap img.arrow{	position: absolute;	left: 290px;	top: 0px;}.segment .errorFeedback .wrap p.feedback{	padding: 3px 0 0 0;	margin: 0;}.segment .errorFeedback .wrap h3{	color: #fff;	padding: 0 0 0 24px;	margin: 0;	background: #ff0000 url(/x/img/icon-sadface-on-red.gif) no-repeat 0px 0px;	font-weight: bold;}.homePinForm .segment textarea, .homePinForm .segment input{	width: 395px;	border: 0;	margin-bottom: 10px;	padding: 15px 35px 15px 15px;	font: normal normal normal 20px/100% Arial, Helvetica, sans-serif;}.homePinForm .segment textarea{	height: 100px;}	.homePinForm .segment .readonly{	color:#666;	font-style: italic;}.homePinForm .segment .inserted{	background-color: #CCCCCC;}.homePinForm .segment .valid{	background: #fff url(/x/img/icon-tick.jpg) no-repeat 415px 20px;}.homePinForm .segment .invalid{	background: #fff url(/x/img/icon-sadface.gif) no-repeat 415px 20px;}	/* (The URL should just show invalid styles when it has been confirmed as invalid)*/	.homePinForm .segment .invalid.validatePPURL{		background-image: none;	}	.homePinForm .segment .validatePPURL.confirmedInvalid{		background: #fff url(/x/img/icon-sadface.gif) no-repeat 415px 20px;	}.homePinForm .segment button{	border: none;	cursor:hand;	display:block;	float: left;}.homePinForm .segment button span{	visibility:hidden;}.homePinForm .segment button.butPreview,.homePinForm .segment button.butPreview.stateOn{	width:162px;	height:50px;	background: #fff url(/x/img/btn-preview-on.jpg) no-repeat top left;	margin-right: 10px;}.homePinForm .segment button.butPreview.stateOff{	background-image: url(/x/img/btn-preview-off.jpg);}.homePinForm .segment button.butShorten,.homePinForm .segment button.butShorten.stateFirst{	width:273px;	height:50px;	background: #fff url(/x/img/btn-shorten-my-link.jpg) no-repeat top left;}.homePinForm .segment button.butShorten.stateAnother{	background: #fff url(/x/img/btn-shorten-another-link.jpg) no-repeat top left;}/* FEEDBACK STATE */.homePinForm .successContainerTop,.homePinForm .successContainerBot{    color: #CCCCCC;    font-size: 18px;    padding: 15px;}.homePinForm .successContainerTop p,.homePinForm .successContainerBot p{     font-size: 18px;     margin-bottom: 15px;}.homePinForm .successContainerBot{    font-size: 18px;    padding-top: 30px;    padding-bottom: 0px;}.homePinForm .successContainerBot a{    color: #38CCFF;}.homePinForm .successContainerTop h3{    font-size: 32px;    color: #CCCCCC;}.homePinForm .successContainerTop h3 a{    color: #38CCFF;}.homePinForm .successContainerTop p{    color: #CCCCCC;}/* details */.homePinForm .successContainerBot p.details{    font-size: 14px;}.homePinForm .successContainerBot p.details span{    font-style: italic;}.loadingContainer{	text-align:center;	padding-top: 100px;}.loadingContainer h3{	text-align:center;	color: #fff;}.homePinForm .feedback{	color: #fff;	margin: 10px 0 10px 0;	padding: 0;}.homePinForm .feedback a{	color: #fff;}.fncReporterBlock{	border: 1px solid #EEE;	width: 445px;	padding: 5px 20px 5px 20px;	margin: 10px 0 10px 0;	visibility: hidden;	/* JS adjusts */}.fncReporterBlock a{	font-size: 11px;	color:#999;}.tipsBlock a.tips {    color: #FFFFFF;    background: url('/x/img/icon-tips.gif') top left no-repeat;    display: block;    margin: 0;    padding: 0 0 0 20px;    text-decoration: none;}.tipsBlock{    background: #000000;    padding: 0 20px 20px 20px;}/*-------------------------------------------------------------------*//*-------------------------------------------------------------------## FAQS/SUPPORT*/.faqs h2{	font-weight:bold;}.faqs .col{	width:360px;	padding: 0 20px;}.faqs .question{	border-bottom: 1px solid #cccccc;}.faqs .question h3{	font: normal bold normal 14px/120% Arial, Helvetica, sans-serif; color: #333333;	}	.faqs .question p{	color: #666666;	}.issues { font-size: 11px; clear:both; }.issues table {width: 100%;}.issues td { padding: 10px; border-bottom: #CCCCCC 1px solid; }.table-heading { font-size: 20px; color: #34ACD7; }.table-icon { margin-top: 10px; padding-right: 5px; }/*-------------------------------------------------------------------## TRENDS */.trends .col{	width:385px;}	.trends h3{		padding: 0 0 10px 0;		background: url('/x/img/sidebar-h3-bg.gif') 10% 100% no-repeat;	}    	.trends h3 span{		background: #333333;		display: block;		padding: 9px 0 9px 20px;    }        div.trends ul.pinLinks li{        list-style: none;        border-bottom: 1px solid #BFBFBF;        padding: 10px 0 10px 20px;        font: normal normal normal 14px/120% Arial, Helvetica, sans-serif;    }	/*-------------------------------------------------------------------## MY LINKS */.myLinks h3{	padding: 0 0 10px 0;	background: url('/x/img/sidebar-h3-bg.gif') 10% 100% no-repeat;	width: 400px;}	.myLinks h3 span{		background: #333333;		display: block;		padding: 9px 0 9px 20px;	}		.myLinks h3 span img{		margin-right: 20px;		display: block;		float:left;	}		.myLinks h3 span a{		color: #FFFFFF;		text-decoration: none;		font: normal normal normal 14px/100% Arial, Helvetica, sans-serif;		padding-top: 7px;		display: block;		float:right;		margin-right: 15px;	}			.myLinks h3 span a:hover{			text-decoration: underline;		}		.myLinks table{	width: 100%;}			.myLinks table tr{		border-top: 1px solid #CCCCCC;			}		.myLinks table tr.header{		border: none;	}		.myLinks table tr th{		text-transform: uppercase;		color: #666666;		font: normal normal normal 12px/120% Arial, Helvetica, sans-serif;		padding: 0 0 5px 20px;	}	.myLinks table tr td{		padding: 10px 0 5px 20px;	}		.myLinks table tr td.date{		padding-right: 10px;	}		.myLinks table tr td.date, .myLinks table tr td.clicks{		font: normal normal normal 20px/120% Arial, Helvetica, sans-serif;		}	.myLinks table tr td.clicks{		font-weight: bold;		width:100px;	}		.myLinks table tr td.link p{		margin: 0;		padding: 0;        color: #666;	}        .myLinks table tr td.link a{        text-decoration: none;    }        .myLinks table tr td.link a:hover{        text-decoration:underline;    }	.myLinks table tr td.link p em{		font-size: 12px;	}	.myLinks table tr td p.page,    .myLinks table tr td p.page a{		color: #333;	}			.myLinks table tr td p.url a{			color: #666;			text-decoration: none;		}	.myLinks table tr td p.url a:hover{		text-decoration: underline;	}/*-------------------------------------------------------------------## MESSAGE BOX SMALL */.messageBoxSmall{	display: block;	color: #fff;	padding: 20px 0 20px 80px;	background: #34ACD7 url('/x/img/msgbox-icon-info-blue.gif') 20px 20px no-repeat;	min-height: 50px;}	.messageBoxSmall.addFormOverlay{		margin-top: 100px;		background: #000 url('/x/img/msgbox-icon-info-black.gif') 20px 20px no-repeat;	}	.messageBoxSmall h2,	.messageBoxSmall h3,	.messageBoxSmall h4{		font-weight: bold;		color: #fff;		margin: 0;	}		.messageBoxSmall em{		font-style:normal;		font-weight:bold;	}/*-------------------------------------------------------------------## ERROR BOX */.errorBox{	display: block;	color: #fff;	padding: 40px 0 40px 170px;	background: #FF0000 url('/x/img/errbox-icon-sad-red.gif') 40px 40px no-repeat;	min-height: 90px;}.errorBox.blue{	background: #34ACD7 url('/x/img/errbox-icon-sad-blue.gif') 40px 40px no-repeat;}	.errorBox h2,	.errorBox h3,	.errorBox h4{		color: #fff;	}		.errorBox em{		font-style:normal;		font-weight:bold;	}/*-------------------------------------------------------------------## FOOTER */.blockFooter ul.primary{	float: left;	margin: 0 0 10px 20px;	padding: 0 20px 0px 0;	background: url('/x/img/footer-divider.gif') top right repeat-y;}	.blockFooter ul.primary.last{		background: none;	}	.blockFooter ul.primary h3{		font: normal bold normal 12px/100% Arial, Helvetica, sans-serif;		margin: 0 0 10px 0;	}		.blockFooter ul.primary li{		padding: 2px 0;	}		.blockFooter ul.primary li a{		text-decoration: none;		color: #333333;	}		.blockFooter ul.primary li a:hover{		text-decoration: underline;	}.blockFooter ul li{	list-style: none;}.blockFooter .lowerFooter{ 	border-top:1px solid #cccccc;	padding:10px 0 10px 10px;}.blockFooter ul.lower li{	float: left;	display: block;	list-style: none;	padding: 3px 10px 0px 0px;	height:18px;	font: normal normal normal 12px/120% Arial, Helvetica, sans-serif;	color: #333333;}	.blockFooter ul.lower li.last{		border: none;	}		.blockFooter ul.lower li.bookmark{		padding: 0;	}.blockFooter ul.lower li a, .blockFooter ul.lower li.last span{	float: left;	display: block;	color: #333333;	text-decoration:none;	padding: 0 0 0 10px;	border-left: 1px solid #333333;	}		.blockFooter ul.lower li.bookmark a{		padding:0;	}		.blockFooter ul.lower li a.image{		display: inline;		float: none;		border: none;	}		.blockFooter ul.lower li a:hover{		text-decoration: underline;	}        .blockFooter ul.lower li a.twitter{        background: url('/x/img/icon-follow-us-on-twitter.gif') 5px center no-repeat;        padding-left: 35px;            }    .blockFooter ul.lower li a.addthis_button{        background: url('/x/img/icon-share-bookmark.gif') 5px center  no-repeat;        padding-left: 37px;      }  /*-------------------------------------------------------------------## PAGINATION*/.pagination ul li{    margin: 0;    padding: 0 5px;    border-left: 1px solid #CCCCCC;} .pagination a.prev,.pagination a.next{    font: normal normal normal 1.1em/1em Verdana, Arial, sans-serif;}/*-------------------------------------------------------------------*//*MISC*/p.popup{    padding:0 20px 0 55px;    font-size: 13px;    line-height:130%;    color: #CCCCCC;}/*-------------------------------------------------------------------## LOAD ORDER - SEE JUSTMILK.JS AND NOSCRIPT.CSS HTML IN HEADER WHICH REVERSESTHIS *//* Stuff to reveal later */