/*  Information..
-------------------------------------------------------------------------------------------------------------------*/
/*  Styles for Codename MoxBox
    General styles for all browsers
    Created by Mez Hopking
    25th January 2008, Revised 14th October 2008
------------------------------------------------------------------------------------------------------------------*/

/*  Basic style guide information - Explains the parent classes / IDs only. For more customisation, you're on your 
	own :)
------------------------------------------------------------------------------------------------------------------

	#clientSide - (as the body: body#clientSide) affects all client side styles.
	
	#container - holds all elements (apart from the pop-up dialog boxes).
	
	#masthead - controls the top block / header (where the site tools and the logo sit).
	
	#siteTools - controls the site tools (logout | help | etc).
	
	#logo - holds the logo, which is based on a H1 with a class of hideText.
	
	#content - holds all the pages' content (not including footer and dialog boxes)
	
	#contextualBoxContainer - holds #contextualBox, #breadcrumbs and #filterView (status messages, location on site and project filtration respectively)
	
	#mainCol - is the main large column on the left. When this div has the class .withSubCol attached to it the main col will be the size to accomodate the sub column (project navigation). With the class of .fullWidth attached, the the mainCol will cover the whole page (as in the single project view).
	
	.section.projectThumbs - is the container that holds the project thumnail view (as in the client dashboard view), with .section being the general site wide style that controls the various sections.
	
	ul#projectList - controls the list of project thumbnails (the client dashboard view).
	
	ul#projectTools - is a the list that conrols the newComments / newViews / history / delete / signedOff icons. It's nested inside the prvious ID.
	
	#subCol - is the containing div for the right hand side sub column. It holds the project navigation.
	
	.section#subNavigation - holds the sub navigation (project nav) UL.
	
	#footer - is the containing div that holds the footer UL. */

/*  Foundation layout & reset styles
------------------------------------------------------------------------------------------------------------------*/
* html,p,h1,h2,h3,h4,h5,h6,ul,ol,li,blocckquote,td,tr,table,div,dd,dt,a,input,text,button,form,span
	{
	margin: 0px;
	padding: 0px;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

body {
	margin: 0 auto;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.2em;
	color: #4f4f4f;
	background: url(/images/layout/) #4f4f4f top center repeat-y;
}

#container {
	margin: 0px auto;
	padding: 0px;
	position: relative;
	width: 960px;
	background-color: #fff;
}
/*  Header Specific
------------------------------------------------------------------------------------------------------------------*/
#masthead {
	width: 960px;
	min-height: 119px;
	background: url(/images/layout/bgMasthead.png) top left no-repeat;
	position: relative;
	float: left;
	padding: 0 0 14px 0;
}

#clientSide #masthead {
	background-image: url(/images/layout/bgMastheadClient.png);
}

#logo {
	height: 48px;
	width: 160px;
	background: url(/images/layout/logo.png) top left no-repeat !important;
	background-image: url(/images/layout/logo.gif);
	position: absolute;
	top: 12px;
	left: 105px;
}

.hideText {
	text-indent: -100000px;
}
/*  Login and Landing Specific
------------------------------------------------------------------------------------------------------------------*/
body#login,body#landing {
	background-image: none;
	background-color: #FFF;
	width: 470px;
}

#login #container,#landing #container {
	width: 470px;
}

#login #content,#landing #container {
	width: 470px;
	margin-top: 150px;
}

#login #siteAddress {
	background-color: #eee;
	border-top: 2px solid #48addf;
	border-bottom: 2px solid #48addf;
	margin: 10px 0;
	padding: 8px 0px;
}

#login #siteAddress p {
	font-size: 85%;
	padding: 0 0 5px 0;
}

#login #siteAddress h3 {
	font-size: 90%;
	color: #000;
	padding: 0 0 2px 0;
}

#loginBox #siteAddress label {
	font-weight: bold;
	color: #e27500;
}

#loginBox #siteAddress .textFieldSml {
	width: 145px;
}

#login p.lostDetails {
	text-align: center;
	width: 100%;
	font-size: 80%;
	float: left;
}

