@charset "utf-8";
/* CSS Document */

html, body, ul, ol, li, p, hi, h2, h3, h4, h5, h6, form, fieldset {
	margin:0;
	padding:0;
	border:0;
	
}

body {
	font:100.01% Arial, Helvetica, sans-serif;
	color:#666;
	background:#000;
	margin:10px;
	padding:0px;
	text-align:left;

}

#wrapper {
    width:780px;
    position: relative;
	/*float: left;*/
	margin:auto;
	background-color:#000;
}

/*TO STYLE MAIN TEMPLATE */

/*MAIN TEMPLATE - container to hold the logo's */
#mainlogo {
	width: 100%;
	float: left;
}

/*MAIN TEMPLATE - contentworx logo*/
#logo {
	width: 270px;
	float: left;
}

/*MAIN TEMPLETE - experience logo*/
#logo_2 {
	float: right;
	margin-top:33px;

}

/*MAIN TEMPLATE - navigation bar */
#nav_bar {
	width: 100%;
	float:left;
	margin-top: 35px;
	height: 20px;
}

/*MAIN TEMPLATE - to style home button*/
#home {
	font:110% Arial, Helvetica, sans-serif;
	float: left;
	padding-left:35px;
	padding-right:15px;
}

/*MAIN TEMPLATE - to style services, nextstep, clients, case, about us, contact us buttons*/
#services, #nextstep, #clients, #case, #aboutus, #contactus {
	font:110% Arial, Helvetica, sans-serif;
	float: left;
	padding-left: 16px;
	padding-right:16px;
}

/*MAIN TEMPLATE - to style nav bar links*/
#home a, #services a, #nextstep a, #clients a, #case a, #aboutus a, #contactus a {
	text-decoration:none;
	color:#FFF;
}

/*MAIN TEMPLATE - to style nav bar links on hover*/
#home a:hover, #services a:hover, #nextstep a:hover, #clients a:hover, #case a:hover, #aboutus a:hover, #contactus a:hover {
	color:#F00;
	
}

/*FOR INDEX HOME PAGE - to hold the text quote "the times is right..."  */
#quote_container {
	width: 690px;
	height:160px;
	float:left;
	padding-left: 35px;
	padding-bottom:10px;
	margin-top:60px;
	background:url(../assets/photos/clock.jpg) no-repeat 450px 10px; 
	font:90% Arial, Helvetica, sans-serif;
	color:#FFF;
	
}

/*FOR INDEX HOME PAGE - to style the text quote BOX "the times is right..."  */
#quote_text{
	width: 450px;
	float:left;
	margin-top:40px;
	padding-left:100px;
	
}

/*FOR INDEX HOME PAGE - to style the text "the times is right..."  */
h1 {
	font:normal 130% Arial, Helvetica, sans-serif;
	margin:0px;
	text-align:left;
	
}

/*FOR INDEX HOME PAGE - to style the "welcome text" box */
#welcome_text {
	width:300px;
	float:left;
	text-align:left;
	padding-left:10px;
	margin-top:20px;
}

/*FOR INDEX HOME PAGE - to style the "welcome" text */
h2 {
    font:normal 160% Arial, Helvetica, sans-serif;
	color:#FFF;
	margin:0px;	
}

/*FOR INDEX HOME PAGE - to style text container that holds the What is branded content etc...*/
#text_container {
	width:780px;
	float:left;
	margin-top:50px;
}

/*FOR INDEX HOME PAGE - to style the first heading "what is branded content?" text */
#heading_1 {
	width:190px;
	float:left;
	padding-left:10px;
	font:100% Arial, Helvetica, sans-serif;
	color: #F00;
	
}

/*FOR INDEX HOME PAGE - to style the second heading "why consider branded content? text */
#heading_2 {
	width:220px;
	float:left;
	padding-left:13px;
	padding-right:10px;
	font:100% Arial, Helvetica, sans-serif;
	color:#F00;	
}

/*FOR INDEX HOME PAGE - to style the third heading "how should you approach... text */
#heading_3 {
	width:300px;
	float:left;
	padding-left:20px;
	padding-right:10px;
	font:100% Arial, Helvetica, sans-serif;
	color:#F00;
}

/*FOR INDEX HOME PAGE - to style column 1 - first text under what is branded content  */
#column_1 {
	width:190px;
	float:left;
	padding-left:10px;
	margin-top:20px;
	font:90% Arial, Helvetica, sans-serif;
	color:#FFF;
}

/*FOR INDEX HOME PAGE - to style column 2 - second text under what is why consider branded content  */
#column_2 {
	width:230px;
	float:left;
	padding-left:13px;
	margin-top:20px;
	font:90% Arial, Helvetica, sans-serif;
	color:#FFF;
	
}

