/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}
/*
CSS
*/

*{
    margin: 0px;
    padding: 0px;
}

img, fieldset{
    padding: 0px;
    border: none;
	margin: 0px;
	line-height: 0px;
}

a{
    color: #FDB813;
    text-decoration: none;
	font-weight: bold;
}

a:hover {
    text-decoration: none;
    color: #cc6e15;
}

h2{
	font: 24px Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight: normal;
	padding-top: 20px;
	padding-bottom: 20px;
}

h3{
	font: 18px Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight: normal;
	padding-left: 0px;
	padding-bottom: 5px;
}
p2{
	padding-left: 35px;
}
p3{
	padding-left: 42px;
}
/*
	Text indent
*/
pi{
	text-indent: 20px
}
h4{
	font: 18px Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight: normal;
	padding-top: 5px;
	padding-bottom: 5px;
}
h5{
	font: 12px Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight: normal;
	padding-top: 5px;
	padding-bottom: 5px;
}

body{	
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: #ffffff;
	background: #455560;
    /* background: #455560 url(images/header_bg.jpg) no-repeat top; */
	/*   background: #242424 ; */
}


.clear{
	clear: both;	
}

.read{
	text-align: left;
	padding-left: 15px;
}

.read a{
	font-weight: bold;
	color: #FDB813;
}

.read a:hover{
	color: #ffffff;
}

#wrap{
	width: 1054px;
	margin: 0 auto;
}
#wrap_center{
	width: 1054px;
	margin: 0 auto;
	text-align: center;
}

#wrap_indent{
	width: 1000px;
	padding-left: 100px;
}
/*
	header
*/
#black_bg{
	background: #455560 ; 
}

#header_bg{
	/* background: url(../images/header_bg_350.jpg) no-repeat top left; */
	background: url(../images/header_bg.png) no-repeat top left;
	height: 350px;
	margin-left: auto;
	margin-right: auto;
	width: 99%;
	padding-top: 15px;
}

#header_subpages{
	/* background: url(../images/header_bg_180.jpg) no-repeat top left; */
	background: url(../images/header_bg.png) no-repeat top left;
	height: 150px;
	margin-left: auto;
	margin-right: auto;
	width: 99%;
	padding-top: 15px;
}
/*
	image positions for images sized 320x213
*/
#image-left{
	float: left;
	position: relative;
	margin-right: 10px;
	z-index: 1;
    visibility: show;
}
#image-right{
	float: right;
	position: relative;
	margin-left: 10px;
	z-index: 1;
    visibility: show;
}
#image-right-with-pad{
	float: right;
	position: relative;
	margin-left: 10px;
	margin-right: 75px;
	z-index: 1;
    visibility: show;
}
/* 'widths' sub menu */
#layoutdims {
		clear:both;
		background:#455560;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
}
/* column container */
.colmask {
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
		float:left;
		width:100%;
		position:relative;
}
.col1,
.col2,
.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;
		overflow:hidden;
}
/* 2 Column (double page) settings */
.doublepage {
		background:#455560;		/* right column background colour */
}
.doublepage .colleft {
		right:50%;			/* right column width */  
		background:#455560;		/* left column background colour */
/* 		background:#fff;		left column background colour */
}
.doublepage .col1 {
		width:46%;			/* left column content width (column width minus left and right padding) */
		left:52%;			/* right column width plus left column left padding */
}
.doublepage .col2 {
		width:46%;			/* right column content width (column width minus left and right padding) */
		left:56%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
/* 2 Column (double page Sidebar) settings */
.doublepage-sidebar {
		background:#455560;		/* right column background colour */
}
.doublepage-sidebar .colleft-sidebar {
		right:20%;			/* right column width */  
		background:#455560;		/* left column background colour */
/* 		background:#fff;		left column background colour */
}
.doublepage-sidebar .col1-sidebar {
		width:66%;			/* left column content width (column width minus left and right padding) */
		left:52%;			/* right column width plus left column left padding */
}
.doublepage-sidebar .col2-sidebar {
		width:26%;			/* right column content width (column width minus left and right padding) */
		left:56%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* Top Menu */
	top-menu
	background-color:#f7faf6;

#top-menu{
	height: 65px;
	width: 1054px;
	margin: 0 auto;
}

#top-menu ul{
	padding-left: 0px;
    list-style: none;
	width: 800px;
	margin: 0 auto;
}

