/* @override 
	http://localhost/ccl/stylesheets/mainlayout.css*/

/* Styling for Clausen Communications
September 2009 */

/* Reset from Yahoo Grids */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style: none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

/* @fontface fonts */


/* first for IE 6/7/8 */
@font-face {
  font-family: DINWebRegular;
  src: url(DINWeb.eot);
}

/* then for Mozilla browsers -> Firefox */
@font-face {
  font-family: DINWebRegular;
  src: url(DINWeb.woff) format('woff');
}

/* go on with normal style definitions */
body { 
  font-family: DINWebRegular, sans-serif;
}

/* first for IE 6/7/8 */
@font-face {
  font-family: DINWebBold;
  src: url(DINWeb-Bold.eot);
}

/* then for Mozilla browsers -> Firefox */
@font-face {
  font-family: DINWebBold;
  src: url(DINWeb-Bold.woff) format('woff');
}

/* go on with normal style definitions */
body { 
  font-family: DINWebBold, sans-serif;
}

/* first for IE 6/7/8 */
@font-face {
  font-family: MetaSerifWeb-Book;
  src: url(MetaSerifWeb-Book.eot);
}

/* then for Mozilla browsers -> Firefox */
@font-face {
  font-family: MetaSerifWeb-Book;
  src: url(MetaSerifWeb-Book.woff) format('woff');
}

/* go on with normal style definitions */
body { 
  font-family: MetaSerifWeb-Book, serif;
}

/* General styling */

body {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 12px;
	color: #303030;
	line-height: 1.2em;
	background-color: #303030;
}

p {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 14px;
	color: #999999;
	line-height: 1.2em;
	
}

p.mid-grey {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 12px;
	color: #666666;
	line-height: 1.2em;
	text-align: right;
}

p.dark-grey {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 15px;
	color: #666666;
	line-height: 1.2em;
	text-align: left;
}

p.grey {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 14px;
	color: #303030;
	line-height: 1.2em;	
	padding-top: .5em;
}

p.body {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 12px;
	color: #999999;
	line-height: 1.3em;
	padding-top: 2px;
}

p.body-grey {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 12px;
	color: #303030;
	line-height: 1.3em;	
}

p.green {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 18px;
	color: #849f4e;
		line-height: 1.2em;
}

p.small {
	font-size: 90%;
	color: #999999;
}

p.required {
	font-size: 75%;
	color: #303030;
}

p.link	{
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 100%;
	line-height: 1.1em;
	color: #849f4e;
}


h1 {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 200%;
	color: #303030;
	font-weight: normal;
	line-height: 1.0em;
}


h2 {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 150%;
	color: #999999;
	font-weight: normal;
	line-height: 1.3em;
	text-align: right;
}

#title-container	{
	float: right;
	}

h3 {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 150%;
	color: #999999;
	font-weight: normal;
	line-height: 1.7em;
	text-align: left;
	}

strong {
	font-weight: bold;
}

/* Layout styling */

#wrapper {
	width: 870px;
	margin: 0px auto;
	margin-top: 20px;
	background-color: #303030;
}

#wrapper-pbs {
	width: 870px;
	margin: 0px auto;
	margin-top: 20px;
	background-color: #303030;

}

#header {
	width: 870px;
	height: 213px;
}

#header-left {
	float: left;
	width: 730px;
	height: 213px;
}

#header-left-portfolio {
	float: left;
	height: 213px;
}


#header-right {
	float: right;
	width: 122px;
	height: 172px;
	margin-top: 20px;
	border-left: .1em dotted #999999;
}

#header-left-logo {
	width: 75px;
	height: 213px;
	float: left;
}

#header-left-logo a{
	display: block;
	height: 213px;
	text-decoration: none;
	background: url(../assets/ccl_logo.gif) no-repeat bottom right;
}

#header span {
	visibility: hidden;
}

#header-left-nav	{
	float:left;
	margin-right: 0px;
}

#col-right-what	{
	float: right;
	width: 450px;
	height: 195px;
}

#intro {
	margin-top: 20px;
	padding-right: 15px;
}

