@charset "utf-8";

@import url("/css/browser_resets.css");

/*---------------------------------------------

Filename: main_styles.css
Title: Main Styles for AP16.com
Author: Dave Whitehead - dave.whitehead@energycell.co.uk
Created: 6th April 2009

Navy Blue: #074658
Orange: #db9101

---------------------------------------------*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 100%;
    text-align: center;
    margin: 0px;
    padding: 0px;
    background: url(../assets/framework/body_back.jpg) repeat-x top center;
}

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

a img
{
    border: none;
}





/*=========================================== Framework == */

.wrapper
{
    width: 900px;
    margin: 0 auto;
    text-align: left;
}

.masthead
{
    width: 900px;
    height: 135px;
    background: url(../assets/framework/main_logo.jpg) no-repeat top left;
    position: relative;
}

.breadcrumb
{
    width: 900px;
    height: 45px;
    background: url(../assets/framework/breadcrumb_back.jpg) no-repeat bottom center;
}
body.projects .breadcrumb
{
    width: 900px;
    height: 45px;
    background: url(../assets/framework/breadcrumb_noleftcol_back.jpg) no-repeat bottom center;
}

.content_wrapper
{
    width: 900px;
    background: url(../assets/framework/content_back.jpg) repeat-y top center;
    float: left;
}
body.projects .content_wrapper
{
    width: 900px;
    background: none;
    float: left;
}

body.home .content_wrapper
{
    width: 900px;
    background: none;
    float: none;
}
.leftcol
{
    width: 220px;
    float: left;
    padding-top: 22px;
    padding-bottom: 22px;
}
body.projects .leftcol
{
    width: 290px;
}
.content
{
    width: 640px;
    float: right;
    padding: 0px 0px 20px 0px;
}
body.projects .content
{
    width: 900px;
}

.footer_wrapper
{
    width: 100%;
    clear: both;
    background-color: #d2dee1;
    border-top: 1px solid #a7acad;
}

.footer
{
    width: 900px;
    margin: 0 auto;
    text-align: left;
}



/*=========================================== Master Typography == */

.content h1
{
    font-size: 1.8em !important;
    line-height: 1.5em;
    color: #074658;
    clear: both;
    margin-bottom: 20px;
    margin-top: 20px;
	border-bottom: 1px solid #CCC;
	padding: 0px 0px 0px 40px;
	background: url(../assets/pageframework/orange_sq.gif) no-repeat left 40%;
}
.content h2
{
    font-size: 1.2em;
    line-height: 1.2em;
	color: #666;
	font-weight: normal;
	margin-bottom: 10px;
}
.content p + h2 {
	margin-top: 2em;
	margin-bottom: 10px !important;
}
h2.home {
    font-size: 1.1em !important;
	float: left;
}
.content h3
{
    font-size: .85em;
    line-height: 1.3em;
    color: #074658;
    font-weight: bold;
    text-transform: uppercase;
	margin: 2em 0 .3em 0;
}
.content p, .content ul, .content ol, .leftcol p
{
    font-size: .8em;
    line-height: 1.5em;
    color: #333;
    margin-bottom: 1em;
	text-align: justify;
	
}
.content ul {
	list-style: none;
}
.content ul.masterlist li {
	background: url(../assets/images/orange_bullet.gif) no-repeat 0 50%;
	padding-left: 15px;
}

.content ul, .content ol, .leftcol p
{
    font-size: .75em;
    line-height: 1.5em;
    color: #333;
    margin-bottom: 1em;
	margin-left: 30px;
}

.content ul a:link, .content ul a:visited {
	color: #074658;
}
.content ul a:hover {
	text-decoration: none;
}
body.projects .leftcol h3
{
    color: #074658;
    font-size: 1em;
    margin-bottom: .25em;
}
body.projects .leftcol ul
{
    margin: 0px 0px 15px 15px;
    font-size: .75em;
    color: #333;
}




/*=========================================== Masthead == */