#login p.lostDetails a {
	color: #db2424;
}

#login p.lostDetails a:hover {
	color: #48addf;
}

#loginError {
	width: 470px;
	float: left;
	position: relative;
	background: url(/images/layout/bgLoginErrorTop.png) top left no-repeat;
	padding: 15px 20px 5px 0;
	margin: 0 0 37px 0;
}

#loginError .close {
	width: 470px;
	height: 17px;
	background: url(/images/layout/bgLoginErrorBot.png) bottom left
		no-repeat;
	margin: 0 0 -22px 0;
}

#loginError p {
	padding: 0px 20px 0 55px;
	font-size: 85%;
}

#loginSuccess {
	width: 470px;
	float: left;
	position: relative;
	background: url(/images/layout/bgLoginSuccessTop.png) top left no-repeat;
	padding: 15px 20px 5px 0;
	margin: 0 0 37px 0;
}

#loginSuccess .close {
	width: 470px;
	height: 17px;
	background: url(/images/layout/bgLoginSuccessBot.png) bottom left
		no-repeat;
	margin: 0 0 -22px 0;
}

#loginSuccess p {
	padding: 5px 20px 5px 55px;
	font-size: 85%;
}

#loginBox {
	width: 470px;
	position: relative;
	float: left;
	background: url(../images/login/layout/bgLoginBoxTop.png) top left
		no-repeat;
	text-align: center;
	padding: 22px 0 0 0;
	margin: 0 0 10px 0;
}

#landingBox {
	width: 310px;
	position: relative;
	float: left;
	background: url(/images/layout/bgLandingTop.png) top left no-repeat;
	text-align: left;
	padding: 60px 80px 0 80px;
	margin: 0 0 10px 0;
}

#landingBox .close {
	width: 470px;
	height: 76px;
	position: relative;
	float: left;
	background: url(/images/layout/bgLandingBot.png) bottom left no-repeat;
	margin: 0 0 -60px -80px;
}

#landingBox .logo {
	margin: 0 0 30px 0;
}

#loginBox form {
	padding: 0 75px;
	text-align: left;
}

#loginBox .close {
	width: 470px;
	height: 79px;
	position: relative;
	float: left;
	background: url(../images/login/layout/bgLoginBoxBot.png) bottom left
		no-repeat;
}

#loginBox h2 {
	color: #949595;
	font-size: 14px;
}

#loginBox img {
	margin: 40px 0 0 0;
}

#loginBox .textFieldLogin {
	width: 308px;
	height: 25px;
	font-size: 16px;
	margin: 1px 0 10px 0;
}

#landingBox .textFieldLogin {
	width: 308px;
	margin: 1px 0 10px 0;
}

#loginBox #loginPass {
	margin: 0 0 30px 0;
}

#loginBox label,#landingBox label {
	font-size: 14px;
}

#landingBox ul {
	clear: both;
	padding: 10px 0 0px 0;
}

#landingBox li.headscapeProduct {
	font-size: 90%;
	font-weight: bold;
}

#landingBox .headscapeLogo {
	margin: 2px 0 0 0;
}

#landingBox li.poweredBy {
	font-size: 80%;
}

#landingBox li.poweredBy a {
	color: #4f4f4f;
}

#landingBox li.poweredBy a:hover {
	color: #48addf;
}

#landingBox img {
	border: none;
}

#landingBox .feeds ul {
	padding: 0px;
	margin: -37px -58px 0 0;
	background: none;
	float: right;
}

#landingBox .feeds li {
	padding: 0 0 0 5px;
	display: inline;
	float: right
}

#noLogin {
	float: left;
	position: absolute;
	left: -4000px;
}

div.MBbuttonLogin {
	text-align: right;
	width: 308px;
}

div.MBbuttonLogin input {
	border: 1px solid #7F9DB9;
	font-size: 14px;
	font-weight: bold;
	background-color: #949595;
	color: #FFF;
}

div.MBbuttonLogin a {
	color: #000;
}

div.MBbuttonLogin a:hover {
	text-decoration: underline;
}