p.intro	{
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 150%;
	color: #999999;
	font-weight: normal;
	line-height: 1.3em;
	text-align: right;
}

#col-right-how	{
	float: right;
	width: 450px;
	height: 195px;
}

#col-right-who	{
	float: right;
	width: 450px;
	height: 195px;
}


#col-right-contact	{
	float: right;
	width: 450px;
	height: 195px;
}


#col-right-cont {
	height: 175px;
	float: right;
	margin-top: 20px;
	border-left: .1em dotted #999999;
}

#col-right-right {
	margin-bottom: 21px;
	padding-left: 20px;
	padding-right: 17px;
	float: right;
}

#main-content	{
	clear: left;
	float:left;
	width: 870px;
	margin-top: 5px;
	margin-bottom: 10px;
}

#main-content-who	{
	height: 343px;
	padding-right: 125px;
	padding-left: 250px;	
	background: url(../assets/who.jpg) no-repeat;
}

#main-content-how	{
	height: 343px;
	padding-right: 125px;
	padding-left: 250px;
	background: url(../assets/how.jpg) no-repeat;
}

#main-content-contact	{
	height: 343px;
	padding-right: 125px;
	padding-left: 360px;
	background: url(../assets/contact.jpg) no-repeat;
}

#maincontent-left-how	{
	float: left;
	
}

#maincontent-text	{
	padding-top: 30px;
	padding-right: 55px;
	padding-bottom: 20px;
	padding-left: 50px;
}

#maincontent-text-contact	{
	padding-top: 28px;
	padding-right: 25px;
	padding-bottom: 20px;
	padding-left: 50px;
}

#maincontent-left-contact	{
	float: left;
}

#maincontent-left-who	{
	float: left;
}

#maincontent-left-form	{
	float: left;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 20px;
	padding-left: 20px;
}


#maincontent-left	{
	float: left;
	width: 180px;
	padding-top: 10px;
}

#maincontent-right	{
	float: left;
	width: 180px;
	padding-top: 10px;
	padding-left: 25px;
	}

#maincontent #right.work {
	margin-left: 75px;
	margin-right: 0px;
	padding-top: 40px;
	padding-right: 0px;

}


/* Work Pages */

#col-right-work	{
	padding-top: 110px;
	padding-right: 10px;
	margin-left: 300px;
}

#col-right-outer-left	{
	float: left;
	width: 360px;
}

#col-right-inner-left	{
	padding-left: 50px;
	padding-top: 110px;

	}

#col-right-inner-right	{
	float: right;
	width: 190px;
	margin-right: 0px;
	margin-top: 110px;
	padding-top: 65px;
}

/* Case Study Pages */

#maincontent-feature	{
	margin-left: 0px;
	clear: left;
}

#main-col	{
	float: left;
	padding-right: 40px;
	padding-bottom: 20px;
	padding-left: 0px;
	margin-bottom: 20px;
}

#col-right-feature-outer	{
	width: 425px;
	height:	213px;
	float: left;
}

#col-right-feature	{
	margin-top: 115px;
	padding-top: 30px;
	padding-left: 50px;
	padding-right: 20px;
}

#main-col-left {
	float: left;
	width: 260px;
	height: auto;
	margin-top: 30px;
	
}

#main-col-right	{
	width: 430px;
	margin-top: 30px;
	margin-bottom: 10px;
	margin-left: 280px;
	padding-left: 20px;
	border-left:.1em dotted #999999;
}

#main-col-left #right1.work {
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 5px;
	padding-right: 0px;
}



/* Form styling */

#right_form {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;

}

#right_form fieldset dl dd input, #right_form form fieldset dl dd textarea {
	border: none;
	line-height: 1.5em;
	background-color: #f2f2f2;
	margin-bottom: 5px;
	padding-left: 2px;
	width: 150px;
}

#right_form fieldset dl dt {
	line-height: 1.5em
}

#right_form fieldset div.button input {
	margin-top: 5px;
	float: right;
}

#right_form fieldset textarea{
	width: 150px;
}