/*FOR INDEX HOME PAGE - to style column 3 - third text box under how should you approach...  */
#column_3 {
	width:310px;
	float:left;
	padding-left:20px;
	margin-top:20px;
	
}

/*FOR INDEX HOME PAGE - to style column 3 - the 5 rows with ticks third box under how should you approach...  */
#row {
	width: 270px;
	float:left;
	padding: 0px 0px 10px 25px;
	margin-bottom:10px;
	font:90% Arial, Helvetica, sans-serif;
	color:#FFF;
	background: url(../assets/images/small_tick.gif) no-repeat;
	
}

/*FOR INDEX HOME PAGE - to style the links container box  */
#links_container {
	width:770px;
	float:left;
	padding-left:10px;
	margin-top:100px;
	border-top: 1px #FFF solid;
	
	
}

/*FOR INDEX HOME PAGE - to style the links title 1 - "production"  */
#title_one {
	width:180px;
	float:left;
	padding-left:10px;
	padding-right:20px;
	margin-top:20px;
	font:120% Arial, Helvetica, sans-serif;
	color:#FFF;
}

/*FOR INDEX HOME PAGE - to style the links title 2 - "case studies"  */
#title_two {
	width:220px;
	float:left;
	margin-top:20px;
	padding-left:10px;
	padding-right:20px;
	font:120% Arial, Helvetica, sans-serif;
	color:#FFF;
}

/*FOR INDEX HOME PAGE - to style the links title 3 - "contact us"  */
#title_three {
	width:210px;
	float:left;
	padding-left:10px;
	margin-top:20px;
	font:120% Arial, Helvetica, sans-serif;
	color:#FFF;
}

/*FOR INDEX HOME PAGE - to style the link 1 text box  underneath "production"  */
#link_one {
	width:180px;
	height:80px;
	float:left;
	padding-left:10px;
	padding-right:20px;
	margin-top:30px;
	border-left:1px #F00 solid;
	font:90% Arial, Helvetica, sans-serif;
	color:#FFF;
	
}

/*FOR INDEX HOME PAGE - to style the link 1, link2, link3 - links (production, case studies, contact us)  */
#link_one a, #link_two a, #link_three a {
	color:#FFF;	
}

/*FOR INDEX HOME PAGE - to style the link 1, link2, link3 - links on hover (production, case studies, contact us)  */
#link_one a:hover, #link_two a:hover, #link_three a:hover {
	text-decoration:underline;
	color: #F00;
}

/*FOR INDEX HOME PAGE - to style the link 2 text box  underneath "case studies"  */
#link_two {
	width:220px;
	float:left;
	height: 80px;
	border-left: 1px #F00 solid;
	padding-left:10px;
	padding-right:20px;
	margin-top:30px;
	font:90% Arial, Helvetica, sans-serif;
	color:#FFF;
	
}

/*FOR INDEX HOME PAGE - to style the link 3 text box  underneath "contact us"  */
#link_three {
	width:230px;
	height:80px;
	float:left;
	padding-left:10px;
	margin-top:30px;
	border-left:1px #F00 solid;
	font:90% Arial, Helvetica, sans-serif;
	color:#FFF;
	
}


/*MAIN TEMPLATE - to style contentworx small logo*/
#contentworx_logo_small {
	width: 300px;
	float: left;
	padding-left: 300px;
	margin-top:40px;

}

/*MAIN TEMPLATE - to style copyright text*/
#copyright {
	width: 400px;
	float: left;
	padding-left:10px;
	margin-top:50px;
    font:70% Arial, Helvetica, sans-serif;	
	color:#FFF;
}

/*MAIN TEMPLATE - to style footer box*/
#footer {
	font:80% Arial, Helvetica, sans-serif;	
	width: 600px;
	float: left;
	margin-top:10px;
	padding-left:10px;
	padding-bottom:10px;
}

/*MAIN TEMPLATE - to style footer home button */
#footer_home {
	padding-right:10px;
	float: left;

}

/*MAIN TEMPLATE - to style footer rest of navigation buttons */
#footer_services, #footer_nextstep, #footer_client, #footer_case, #footer_aboutus, #footer_contactus {
	padding-left: 10px;
	padding-right:10px;
	float: left;
}

/*MAIN TEMPLATE - to style the footer navigation button links */
#footer_home a, #footer_services a, #footer_nextstep a, #footer_client a, #footer_case a, #footer_aboutus a, #footer_contactus a {
	text-decoration:none;
	color:#FFF;	
}

/*MAIN TEMPLATE - to style footer navigation button links on hover */
#footer_home a:hover, #footer_services a:hover, #footer_nextstep a:hover, #footer_client a:hover, #footer_case a:hover, #footer_aboutus a:hover, #footer_contactus a:hover {
	color:#F00;
}