/*

	--------------------------
	 Bin the Bin - default.css
	 0.0003
	--------------------------

	- Root
	- Accessibility
	- Header
		> primary nav
		> secondary nav
		> quotes
	- Footer

*/

@import url(reset.css);
@import url(content.css);

/**
 * Root *******************************************************************************************************************
 */

html, body {
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	background:#202020 url(/css/img/body-background.png) top left repeat-x;
}

a {	text-decoration:none; }

/**
 * Accessibility ***********************************************************************************************************
 */

.hidden { position:absolute; left:-9999px; }


/**
 * Header ******************************************************************************************************************
 */

#header {
	position:relative;
	margin:0 auto 0px;
	width:990px; height:339px;
	background:#66ac4a url(/css/img/header-background.png) top left repeat-x;
}


#header-meta { position:absolute; top:0px; left:30px; width:300px; height:320px; }

#header-meta a {
	position:absolute;
	display:block;
	padding:150px 0px 0px 0px;
	width:290px; height:164px;
	color:#000;
	font-weight:bold;
	font-size:24px;
	line-height:normal;
	letter-spacing:-0.1em;
	text-align:center;
	overflow:hidden;
	/* background-color:#ffdd01; */
}

#header-meta a span {
	position:absolute;
	width:100%; height:100%;
	top:0px; left:0px;
	background:url(/css/img/binthebin-logo-hover-256.png) 0px 0px no-repeat;
	cursor:pointer;
}

#header-meta a:hover { text-decoration:underline; background-color:#fffa67; }
#header-meta a span:hover {	background-position:0px -315px; }


/* Primary Nav ----------------------------------- */

#primary-nav {
	position:absolute;
	top:105px; right:260px;
	padding-right:30px;
	width:340px;
	border-right:1px solid #4a7e34;
}

#primary-nav li {
	float:right;
	padding:3px;
	text-align:right;
	border-bottom:1px solid #4a7e34;
}

#primary-nav li.last { border-bottom:none; }

#primary-nav li a {
	display:block;
	padding:7px 15px 7px 7px;
	width:326px;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	background:url(/css/img/nav-arrows.png) right 12px no-repeat;
}

#primary-nav li a:hover { color:#f3e614; background:url(/css/img/nav-arrows.png) right -18px no-repeat; }

#binthebin-co-uk-home a#nav-home,
#binthebin-co-uk-what-is-bin-the-bin a#nav-what-is-bin-the-bin,
#binthebin-co-uk-how-it-works a#nav-how-it-works,
#binthebin-co-uk-range-of-bins a#nav-range-of-bins,
#binthebin-co-uk-marketing a#nav-marketing-material {
	color:#2e4a2a;
	background:url(/css/img/nav-arrows.png) right -47px no-repeat;
	cursor:default;
}


/* Secondary Nav --------------------------------- */

#secondary-nav { float:right; padding:22px 20px 0px 0px; background-color:#303030; }
#secondary-nav li {	float:left;	padding:2px 10px 2px 10px; border-right:1px solid #a2a2a2; }
#secondary-nav li.last { border-right:none; }

#secondary-nav li a {
	display:block;
	padding:2px 0px 2px 18px;
	font-size:11px;
	color:#a2a2a2;
	background-position:0px 0px;
	background-repeat:no-repeat;
}

#secondary-nav li a:hover {	color:#7acb40; text-decoration:underline; background-position:0px -30px; }
#sec-nav-home {	background-image:url(/css/img/secondary-nav-home.png); }
#sec-nav-contact-us { background-image:url(/css/img/secondary-nav-contact-us.png); }
#sec-nav-site-map {	background-image:url(/css/img/secondary-nav-site-map.png); }
#sec-nav-london-recycling {	background-image:url(/css/img/secondary-nav-london-recycling.png); }


/* Quotes ---------------------------------------- */

#header-content blockquote {
	position:absolute;
	top:130px; right:30px;
	padding:10px 10px 0px 10px;
	width:180px; height:170px;
	background:url(/css/img/quote-open.png) top left no-repeat;
}

#header-content blockquote p {
	padding:0px 0px 0px 20px;
	font-size:14px;
	/* font-weight:bold; */
	color:#f2dd59;
	line-height:1.6em;
}

#header-content blockquote p a {
	display:block;
	padding-top:40px;
	color:#fff;
	font-weight:bold;
	text-align:right;
	background:url(/css/img/quote-close.png) right top no-repeat;
}

#header-content blockquote p a:hover {
	color:#f8f01a;
	text-decoration:underline;
}

/* #s7 { width: 230px; height: 230px; border: 1px solid #ddd; background-color: #eee; }
#s7 div { width: 200px; height: 200px; padding: 15px; color: #333; text-align: left; font-size: 16px; overflow: hidden } */

#messages { width:200px; height:200px; position:absolute; top:110px; right:30px; overflow:hidden; }
#messages div { width:200px; height:200px; overflow:hidden; }


/**
 * Footer ******************************************************************************************************************
 */

#footer { width:100%; height:120px;	background:#202020 url(/css/img/footer-background.png) top left repeat-x; }

#footer-content { margin:0 auto 0px; padding:20px; width:950px;	font-size:11px;	color:#aaa; }

#legal { float:left; font-weight:bold; }
#resources { float:right; }

#legal li,
#resources li {	float:left;	padding:3px 6px 3px 6px; border-right:1px solid #aaa; }

#legal li a { font-size:11px; color:#ccc; }
#legal li a:hover { color:#9ccf1b; text-decoration:underline; }

#legal li.last,
#resources li.last { border-right:none; }
#resources li a { display:block; font-size:11px; color:#ccc; }
#resources li a:hover {	color:#9ccf1b; text-decoration:underline; }



/**
 * Video Items *********************************************************************************************************
 */

#main-content-wide { overflow:auto; }

.video-item {
	float:left;
	display:inline;
	margin:20px 20px 20px 20px;
	padding:24px;
	width:302px; height:252px;
	background:url(/css/img/video-background.png) top left no-repeat;
}

.video-item img { border:1px solid #000; }
.video-item a {	font-size:11px;	font-weight:bold; color:#fff!important; text-decoration:none!important; }
.video-item ul { position:relative;	margin-top:8px; width:302px; }
.video-item li.meta { width:250px; font-size:10px; color:#ccc; }	

.video-item li.button { position:absolute; top:4px; right:45px; }

.video-item li.button a {
	position:absolute;
	display:block;
	padding-top:5px;
	width:45px; height:40px;
	line-height:normal;
	text-align:center;
	overflow:hidden;
}

.video-item li.button a span {
	position:absolute;
	width:100%; height:100%;
	top:0px; left:0px;
	background:url(/css/img/play-button.png) 0px 0px no-repeat;
	cursor:pointer;
}

.video-item li.button a span:hover { background-position:0px -45px; }