#top-menu ul li{
	display: inline;
}

#top-menu ul li a{
	font: 18px  Arial, Helvetica, sans-serif;
    color: #9bc336;
	text-align: center;
    font-weight: normal;
    text-decoration: none;
    display: block;
    float: left;
    width: 160px;
    height: 40px;
	line-height: 50px;
}

#top-menu ul li a:hover,  #top-menu ul li .active{
	color: #FDB813;
	background: url(../images/hover.png) no-repeat center;
}
/* Bottom Menu */

/* Top Menu */
	menu
	background-color:#f7faf6;

#menu{
	height: 65px;
	width: 1054px;
	margin: 0 auto;
}

#menu ul{
	padding-left: 0px;
    list-style: none;
	width: 835px;
	margin: 0 auto;
}

#menu ul li{
	display: inline;
}

#menu ul li a{
	font: 18px  Arial, Helvetica, sans-serif;
    color: #9bc336;
	text-align: center;
    font-weight: normal;
    text-decoration: none;
    display: block;
    float: left;
    width: 135px;
    height: 40px;
	line-height: 50px;
}

#menu ul li a:hover,  #top-menu ul li .active{
	color: #FDB813;
	background: url(../images/hover.png) no-repeat center;
}

	menu
	background-color:#f7faf6;
/*
#menu{
	background: url(images/menu.png) no-repeat top left; 
	height: 65px;
	 width: 1054px; 

	margin: 0 auto auto 100;
}

#menu ul{
	padding-left: 100px;
	width: 800px;
	float: left;
    list-style: none;
	width: 100%;
	margin: 0 auto;
}

#menu ul li{
	display: inline;
}

#menu ul li a{
	font: 18px  Arial, Helvetica, sans-serif;
    color: #9bc336;
	text-align: center;
    font-weight: normal;
    text-decoration: none;
    display: block;
    float: left;
    width: 150px;
    height: 40px;
	line-height: 50px;
}

#menu ul li a:hover,  #menu ul li .active{
	color: #FDB813;
	background: url(../images/hover.png) no-repeat center;
}
*/
/* menu_nav */
.menu_nav { margin:0 0 6px; padding:0 40px; height:56px; background-color:#f7faf6;}
.menu_nav ul { list-style:none;}
.menu_nav ul li { margin:0; padding:0; float:left; border-right:1px solid #ebebeb;}
.menu_nav ul li a { display:block; margin:0; padding:17px 24px; color:#959595; text-decoration:none; text-transform:uppercase; font-size:14px;}
.menu_nav ul li.active a, .menu_nav ul li a:hover { color:#9bc336;}

body#home a#home,
body#services a#services,
body#expertise a#expertise,
body#method a#method,
body#projects a#projects,
body#testimony a#testimony {
color: #FDB813;
background: #455560;
}


/*logo*/

#logo{
	width: 1032px;
	margin: 0 auto;
	height: 52px;
	padding-top: 0px;
	padding-left: 50px;
}

#logo h1 a{
	font: 14px Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}

#logo a small{
	font: 12px Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight: normal;
	text-decoration: none;
}
#logo ul{
	padding-left: 10px;
    list-style: none;
	width: 1032px;
	margin: 0 auto;
	color:#959595
}

#logo ul li{
	display: inline;
}

#prew_img{
	height: 297px;
}

/* Two Columns ~ 60/40% */
.news{
	
	width: 100%;
	padding: 0px 10px 0px 10px;
	padding-left: 50px;
}

.news_last{
	padding: 0px 10px 30px 10px;
}