.strapline
{
    color: #FFF;
    font-size: 1.1em;
    padding: 35px 0px 0px 80px;
}
.search
{
    position: absolute;
    top: 20px;
    right: 0px;
}
.search input
{
    width: 150px;
}
.search input.button
{
    width: auto;
}

ul.mainnav
{
    margin: 0px;
    padding: 0px;
    list-style: none;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
}
ul.mainnav li
{
    float: left;
}
ul.mainnav li a:link, ul.mainnav li a:visited
{
    display: block;
    width: 113px;
    height: 37px;
    background: url(../assets/framework/mainnav_up.gif) no-repeat top center;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    font-size: .75em;
    line-height: 37px;
    text-align: center;
    margin-right: 1px;
}
ul.mainnav li a:hover, ul.mainnav li a.selected
{
    background: url(../assets/framework/mainnav_over.gif) no-repeat top center;
    color: #db9101;
}
ul.mainnav li a.nav_home:link, ul.mainnav li a.nav_home:visited
{
    width: 43px;
    background: url(../assets/framework/home_up.gif) no-repeat top center;
    text-indent: -5000px;
}
ul.mainnav li a.nav_home:hover
{
    background: url(../assets/framework/home_over.gif) no-repeat top center;
}
ul.mainnav li a.nav_admin:link, ul.mainnav li a.nav_admin:visited
{
    width: 43px;
    background: url(../assets/framework/admin_up.gif) no-repeat top center;
    text-indent: -5000px;
}
ul.mainnav li a.nav_admin:hover
{
    background: url(../assets/framework/admin_over.gif) no-repeat top center;
}

ul.mainnav li.nav_contact
{
    float: right;
}



/*=========================================== Breadcrumb == */

.breadcrumb p
{
    font-size: .7em;
    color: #999;
}
.breadcrumb a:link, .breadcrumb a:visited
{
    color: #074658;
    text-decoration: none;
    line-height: 35px;
}
.breadcrumb a:hover
{
    text-decoration: underline;
}


/*=========================================== Left Column == */

.leftcol h2
{
    font-size: 1em;
    color: #db9101;
    padding-left: 20px;
    margin-bottom: 10px;
}

.leftcol h2 a
{
    text-decoration: none;
    color: #db9101;
}

.leftcol h2 a:visited
{
    text-decoration: none;
    color: #db9101;
}

.leftcol h2 a:hover
{
    text-decoration: none;
    color: #db9101;
}


/* --Sub Navigation-- */

ul.subnav
{
    margin: 0px 0px 30px 0px;
    padding: 0px;
    list-style: none;
    background: url(../assets/framework/subnav_rule.gif) no-repeat top right;
    padding-top: 1px;
}
ul.subnav li
{
    background: url(../assets/framework/subnav_rule.gif) no-repeat bottom right;
    padding-bottom: 1px;
}
ul.subnav a:link, ul.subnav a:visited
{
    display: block;
    font-size: .75em;
    font-weight: bold;
    text-decoration: none;
    color: #0f3a52;
    padding: 10px 0px 10px 20px;
}
ul.subnav a:hover, ul.subnav a.selected
{
    background-color: #FFF;
    color: #db9101;
}




/* --Blog Navigation-- */

ul.blognav
{
    margin: 0px 0px 30px 0px;
    padding: 0px;
    list-style: none;
    background: url(../assets/framework/subnav_rule.gif) no-repeat top right;
    padding-top: 1px;
}
ul.blognav li
{
    background: url(../assets/framework/subnav_rule.gif) no-repeat bottom right;
    padding-bottom: 1px;
}
ul.blognav a:link, ul.blognav a:visited
{
    display: block;
    font-size: .7em;
    text-decoration: none;
    color: #0f3a52;
    padding: 5px 0px 5px 20px;
}
ul.blognav a:hover, ul.blognav a.selected
{
    background-color: #FFF;
    color: #db9101;
}




/* --Floater-- */

