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

html, body {
	padding:0;
	min-height: 800px;
	height:100%;
	width: 100%;
}

body {
	padding: 10px 0 0 0;
	font-size: 0.65em;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	text-align: center;
	background: #fff url('../images/background.jpg') top left repeat-x;
}

* { padding:0; margin:0; border:0; font-weight:normal; line-height:1.4em; text-align: left; }
	
strong { font-weight: bold;}
.left { float: left; }
.right { float: right; }
.clear { clear: both; display: block; height: 1px; line-height: 1px; }
.clearLeft { clear: left; display: block; height: 1px; line-height: 1px; }
p {color: #817E78;}
select {border: 1px solid #8F8A80;}

/* site wrapper */

#container {
	width: 934px;
	margin: 0 auto;
	background: url('../images/jbclogo.gif') no-repeat right -3px; 
}

/* top navigation */

ul#top_nav {
	width: 930px;
	font-size: 1.1em; margin-top: 20px;
}

ul#top_nav li {
	display: block;
	float: left;
	font-weight: bold;
	color: #FFCC00;
}

ul#top_nav li ul li {
	display: block;
	float: none;
	font-weight: normal;
}

ul#top_nav a { font-weight: bold; color: #FFCC00; text-decoration: none; line-height: 1.1em; }
ul#top_nav a:hover { font-weight: bold; text-decoration: none; color: #FFF; }
ul#top_nav li ul li a { font-weight: bold; display: block; width: 100%; padding: 0 2px 0 0px; color: #FFCC00; background: none; }
ul#top_nav li ul li a:hover { font-weight: bold; background-color: #fff; color: #FFCC00; font-weight: bold; }

/* top navigation highlight and null link */

body.home #homeLink a { color: #FFF; font-weight: bold; cursor: default; }
body.who #whoLink a { color: #FFF; font-weight: bold; cursor: default; }
body.what #whatLink a { color: #FFF; font-weight: bold; cursor: default; }
body.done #doneLink a { color: #FFF; font-weight: bold; cursor: default; }
body.who #doneLink a { color: #FFF; font-weight: bold; cursor: default; }
body.who #contactLink a { color: #FFF; font-weight: bold; cursor: default; }

/* top navigation spacing */

#homeLink { width: 7.5em; }
#whoLink { width: 8em; padding-right: 2.5em; }
#whatLink { width: 8em; padding-right: 1.5em;  }
#doneLink { width: 10em; padding-right: 2.5em;}
#contactLink { width: 8em; padding-right: 1.5em; }

#home { width: 7.5em; }
#who { width: 8em; padding-right: 2.5em; }
#what { width: 8em; padding-right: 1.5em; }
#done { width: 10em; padding-right: 2.5em; }
#done2 { width: 10em; padding-right: 2.5em; }
#contact { width: 8em; padding-right: 1.5em; }

/* generic nav names
#col0 { width: 7.5em; }
#col1 { width: 8em; padding-right: 2.5em; }
#col2, #col4, #col5 { width: 8em; padding-right: 1.5em; }
#col3 { width: 10em; padding-right: 2.5em; }

#col1_white { color: #fff; }
*/


/* body container  */

#main_container { clear: both; padding: 18px 0 5px 0; }


/* Default widths */

#main_col_1 { width: 666px; float: left; }
#main_col_2 { width: 264px; float: right;}

/* H2, H3, H4 */

#main_container h2 { margin: 2px 4px 4px 4px; padding: 2px 5px; font-weight: bold; font-size: 1em; line-height: 1.5em; color: #fff; }
#main_container .greyText {display: block; color: #8F8A80; margin-left: 0px;}


/* section bar colours */

#main_container h2.yellow { background-color: #FFCC00;}
#main_container h5.yellowbold { color: #FFCC00; font-weight: bold; }
#main_container h2.grey { background-color: #8F8A80; }
#main_container h2.red { background-color: #C5161D; }
#main_container h2.cyan { background-color: #0089D1; }
#main_container h2.cyan a { margin: 5px 60px 10px 75px; color: #FFF; font-weight: bold; background-color: #0089D1; }
#main_container h2.cyan a:hover { text-decoration: none; color: #FFCC00; font-weight: bold; background-color: #FFF;  }
#main_container h2.green { background-color: #84CD03; }

h3, h4 {
	font-size: 1.1em;
	color: #E21377;
	font-weight:bold;
	margin: 0 0 1px 0;
}

h3.feature {
	font-size: 1.9em;
	letter-spacing: -1px;
	font-weight: normal;
	color: #E21377;
	line-height: 1em; 
	margin: 0 0 10px 0px;
}

