@import url(layout.css);
@import url(pages.css);
@import url(elements.css);
@import url(framework.css);

html{overflow-y:scroll;}

body{margin:0; padding:0; font-size:14px; color:#919191; background-color:#ffffff;}
body.boxed{color:#919191; background-color:#ffffff;}

.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{margin:0; padding:0; list-style:none;}
.hidden{display:none;}

.clear{display:block; clear:both;}
.clear:after{display:block; visibility:hidden; height:0; clear:both; font-size:0; content:"";}

a{outline:none; text-decoration:none;}

.fl_left{float:left;}
.fl_right{float:right;}

img{width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #d40000; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}

/*----------------------------------------------HTML 5 Overrides-------------------------------------*/

address, article, aside, figcaption, figure, footer, header, hgroup, nav, section{display:block; margin:0; padding:0;}



/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word;}

.row1, .row1 a{color:#C0BAB6; background-color:#ffffff;}
.row2{color:#919191; background-color:#f5f5f5;}
.row3{color:#666666; background-color:#FFFFFF;}
.row3 a{color:#ffffff; background-color:#d40000;}
.row4, .row4 a{color:#fff; background-color:#d40000;}

/*----------------------------------------------Generalise-------------------------------------*/

body{font-family:Arial, Helvetica, sans-serif;}

h3, h4, h6{font-family: Arial, Helvetica, sans-serif; font-weight:normal; line-height:normal; text-transform:capitalize;}
h1{
	font-size: 16px;
	font-family: "Arial Black", Helvetica, Arial, sans-serif;
	font-weight: normal;
	line-height: normal;
	text-transform: capitalize;
	letter-spacing: 0.1em;
}

h2{
	font-size:11px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	line-height: normal;
	text-transform: capitalize;
	letter-spacing: 0.1em;
}

h5{
	font-size:10px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	line-height: normal;

}



address{margin:10px 0; font-style:normal;}

form, fieldset, legend{margin:0; padding:0; border:none;}
legend{display:none;}

nav ul{margin:0; padding:0; list-style:none;}


#header, #topnav, #container, #footer, #copyright{margin:0 auto;}

/*----------------------------------------------Header-------------------------------------*/

#header{padding:15px 0;}

#header hgroup{display:block; float:left; width:auto; clear:right;}
#header hgroup h1, #header hgroup h2, #header hgroup h3{margin:0; font-weight:normal; text-transform:none;}
#header hgroup h1{font-size:2em;}
#header hgroup h2{font-size:1em;}
#header hgroup h3{font-size:0.9em; color: #09F;}

#header #header-contact{display:block; float:right; width:auto; clear:right; font-family: Helvetica, sans-serif; font-size:11px; color:#666;}
#header #header-contact ul{margin-top:8px;}
#header #header-contact li{display:inline; margin:0 0 0 15px; padding:0 0 0 15px; border-left:1px solid #C0BAB6;}
#header #header-contact li:first-child{margin:0; padding:0; border:none;}

#header #header-info{display:block; float:right; width:auto; clear:right;}
#header #header-info ul{
	margin-top: 0px;
	margin-left: 0px;
	color:#666;
}
#header #header-info li{display:block; margin:0 0 0 0px; padding:0px 0px 2px 0px;}
#header #header-info li a{color:#666;}
#header #header-info li:first-child{margin:0 0 0 0px; padding:0; border:none;}
#header #header-info ul:last-child {margin:0px 0px 0px 230px; float:left;}
#header #header-info li:last-child{margin:0px; color:#666; padding:0px 0px 5px 0px; border-bottom:1px dashed #C0BAB6;}


#header #header-info h3{color:#09F; padding:0 0 5 0px; border-bottom:1px dashed #C0BAB6;}



/*----------------------------------------------Content Area-------------------------------------*/

#container{padding:30px 0; clear:both; font-size:1em; line-height:1.4em;}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6{margin:0 0 30px 0; padding:0; font-size:1.8em;}
#container section{margin-bottom:70px;}
#container section.last{margin-bottom:0;}


/* Sidebars */

.sidebar aside{line-height:1.2em;}
.sidebar aside h2{margin-bottom:10px; padding-bottom:8px; border-bottom:5px solid #E8E8E8; font-size:1.4em;}
.sidebar aside ul.nostart li{margin-top:20px;}

/*----------------------------------------------Footer-------------------------------------*/

#footer{padding:30px 0; clear:both; font-size:1em; background-color: #d40000;}
#footer p{margin:0; padding:0px 30px 0px 30px;}

#footer ul{
	display:block; 
	float:left; 
	width:auto; 
	clear:right;
	margin-top: 0px;
	margin-right: 120px;
	color:#fff;
}
#footer li{display:block; margin:0px 10px 0px 20px; padding:5px 0px 2px 0px;}
#footer li a{color:#ffffff;}
#footer h1{color:#fff; margin:0px 10px 0px 20px; padding:0px 0px 5px 0px; border-bottom:1px dashed #fff;}



/*----------------------------------------------------------------------------------------*/
/*-----------------------------------------Navigation-------------------------------------*/
/*----------------------------------------------------------------------------------------*/

/* Top Navigation */

#topnav{padding:0; color:#000000; background-color:#f5f5f5; clear:both; word-wrap:normal; white-space:nowrap; font-family: Helvetica, sans-serif; font-size:14px;
border-top:1px dashed #d40000;}

#topnav ul{padding:0; list-style:none; text-transform:uppercase; font-size:14px;}
#topnav ul ul{z-index:9999; position:absolute; width:190px; text-transform:none;}
#topnav ul ul ul, #topnav ul ul ul ul{left:190px; top:0;}
#topnav ul:first-child li:last-child > ul{right:0;}
#topnav ul:first-child > li:last-child li > ul{left:-190px;}
#topnav li{position:relative; display:block; float:left; margin:0 30px 0 0; padding:0; border-bottom:2px solid #d40000;}
#topnav li:first-child{}
#topnav ul:first-child li:last-child{margin-right:0;}
#topnav li li{width:100%; margin:0;}
#topnav li a{display:block; padding:20px 0;}
#topnav li li a{display:block; margin:0; padding:10px 15px;}
#topnav ul ul{display:none;}
#topnav ul li:hover > ul{display:block;}
#topnav a{color:#000000; background: #f5f5f5; opacity: .8; filter:Alpha(Opacity=80);font-weight:normal;}
#topnav li li a, #topnav li.active li a{color:#d40000; font-weight:normal;}
#topnav a:hover{color:#ffffff; background-color:#d40000}
#topnav li.active a{color:#000000;}
#topnav li.active a:hover{color:#ffffff;}
#topnav ul li li:hover > a{color:#000000; border-bottom:1px dashed #d40000; border-top:1px dashed #d40000;}
#topnav li a.drop, #topnav li.active a.drop{padding-left:15px; background-position:5px center; background-repeat:no-repeat;}

/* Call To Action - Best used as a full width banner */

.calltoaction{display:block; padding:30px; text-transform:uppercase; font-size:12px; color:#000000; background-color:#f0f0f0;}
.calltoaction div{margin-bottom:20px;}
#container .calltoaction h1{margin:0 0 18px 0; padding:0; font-size:2.5em; text-transform:uppercase;  text-align:left; color:#000000;}
#container .calltoaction h2{margin:0 0 15px 0; padding:0; font-size:1.4em; color:#d40000; text-transform:uppercase;  text-align:left;}

.calltoaction p{margin:0; padding:0; font-size:1.4em; line-height:1.5em; text-transform:none;}
.calltoaction .button{display:block; text-align:center; line-height:1.4em;}




/* Lists - For ul + ol */

.list{margin:10px 0; padding:0; list-style-position:inside;}
.list.indent{margin-left:20px;}
.list li{margin:6px 0 0 0; padding:0;}
.list li:first-child{margin:0;}
.list li > ul, .list li > ol{margin:8px 0 8px 0px;}

.list.disc{list-style-type:disc;}
.list.roman{list-style-type:upper-roman;}

.list.none, .list.block, .list.tick, .list.arrow{list-style-type:none;}
.list.block li > ul, .list.block li > ol{padding:0 0 0 0px; list-style:none; border-left:1px solid #CCCCCC;}

/* Jquery Accordion + Jquery Toggle */

.accordion-wrapper, .toggle-wrapper{display:block; width:100%; margin-top:15px;}
.accordion-wrapper:first-child, .toggle-wrapper:first-child{margin-top:0;}
.accordion-wrapper .accordion-title, .accordion-wrapper .accordion-title.active, .toggle-wrapper .toggle-title, .toggle-wrapper .toggle-title.active{color:#d40000; display:block; padding:15px 32px; background:no-repeat 8px center; border:1px solid #d40000;}
.accordion-wrapper .accordion-content, .toggle-wrapper .toggle-content{display:none; padding:15px 32px; border:solid #E5E4E3; border-width:0 1px 1px 1px;}





/*----------------------------------------------Site Wide Shared Classes-------------------------------------*/

.post-image{margin-bottom:40px;border-bottom:6px solid #d40000;}

.blog-post-title a{color:#d40000; background-color:#000000;}
.blog-post-title a:hover{color:#d40000; background-color:#000000;}
.read-more{text-align:right;}



/*----------------------------------------------Portfolio Overview-------------------------------------*/

#portfolio ul{margin:0; padding:0; list-style:none;}
#portfolio ul li{margin-bottom:30px;}




/*----------------------------------------------------------------------------------------*/
/*-------------------------------------------Framework---------------------------------------*/

.one_half, 
.one_third, .two_third, 
.one_quarter, .two_quarter, .three_quarter, 
.one_fifth, .two_fifth, .three_fifth, .four_fifth, 
.one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth{display:inline; float:left; margin:0 0 30px 5%; list-style:none;}

.one_half:first-child, 
.one_third:first-child, .two_third:first-child, 
.one_quarter:first-child, .two_quarter:first-child, .three_quarter:first-child, 
.one_fifth:first-child, .two_fifth:first-child, .three_fifth:first-child, .four_fifth:first-child, 
.one_sixth:first-child, .two_sixth:first-child, .three_sixth:first-child, .four_sixth:first-child, .five_sixth:first-child{margin-left:0;}

.first{margin-left:0; clear:left;}

.full_width{display:block; width:100%; clear:both;}

body.boxed .wrapper{max-width:90%; padding:0 1.6%; margin:0 auto;}

/*----------------------------------------------Half Grid-------------------------------------*/

/*
.one_half{width:570px;} => 570 ÷ 1200 = 0.475 * 100 = 47.5
*/

.one_half{width:47.5%;}

/*----------------------------------------------Third Grid-------------------------------------*/

/*
.one_third{width:360px;} => 360 ÷ 1200 = 0.3 * 100 = 30
.two_third{width:780px} => 780 ÷ 1200 = 0.65 * 100 = 65
*/

.one_third{width:30%;}
.two_third{width:65%;}


/*----------------------------------------------Quarter Grid-------------------------------------*/

/*
.one_quarter{width:255px;} => 255 ÷ 1200 = 0.2125 * 100 = 21.25
.two_quarter{width:570px} => 570 ÷ 1200 = 0.475 * 100 = 47.5
.three_quarter{width:885px} => 885 ÷ 1200 = 0.7375 * 100 = 73.75
*/

.one_quarter{width:21.25%;}
.two_quarter{width:47.5%;} /* Same as one_half */
.three_quarter{width:73.75%;}


/*----------------------------------------------Fifth Grid-------------------------------------*/

/*
.one_fifth{width:192px;} => 192 ÷ 1200 = 0.16 * 100 = 16
.two_fifth{width:444px} => 444 ÷ 1200 = 0.37 * 100 = 37
.three_fifth{width:696px} => 696 ÷ 1200 = 0.58 * 100 = 58
.four_fifth{width:948px} => 948 ÷ 1200 = 0.79 * 100 = 79
*/

.one_fifth{width:16%;}
.two_fifth{width:37%;}
.three_fifth{width:58%;}
.four_fifth{width:79%;}


/*----------------------------------------------Sixth Grid-------------------------------------*/

/*
.one_sixth{width:150px;} => 150 ÷ 1200 = 0.125 * 100 = 12.5
.two_sixth{width:360px;} => 360 ÷ 1200 = 0.3 * 100 = 30
.three_sixth{width:570px;} => 570 ÷ 1200 = 0.475 * 100 = 47.5
.four_sixth{width:780px;} => 780 ÷ 1200 = 0.65 * 100 = 65
.five_sixth{width:990px;} => 990 ÷ 1200 = 0.825 * 100 = 82.5
*/

.one_sixth{width:12.5%;}
.two_sixth{width:30%;} /* Same as one_third */
.three_sixth{width:47.5%;} /* Same as one_half */
.four_sixth{width:65%;} /* Same as two_third */
.five_sixth{width:82.5%;}


/*----------------------------------------------ie-------------------------------------*/

*#topnav{position:relative; z-index:1000;}/* IE7 */

/* IE8 Doesn't Support :last-child, so we add the class .last-child to the last LI element */

#topnav ul li.last-child li > ul {left:-190px;}
#topnav ul:first-child li.last-child > ul{right:0;}
#topnav ul:first-child li.last-child{margin-right:0;}

/* IE8 Collapses margin after animation - here we force IE's haslayout to stop it collapsing */

.accordion-wrapper, .toggle-wrapper{overflow:hidden;}




/* 240 + 320px */

@media screen and (min-width:180px) and (max-width:360px) {
	#header, #topnav, #container, #footer{max-width:95%; margin:0 auto;}
	
	#topnav ul{	display:block; width:50%; float:none; margin:0 0 5px 0; padding:0;}

	form input[type="submit"]{margin-bottom:10px;}
	
	.one_half, 
	.one_third, .two_third, 
	.one_quarter, .two_quarter, .three_quarter, 
	.one_fifth, .two_fifth, .three_fifth, .four_fifth, 
	.one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth{display:block; float:none; width:auto; margin:0 0 2% 0; padding:0;}
	
	#header hgroup, #header #header-contact, #header-info{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0; text-align:center;}
	#header #header-contact{margin:30px 0 0 0;}
	#header #header-contact li{display:block; margin:15px 0 0 0; padding:0; border:none;}
	#header #header-contact li:first-child{margin:0;}
	
	#header #header-info{display:block; float:none; width:auto;}
#header #header-info ul{
	margin-top: 0px;
	margin-right: 10px;
}
#header #header-info li{display:block; margin:0px 0px 0px 0px; padding:0px 0px 2px 0px;}
#header #header-info li a{color:#000000;}
#header #header-info li:first-child{margin:0px 0px 0px 0px; padding:0; border:none;}
#header #header-info ul:last-child {margin:0px 0px 0px 10px; float:none;}
#header #header-info li:last-child{margin:0px; color:#666; padding:0px 0px 5px 0px; border-bottom:1px dashed #C0BAB6;}


#header #header-info h3{color:#09F; padding:0 0 5 0px; border-bottom:1px dashed #C0BAB6;}


	
	.calltoaction div{margin-top:30px;}
	.calltoaction div:first-child{margin-top:0;}
	.calltoaction.opt4{font-size:1.5em;}
	
	
	#header, #footer{text-align:center;}
	#footer p{float:none; line-height:1.6em;}
	#footer p:first-child{margin-bottom:8px;}
	
	/*----------------------------------------------media queries-------------------------------------*/

}

/* 480px */

@media screen and (min-width:361px) and (max-width:615px) {
	#header, #topnav, #container, #footer{max-width:95%; margin:0 auto;}
	
	#topnav ul{	display:block; width:100%; float:none; margin:0 0 5px 0; padding:0;}

	
	.one_half, 
	.one_third, .two_third, 
	.one_quarter, .two_quarter, .three_quarter, 
	.one_fifth, .two_fifth, .three_fifth, .four_fifth, 
	.one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth{display:block; float:none; width:auto; margin:0 0 2% 0; padding:0;}
	
	#header hgroup, #header #header-contact{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0;}
	#header #header-contact{margin:30px 0 0 0;}
	
	
	
	#contact .contact_details > div{display:block; float:none; margin-left:0;}
	
	.calltoaction div{margin-top:30px;}
	.calltoaction div:first-child{margin-top:0;}
	
	
	#footer p{float:none;}
	#footer p:first-child{margin-bottom:8px;}
}

/* 768px */

@media screen and (min-width:616px) and (max-width:800px) {
	#header, #topnav, #container, #footer{max-width:95%; margin:0 auto;}
	
	#topnav ul{display:none;}
	
	.calltoaction.opt4 div{display:block; float:none; width:100%; margin:30px 0 0 0;}
	.calltoaction.opt4 div:first-child{margin-top:0; text-align:center;}
	.calltoaction.opt4{font-size:1.5em;}
	
}

/* 960px */

@media screen and (min-width:960px) {
	#header, #topnav, #container, #footer{max-width:95%; margin:0 auto;}
}

/* 1028px */

@media screen and (min-width:1028px) {
	#header, #topnav, #container, #footer{max-width:95%; margin:0 auto;}
}

/* 1200px */

@media screen and (min-width:1200px) {
	body.boxed .wrapper{max-width:1140px;}
	#header, #topnav, #container, #footer{max-width:1200px; margin:0 auto;}
}



@media screen and (min-width:960px) and (max-width:1920px) {
	#topnav form{display:none;}
}