.floater
{
    background: url(../assets/framework/floater_back.gif) no-repeat bottom center;
    width: 180px;
    margin: 0px 0px 0px 20px;
    padding-bottom: 20px;
}
.floater img
{
    margin-left: 8px;
}
.floater h3
{
    background: url(../assets/framework/floater_top.gif) no-repeat top center;
    font-size: .8em;
    color: #FFF;
    padding: 3px 0px 5px 7px;
}
.floater p
{
    color: #FFF;
    font-size: .7em;
    line-height: 1.4em;
    padding: 0px 10px 0px 0px;
    margin: 0px 3px 0px 7px;
}
.floater a:link, .floater a:visited
{
    float: right;
    font-size: 1.1em;
    color: #44abc9;
    font-weight: bold;
    text-decoration: none;
}
.floater a:hover
{
    color: #FFF;
}

.floaterstart
{
    background: url(../assets/framework/floater_top.gif) no-repeat top center;
    font-size: .8em;
    color: #FFF;
    padding: 3px 0px 5px 7px;
}
.floaterend
{
    background: url(../assets/framework/floater_bottom.gif) no-repeat top center;
    font-size: .8em;
    color: #FFF;
    padding: 0px 0px 5px 7px;
}


.nofloater
{    margin: 0px 0px 8px 20px;
    padding-bottom: 10px;
    }


/*=========================================== Content == */

.pagebanner
{
    height: 120px;
    margin: 20px 0px 0px 0px;
}
.textback
{
    width: 225px;
    height: 120px;
    float: left;
    background: url(../assets/framework/pagebanners/bannertext_back.jpg) no-repeat left top;
}
.textback p
{
    color: #FFF;
    font-size: 1.7em;
    line-height: 1.7em;
    padding: 20px;
}

.project_detail
{
    margin-top: 40px;
}
.project_detail img
{
    float: right;
}
.project_detail ul
{
    margin-left: 15px;
}
.crosslink
{
    background: url(../assets/framework/crosslink_back.gif) no-repeat left center;
    margin: 10px 0px;
}
.crosslink a:link, .crosslink a:visited
{
    line-height: 46px;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    padding-left: 85px;
}
.crosslink a:hover
{
    color: #074658;
}



/*=========================================== Homepage == */

.main_features {
	height: 230px;
	margin: 20px 0px;
	background: url(../assets/images/home_gold.jpg) no-repeat top center;
	padding-top: 30px;

}
.main_features h1.home {
	color: #fff !important;
	margin: 0px 480px 10px 30px;
	line-height: 1.1em;
	font-size: 1.9em;
}
.main_features h2 {
	color: #fff;
	font-weight: normal;
	margin: 0px 500px 0px 30px;
	font-size: .8em;
	line-height: 1.5em;
	font-weight: bold;
}
.main_features p {
	color: #ccc;
	font-weight: normal;
	margin: 25px 510px 0px 30px;
	line-height: 1.4em;
}

/* Orange feature boxes */
.feature
{
    width: 255px; /* Actual width= 285px */
    height: 120px; /* Actual height= 150px */
    background: url(../assets/framework/feature_back.jpg) no-repeat top center;
    float: left;
    padding: 15px;
    margin-right: 22px;
}
.feature img
{
    float: left;
    margin-right: 10px;
}
.feature h2
{
    font-size: 1em;
    line-height: 1.2em;
    color: #074658;
    margin-bottom: 2em;
}
.feature p
{
    font-size: .75em;
    line-height: 1.4em;
    font-weight: bold;
    color: #FFF;
    margin-bottom: .5em;
}
.feature a:link, .feature a:visited
{
    text-decoration: none;
    color: #074658;
    float: right;
}
.feature a:hover
{
    color: #FFF;
}