span.pink {color: #FFCC00; line-height: 1em;}

/*  body component alignment   */

#main_container .single_col { margin: 5px 10px 10px 10px; font-size: 1em; line-height: 1.4em;  }

#main_container .single_col_bold { margin: 5px 10px 10px 10px; font-size: 1em; line-height: 1.4em;  font-weight: bold; }

#main_container .single_col2 { margin: 5px 60px 10px 85px; font-size: 1.2em; line-height: 1.4em; }


#main_container .single_col_what { margin: 5px 10px 10px 10px; font-size: 1.1em; line-height: 1.4em; color: #fff; }

#main_container .single_col_who { margin: 5px 10px 10px 10px; font-weight: bold; font-size: 1.1em; line-height: 1.4em; }
#main_container ul.single_col_who {margin: 5px 10px 10px 10px; font-weight: bold; font-size: 1.1em; line-height: 1.4em; }
#main_col_2 ul.single_col li {
	font-size: 1.2em;
	display: block;
	width: 170px;
}

#main_container .single_col_margin { margin: 5px 120px 10px 60px;  }


#main_container .single_col_work { margin: 5px 10px 10px 10px; font-weight: normal; font-size: 1.1em; line-height: 1.4em; }
#main_container .single_col_work a { margin: 5px 10px 10px 10px; font-weight: bold; font-size: 1.1em; line-height: 1.4em; font color: #0089D1;  }

#main_container p {	font-size: 1.2em; line-height: 1.2em; margin: 0 0 15px 0px; }

/* BODY CLASSES */


/* BODY CLASSES 

body.home div#main_col_1 h3.greyText {font-weight: bold; color: #807b74;}
body.home div#main_col_2 div.row h2.pink {background-color: #f24b8f;}
body.home div#main_container div.row div.single_col, body.about div#main_container div.row div.single_col {padding-bottom: 0; padding-bottom: 0; margin-bottom: 0;}
body.home div#main_container div.single_col p.dottyLine, body.about div#main_container div.single_col p.dottyLine {padding-bottom: 0; margin-bottom: 0;}
body.home div#main_container div.single_col p.dottyLine a {color: #807b74;}

body.home form.dottyLine, body.about form.dottyLine {background: transparent url(../Media/Images/CSS/Common/footer_line.gif) repeat-x scroll left top;}
body.home div#main_col_2 div.row div.single_col p.dottyLine {margin-left: 0;}

body.projects #main_col_1,
body.clients #main_col_1,
body.theteam #main_col_1, 
body.news #main_col_1 { float: right; width: 264px; }

body.projects #main_col_1 .row,
body.clients #main_col_1 .row,
body.theteam #main_col_1 .row, 
body.news #main_col_1 .row { background-image: url(../Media/Images/CSS/Common/main_col_topedge265.gif); }

body.projects #main_col_2,
body.clients #main_col_2,
body.theteam #main_col_2,
body.news #main_col_2 { float: none; width: 666px; }
*/

/* BODY - WHO WE ARE - 1 wide, 1 very narrow on righthand side*/


body.who #main_col_1 { float: left; width: 750px; }
body.who #main_col_2 { float: right; width: 180px; }
body.who .col1 { width: 500px; text-align: center; padding: 0; margin: 0;}
body.who .col2 { width: 240px; padding: 0;}

/* BODY - WHAT WE DO - 1 wide, 1 narrow on righthand side

as per default settings

*/


/* ROW are content wrappers. margins adjusted here */


.greenrow { padding: 2px 0; margin: 0 0 5px 0; background: #84CD03 top left no-repeat;  }

.row { padding: 2px 0; margin: 0 0 5px 0; background: #fff top left no-repeat;  }
.row a { font-weight: bold; color: #7F7C7A; text-decoration: none; }
.row a:hover { text-decoration: underline; }

span.pink {color: #E21377; line-height: 1em;}

#subhead { font-size: 1em; line-height: 2em; margin: 0px 73px 0px 73px; color: #0089D1; font-weight: bold; 
}

#subhead.indent { margin: 0px 5px 5px 85px; color: #0089D1; font-weight: bold;}
#subhead a:hover { color: #7F7C7A; font-weight: bold; }


/*  footer   */



#footer {
	font-size: 1.0em;
	clear: both;
	color: #333333;
	padding: 5px 0 30px 0;
	background: transparent url(../images/dots.gif) top left repeat-x;
}

#footer a {
	font-weight: bold;
	color: #7F7C7A;
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
}

#footer hr { display: none; }

#footer ul {
	float: right;
	text-align: right;
	width: 24%;
}
#footer li {
	display: block;
	float: right;
	padding: 0 0 0 10px;
}