.news_left{
	float: left;
	width: 522px;	
	padding-left: 20px;
}

.news_left_indent{
	padding-left: 20px;

}
.news_right{
	float: right;
	width: 348px;
	padding-right: 50px;	
}

.news_right_indent{
	padding-left: 20px;

}

/* Two Columns ~ 85/15% */

.news85-15{
	
	width: 100%;
	padding: 0px 10px 0px 10px;
	padding-left: 50px;
}

.news_last85-15{
	padding: 0px 10px 30px 10px;
}

.news_left85-15{
	float: left;
	width: 740px;	
	padding-left: 20px;
}

.news_left_indent85-15{
	padding-left: 20px;

}
.news_right85-15{
	float: right;
	width: 130px;
	padding-right: 50px;	
}

.news_right_indent85-15{
	padding-left: 20px;

}
.news65-35{
	
	width: 100%;
/*	padding: 0px 10px 0px 10px; */
	margin-left: 50px;
}

.news_last65-35{
	padding: 0px 10px 30px 10px;
}

.news_left65-35{
	float: left; 
	width: 535px !important; /*moz width*/
	width: 565px;	
	margin-left: 20px;
	display:inline;
}

.news_left_indent65-35{
	padding-left: 20px;

}
.news_right65-35{
	float: right;
	width: 305px;
	padding-right: 75px;
	display:inline;	
}

.news_right_indent65-35{
	padding-left: 20px;

}

.news75-25{
	
	width: 100%;
	padding: 0px 10px 0px 10px;
	padding-left: 50px;
}

.news_last75-25{
	padding: 0px 10px 30px 10px;
}

.news_left75-25{
	float: left;
	width: 653px;	
	padding-left: 20px;
}

.news_left_indent75-25{
	padding-left: 20px;

}
.news_right75-25{
	float: right;
	width: 217px;
	padding-right: 100px;	
}

.news_right_indent75-25{
	padding-left: 20px;

}


.news90-10{
	
	width: 100%;
	padding: 0px 10px 0px 10px;
	padding-left: 50px;
}

.news_last90-10{
	padding: 0px 10px 30px 10px;
}

.news_left90-10{
	float: left;
	width: 783px;	
	padding-left: 20px;
}

.news_left_indent90-10{
	padding-left: 20px;

}
.news_right90-10{
	float: right;
	width: 87px;
	padding-right: 100px;	
}

.news_right_indent90-10{
	padding-left: 20px;

}


.news50-50{
	
	width: 100%;
	padding: 0px 10px 0px 10px;
	padding-left: 50px;
}

.news_last50-50{
	padding: 0px 10px 30px 10px;
}

.news_left50-50{
	float: left;
	width: 435px;	
	padding-left: 20px;
}

.news_left_indent50-50{
	padding-left: 20px;

}
.news_right50-50{
	float: right;
	width: 435px;
	padding-right: 100px;	
}

.news_right_indent50-50{
	padding-left: 20px;

}

#content_right{
	float: right;
	width: 379px;
}

#content_right h2{
	padding-left: 20px;
}

.border{
	background: url(../images/border.gif) repeat-x bottom;
	/* float: left; */
	/* padding-left: 50px; */
	height: 25px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}

/*
	footer_top
*/

#footer_top_top{
	background: url(../images/footer_top_top.jpg) no-repeat top left;
	height: 24px;
	margin-top: 10px;
}

#footer_top_bot{
	background: url(../images/footer_top_bot.jpg) no-repeat top left;
	height: 27px;
}

#footer_repeat{
	background: #171c20 url(../images/footer_top_repeat.jpg) repeat-x top;
	min-height: 249px;	
}

#footer_top{
	width: 841px;
	margin: 0 auto;
	padding-top: 18px;
	background: url(../images/footer_top_border.png) no-repeat bottom left;
	position: relative;
}

#footer_top a{
	color: #ffffff;
	font-weight: bold;
}