/* Recent Project */
.projectnews_wrapper
{
    margin-top: 0px;
    float: left;
}
.project
{
    width: 577px;
    height: 200px;
    background: url(../assets/framework/project_back.jpg) no-repeat top center;
    float: left;
	padding: 15px 15px 0px 0px;
    margin: 20px 22px 20px 0px;
}
.project img
{
    float: left;
	margin: 11px 20px 0px 33px;
}
.project h2
{
    font-size: 1em;
    line-height: 1.2em;
    color: #074658;
    margin-bottom: 1.5em;
}
.project p, .news p
{
    font-size: .75em;
    line-height: 1.4em;
    font-weight: bold;
    color: #666;
    margin-bottom: .5em;
}
.project a:link, .project a:visited
{
    text-decoration: none;
    color: #074658;
    float: right;
}
.project a:hover
{
    color: #d08801;
}


#report {
	background: url(../assets/framework/report-back.jpg) no-repeat top center;
	width: 255px;
	height: 165px;
	float: right;
	margin-top: 20px;
	padding: 15px;
}
#report h2 {
	color: #FFF;
	font-size: 1em;
	line-height: 1.3em;
	margin-bottom: .75em;
}
#report p {
	color: #FFF;
	font-size: .8em;
	margin-bottom: 1em;
}
a.butt-report:link, a.butt-report:visited {
	background: url(../assets/framework/report_up.jpg) no-repeat top center;
	width: 254px;
	height: 63px;
	display: block;
	text-indent: -5000px;
}
a.butt-report:hover {
	background: url(../assets/framework/report_over.jpg);
}

/* News */
.news
{
    float: right;
    width: 280px;
}
.newsrollup
{
    margin-bottom: 1.3em;
}
.news p.date
{
    font-weight: normal;
    color: #999;
}
a.newstitle:link, a.newstitle:visited
{
    text-decoration: none;
    color: #074658;
}
a.newstitle:hover
{
    color: #d08801;
}
a.morenews:link, a.morenews:visited
{
    text-decoration: none;
    color: #d08801;
    float: right;
}
a.morenews:hover
{
    color: #074658;
}

/* =========msslogos=================*/

.mslogos  
{
	
	
	
	}
.mslogos ul 
{
		
	padding: 20px 0px 00px 0px;
	}
.mslogos ul li
{
	list-style-type:none; 
	padding-bottom:5px;
	
	
	}
div.sub_features
{

	
	}
	
	
/*=========================================== what we do == */
	
dl.services {
	border: 1px solid #dcdcdc;
	float: left;
	padding: 15px;
	background: url(../assets/framework/service_divider.gif) no-repeat 16% center;
	background-color: #f0f0f0;
	margin-bottom: 15px;
	width: 640px;
}
dl.services  dt {
	float: left;
	margin-right: 25px;
}
dl.services dd.title {
	color: #292828;
	font-size: 1.1em;
	margin-bottom: .2em;
}
dd.title a:link, dd.title a:visited {
	color: #000;
	text-decoration: none;
	padding: 2px 5px 2px 0px;
}
dd.title a:hover {
	background-color: #333;
	color: #FFF;
	padding: 2px 5px 2px 2px;
	
}

dl.services dd {
	color: #505050;
	font-size: .8em;
	line-height: 1.4em;
}


/*=========================================== Profiles == */