span.error {
	color: red;
	font-size: 75%;
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
}


/* Footer */

#footer	{
	width: 870px;
	height: auto;
	margin-top: 20px;
	background-position: 0 bottom;
}

#footer-left	{
	float: left;
	clear: left;
	padding-top: 15px;
	text-decoration: none;
}

#footer-left-centre	{
	float: left;
	margin-left: 90px;
	text-decoration: none;
	padding-top: 37px;
}

#footer-right	{
	float: right;
	margin-top: 15px;
	padding-top: 5px;
	text-align: right;

}

#bottom	{
	width: 870px;
	float: left;
	border-top: .1em dotted #999999;
}

#bottom-base	{
	width: 870px;
	float: left;
}

#footer-base-left	{
	float: left;
	clear: left;
	margin-top: 15px;
	padding: 5px 0 0 0;
}

#footer-base-right	{
	float: right;
	margin-top: 15px;
	padding: 8px 0px;
}

#footer-top.top	{
	clear: left;
	float: left;
	width: 620px;
	margin-top: 5px;
	margin-bottom: 25px;

}

#footer #ul.left {
	}
	
#footer #ul.right	{
	text-align: right;
}

ul li.footer	{
	color: #849f4e;
	display: inline;
	padding: 5px 5px 0 0;
}

#footer span {
	visibility: hidden;
}

/* Table styling */

#work-content {
	width: 867px;
	height: auto;
	}
	
#work-content-home {
	width: 867px;
	height: auto;
	}

#right table {
	margin-top: 0px;
}

#right table td{
	padding-right: 1px;
	padding-bottom: 1px;
}

#right2 table td{
	padding-right: 7px;
	padding-bottom: 1px;
}


#right table td.tablebottom{
	padding-right: 1px;
	padding-bottom: 0px;
}


/* Navbar styling */

#col-left {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 150%;
	color: #849f4e;
	text-align: right;
	margin-left: 105px;
	padding-top: 110px;
	padding-right: 15px;
}

#col-left ul {
	 list-style: none;
	 margin-top: 0px;
}

#col-left li {
	padding-bottom: .4em;
}

#col-left li.selected {
	color: #849f4e;
}
		
#col-left li.selected a{
	color: #849f4e;
	text-decoration: none;
}

#col-left li.unselected a{
	color: #666666;
	text-decoration: none;	
}

#col-left li.unselected a:hover{
	color: #999999;
	text-decoration: none;	
}

#col-left li a:hover{
	color: #849f4e;
	text-decoration: none;	
}

#col-right-right ul {
	 	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size: 100%;
	color: #999999;
	text-align: left;
}

#col-right-right li {
	line-height: 1.6em;
	
}

#col-right-right li.selected {
	color: #849f4e;
}
		
#col-right-right li.selected a{
	color: #849f4e;
	text-decoration: none;
}

#col-right-right li.unselected a{
	color: #666666;
	text-decoration: none;	
}

#col-right-right li.unselected a:hover{
	color: #999999;
	text-decoration: none;	
}

#col-right-right li a:hover{
	color: #849f4e;
	text-decoration: none;	
}


#right ul {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;	
	font-size: 100%;
	font-weight: normal;
	line-height: 1.6em;	
	margin-left: 15px;
}

#right li a{
	color: #849f4e;
	text-decoration: none;
}

#right li a:hover{
	color: #999999;
	text-decoration: none;	
}
         
#right ul.navbar {
	margin-left: 0px;
	font-size: 100%;

}
#right li#navleft, #right li#navright {
	display: inline;
	padding-bottom: 0px;
}

#right  li#navindex {
	display: inline;
	padding-left: 20px;
	padding-right: 15px;
	background: url(../assets/work/index-arrow.gif) no-repeat left;

}

#right  li#navleft {
	display: inline;
	padding-left: 12px;
	padding-right: 16px;
	background: url(../assets/work/backGreen_arrow.gif) no-repeat left;

}

#right  li#navright {
	display: inline;
	padding-right: 12px;
	background: url(../assets/work/forwardGreen_arrow.gif) no-repeat right;

}