#footer_top a:hover{
	color: #cc6e15;
}

#footer_top p{
	color: #ffffff;
	line-height: 20px;
}

#footer_column1, #footer_column2, #footer_column3{
	width: 226px;
	float: left;
}

.footer_text{
	background: url(../images/footer_top_border.png) no-repeat top left;
	width: 226px;
	padding: 10px 0px 10px 0px;
}

#footer_column2{
	padding: 0px 87px 0px 75px;
}

.foot_pad{
    padding-left: 45px;
	padding-top: 10px;
}

.link1{
    background: url(../images/link1.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link2{
    background: url(images/link2.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link3{
    background: url(images/link3.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link4{
    background: url(images/link4.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}
/*
	list
*/
.ls{
    list-style: none;
    padding-left: 0px;
}
.ls li{
    background: url(../images/ls1.gif) no-repeat 0px 6px;
    margin-bottom: 8px;
    padding-left: 15px;
}
/*
	list - no button
*/
.lsn{
    list-style: none;
    padding-left: 0px;
}
.lsn li{
    margin-bottom: 8px;
    padding-left: 15px;
}
/*
	indented list
*/
.lsi{
    list-style: none;
    padding-left: 50px;
}

.lsi li{
    background: url(../images/ls1.gif) no-repeat 0px 6px;
    margin-bottom: 8px;
    padding-left: 15px;
}

/*
	indented list, no button
*/
.lsin{
    list-style: none;
    padding-left: 42px;
}

.lsin li{

    margin-bottom: 8px;
    padding-left: 15px;
}

/*
	footer_bot
*/

#footer_bot{
	/* padding: 5px;
	margin: 0 auto auto 200px;
	text-align: left; */
	margin-left: auto;
	margin-right: auto;
	/* margin-top: 50; */
	padding-top: 20px;
	width: 95%;
	font-size: 11px;
}

#footer_bot a{ 
	font-size: 11px;
}

/*
Accordian Menu
*/
#accordian_holder{
	padding-left: 50px;
}
.accordionWrapper{display:inline-block; padding-left:150px; overflow:hidden;}
.accordionWrapper img{vertical-align:top; border:0; margin:0; padding:0}
.accordionWrapper div{display:inline; float:left; margin:auto;}
.accordionWrapper div.title{cursor:pointer;}
.accordionWrapper div.content{display:none;}

/* content */
.content_2Col { 
	float: left;
	padding-left: 120px;
	width: 90%;
	margin-right: 50px;
	margin-top: 5px;
	margin-bottom: 5px;
.content { 
	float: left;
	padding-left: 120px;
	/*width: 100%; */
	*/ margin-right: 50px; */
	margin-top: 5px;
	margin-bottom: 5px;
}
.content_main {
	width: 100%;
	padding: 0px 10px 0px 10px;
	padding-left: 50px;
}
.content_lead { 
	float: left;
	padding-left: 120px;
	width: 70%;
}

#sidecontent {
	position:absolute;
	right: 0;
	top: 221px;
	width: 150px;
	padding: 0 30px 50px 15px;
	font-size: small;
	color: #FFFFFF;
}

.sidebox {
	background: #FDB813;
}
/*
	Two Column Layout
*/

.2ColContainer{
	
	width: 100%;
	padding: 0px 10px 0px 10px;
	padding-left: 50px;
}

.2Col_last{
	padding: 0px 10px 30px 10px;
}

.2Col_left{
	float: left;
	width: 370px;	
	padding-left: 20px;
	border-right: #fc9 solid 1px
}

.2Col_right{
	float: right;
	width: 500px;
	padding-right: 100px;	
}

/*
	Three Column Layout
*/
.3col_container {
    position: relative;
    width: 500px;
}
.3col_container div {
    height: 300px;
}

.3col_column-left {
    width: 33%;
    left: 0;
    background: #00F;
    position: absolute;
}
.3col_column-center {
    width: 34%;
    background: #933;
    margin-left: 33%;
    position: absolute;
}
.3col_column-right {
    width: 33%;
    right: 0;
    position: absolute;
    background: #999;
}
/*
	Two Column 60/40 Layout
*/

.2Col_60-40_Container{
	
	width: 100%;
	padding: 0px 10px 0px 10px;
	padding-left: 50px;
}

.2Col_60-40_last{
	padding: 0px 10px 30px 10px;
}

.2Col_60-40_left{
	float: left;
	width: 500px;	
	padding-left: 20px;
	border-right: #fc9 solid 1px
}

.2Col_60-40_right{
	float: right;
	width: 370px;
	padding-right: 100px;	
}

/* New Four Column Test */



    HTML CSS Result 

Edit on

  
  
  
  
  
  
  

/* imports */
@import url(http://fonts.googleapis.com/css?family=Lobster);

/* resets */
*,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
    content: "";
  display: table;
  clear: both;
}

/* global 
body {
  background-color: rgb(40,40,40);
  color: rgb(100,100,100);
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.3;
}
*/
.wrapper {
  margin: 0 auto;
  padding: 20px;
  max-width: 95%;
  background-color: #fff;
}
h1 {
  font-family: "Lobster", cursive;
  font-size: 2em;
  margin-bottom: 10px;
}
h2 {
  font-weight: 700;
}

/* grid */
.row {
  margin: 0 -10px;
  margin-bottom: 20px;
}
.row:last-child {
  margin-bottom: 0;
}
[class*="col-"] {
  padding: 10px;
}

@media all and ( min-width: 600px ) {
  
  .col-1-8 {
    float: left;
    width: 25%;
  }
  .col-1-8:nth-child(4n+1) {
    clear: both;
  }
  
}

@media all and ( min-width: 960px ) {
  
  .col-1-8 {
    width: 12.5%;
  }
  .col-1-8:nth-child(4n+1) {
    clear: none;
  }
  
}
HTML  CSS  JS  Result
Edit on 
/*------------------------------*\
    Grid System
\*------------------------------*/

.row, 
.column {
    box-sizing: border-box;
}

.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

.column {
    position: relative;
    float: left;
    display: block;
}

.column + .column {
    margin-left: 1.6%;
}

.column-1 {
    width: 6.86666666667%;
}

.column-2 {
    width: 15.3333333333%;
}

.column-3 {
    width: 23.8%;
}

.column-4 {
    width: 32.2666666667%;
}

.column-5 {
    width: 40.7333333333%;
}

.column-6 {
    width: 49.2%;
}

.column-7 {
    width: 57.6666666667%;
}

.column-8 {
    width: 66.1333333333%;
}

.column-9 {
    width: 74.6%;
}

.column-10 {
    width: 83.0666666667%;
}

.column-11 {
    width: 91.5333333333%;
}

.column-12 {
    width: 100%;
    margin-left: 0;
}

@media only screen and (max-width: 550px) {
    .column-1, 
    .column-2, 
    .column-3, 
    .column-4, 
    .column-5, 
    .column-6, 
    .column-7, 
    .column-8, 
    .column-9, 
    .column-10, 
    .column-11, 
    .column-12 {
        float: none;
        width: auto;
    }
  
    .column + .column {
        margin-left: 0;
    }
}

/*------------------------------*\
    Styling
\*------------------------------*/

body {
    padding: 20px;
}

.column {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #777;
    padding: 5px;
    min-height: 30px;
    text-align: center;
}

.row {
    margin-bottom: 10px;
}

.row:last-child {
    margin-bottom: 0;
}

.column .column {
    color: #eee;
    background: #333;
    border-color: #000;
}

.p {
  font-size: 14px;
  text-align: center;
  padding-top: 100px;
}

@media only screen and (max-width: 550px) {
    .row {
        margin-bottom: 0;
    }
    .column {
        margin-bottom: 10px;
    }
    .row:last-child .column:last-child {
        margin-bottom: 0;
    }
}