#profile-left {
	width: 280px;
	float: left;
}
#profile-right {
	width: 280px;
	float: right;
}
#profile-left h2, #profile-right h2 {
	font-size: 1.3em;
	margin-bottom: .5em;
}
.coreskills {
	border: 1px solid #dcdcdc;
	background-color: #f0f0f0;
	padding: 15px;
	margin-bottom: 15px;
}
.coreskills h3 {
	background: url(../assets/images/coreskills_underline.gif) no-repeat bottom center;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.coreskills ul.masterlist {
	margin: 0px;
}
	




/*=========================================== Projects == */
	
dl.projectthumb {
	width: 200px;
	float: left;
	margin: 0px 20px 20px 0px;
	border-bottom: 5px solid  #CCC;
	padding: 0px 0px 5px 0px;
}
dl.projectthumb dt {
	margin-bottom: 5px;
}
dl.projectthumb dd a:link, dl.projectthumb dd a:visited {
	text-decoration: none;
	font-size: 1.4em;
	font-weight: bold;
	color: #185263;
	letter-spacing: -.5px;
}
dl.projectthumb dd a:hover {
	text-decoration: none;
	color: #dc9102;
}
dl.projectthumb dd {
	color: #888888;
	font-size: .75em;
}
dl.norightmargin {
	margin-right: 0px;}
	
#casestudy-intro {
	float: left;
	margin-bottom: 20px;
}
#monitor {
	background: url(../assets/images/monitor.jpg) no-repeat top center;
	width: 375px;
	height: 363px;
	float: right;
	margin: 0px 0px 0px 20px;
}
#monitor img {
	margin: 14px 0px 0px 16px;
}
#quote {
	float: right;
	background: url(../assets/images/quote-top.jpg) no-repeat top center;
	width: 207px;
	background-color: #f4deb3;
	margin: 0px 0px 0px 20px;
}
#quote blockquote p {
	padding: 18px 15px 0px 15px;
	text-indent: 60px;
	color: #083343;
	font-size: .8em;
	line-height: 1.4em;
	font-style: italic;
}
#quote cite {
	background: url(../assets/images/quote-bott.jpg) no-repeat bottom center;
	display: block;
	padding: 0px 15px 40px 15px;
	font-size: .7em;
	line-height: 1.4em;
	text-align: right;
	font-weight: bold;
	color: #083343;
	}
	
	
	
/*=========================================== Form Styles == */

.form ul
{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.form li
{
    margin-bottom: 10px;
}
.form li input
{
    padding: 3px;
    margin-right: 10px;
}
.form li label
{
    color: #666;
    font-size: 1em;
    margin-right: 5px;
    margin-bottom: 25px;
}
.form li textarea
{
    width: 100%;
    height: 100px;
}

div.form input[type="image"]
{
    width:auto;
    height:auto;
    }

/*=========================================== Blog styles == */

.blog_entry
{
    margin-bottom: 15px;
    border-bottom: #999 dotted 1px;
    padding-bottom: 12px;
}
.blog_entry h3
{
    text-transform: none;
    font-size: .9em;
    color: #db9101;
    margin: 20px 0px 15px 0px;
}
.blog_entry img
{
    border: 1px solid #CCC;
    margin: 0px 0px 10px 0px;
}
.blog_entry h1 a:link, .blog_entry h1 a:visited
{
    text-decoration: none;
    color: #074658;
}
.blog_entry h1 a:hover
{
    border-bottom: 1px dotted #074658;
}
p.postinfo
{
    color: #999;
}
p.postinfo a:link, p.postinfo a:visited
{
    color: #db9101;
    text-decoration: none;
}
p.postinfo a:hover
{
    text-decoration: underline;
}
a.comments_link:link, a.comments_link:visited
{
    background: url(../assets/framework/speech_bubble.jpg) no-repeat left 50%;
    padding-left: 25px;
    color: #db9101;
    text-decoration: none;
}
a.comments_link:hover
{
    text-decoration: underline;
}

dl.comment
{
    background-color: #f2f2f2;
    border: 1px solid #CCC;
    padding: 10px;
    margin: 0px 0px 10px 0px;
    font-size: .75em;
    color: #333;
}
dl.comment dd
{
    margin-bottom: .25em;
    color: #074658;
    font-weight: bold;
}
dl.comment dd.date
{
    font-weight: normal;
    color: #999;
    margin-bottom: 10px;
}
.blog_entry ul
{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.blog_entry li
{
    margin-bottom: 10px;
}
.blog_entry li input
{
    padding: 1px;
    margin-right: 10px;
    margin-left: 10px;
    width:300px;
}
.blog_entry li textarea
{
    padding: 1px;
    margin-right: 10px;
    margin-left: 10px;
    width:300px;
    height:100px;
}
.blog_entry li label
{
    color: #666;
    font-size: 1em;
    width: 100px;
}


.blog_entry fieldset
{
    border-style:none;
    }

.blog_entry input[type="button"]
{
    padding: 1px;
    font-size: 1em;
    width:80px;
}

.blog_entry input[type="image"]
{
    width: auto;
}
/*=========================================== Contact form == */

div.contact_form ul
{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
div.contact_form li
{
    margin-bottom: .5em;
    clear: left;
    position: relative; /* Comment out when designing */
}
div.contact_form fieldset
{
    width: 640px;
    margin-bottom: 10px;
    display: block;
    background-color: #edf2f3;
    padding: 10px 0px;
    border: 1px solid #CCC;
}
div.formlegend
{
    margin: 0px 0px 15px 20px;
    font-size: .9em;
    font-weight: bold;
    color: #074658;
}
div.contact_form input.formbutton
{
    width: auto;
    margin: 0px 0px 0px 130px;
    clear: both;
}
input, textarea, select
{
    font-family: Arial, Helvetica, sans-serif;
    padding: 2px;
}
input, textarea
{
    width: 275px;
}
input#loc1, input#loc2
{
    width: auto;
}

div.contact_form label
{
    font-weight: bold;
    color: #666;
    float: left;
    width: 120px;
    text-align: right;
    margin-right: 10px;
    font-size: .9em;
}
div.contact_form label.opt
{
    float: none;
    width: auto;
    margin-right: 3px;
}
div.contact_form label.newsopt
{
    width: 240px;
    margin: 0px 0px 10px 130px;
    text-align: left;
    float: left;
    clear: none;
    color: #af292e;
}
label.wide
{
    display: block;
    width: 400px;
    text-align: left;
    margin-left: 120px;
    float: none;
}
label span
{
    color: #af292e;
    font-size: 1.5em;
    margin-right: 3px;
}
span.mandatoryfield
{
    color: #af292e;
    font-size: 1.5em;
    margin-right: 3px;
}

div.contact_form ul div.error
{
    background: url(../assets/pageframework/warning_symbol.gif) no-repeat left -10%;
    position: absolute;
    top: 5px;
    left: 410px;
    float: none;
    clear: none;
}
fieldset div.error p
{
    color: #900;
    padding-left: 20px;
}

div.contact_form input[type="image"]
{
    width:auto;
    height:auto;
    }




/*=========================================== Footer == */

.footer
{
    font-size: .65em;
    padding: 20px 0px;
    font-weight: bold;
}
.footer h3
{
    color: #27586a;
    font-size: 1.1em;
}
.footer p
{
    color: #838383;
}
.address
{
    width: 220px;
    float: left;
    background: url(../assets/framework/foot_divider.jpg) no-repeat top right;
    margin-right: 40px;
    padding-bottom: 20px;
}
.footer_links
{
    /*width: 150px;*/
    float: left;
    margin-right: 50px;
}
.footer_links ul
{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.footer_links a:link, .footer_links a:visited
{
    text-decoration: none;
    color: #838383;
}
.footer_links a:hover
{
    color: #F90;
}




.formoptionsfloater
{
    position: absolute;
    z-index: 100; 
    border: solid 1px black; 
    padding: 5px; 
    background-color: lightblue;
    top:0px;
    left:0px;
    }
/*=========================================== Fixes == */

.clearfix
{
    clear: both;
    margin: 0px;
    padding: 0px;
    width: auto;
}
.norightmargin
{
    margin-right: 0px;
}



.calltoaction {
	position: absolute;
	top: 20px;
	right: 0px;
	width: 170px;
	height: 43px;
}

/* ============= forms styles =========================*/

#dvMenuContent
{
	font-size: 10px;
	width: 150px;
	
}

#lnkMinimise
{
	font-size: 12px;
}

.loginpanel
{
	font-size: 12px;
	text-align:left;
}

.loginpanel input[type="text"]
{
	font-size: 12px;
	width:80px;
}
.loginpanel input[type="password"]
{
	font-size: 12px;
	width:80px;
}
.loginpanel input[type="submit"]
{
	font-size: 12px;
	width:80px;
}