body {
	margin: 0; padding: 0;
	text-align: center;
	background: #005D9C; color: #FFF;
	font-size: 12px; font-family: Arial, Sans-Serif;
}

h2, h3, h4, h5, p { margin: 0; padding: 7px 0; }
h1 { margin: 0; padding: 0; }
h2, h3, h4, .content-region-main h1 { text-transform: uppercase; color: #686A6C; }
h2, .content-region-main h1 { font-size: 18px; font-weight: normal; text-transform: uppercase; }
h3 { font-size: 13px; font-weight: bold; }
h3.press { padding: 7px 0 7px 26px; }
h4 { font-size: 12px; font-weight: bold; }
hr { color: #fff; background-color: #fff; border: #D6D6D6 1px dotted; border-style: none none dotted; height: 1px; margin: 7px 0; clear: both; }
hr.white { color: #FFF; background: #FFF; margin: 0; border: 0; }
a { text-decoration: none; }
p { text-align: justify; line-height: 18px; }
img { border: 0; }
img.right { margin: 10px 0 10px 30px; float: right; }
ul li, ol li { padding: 5px 0; }

.clearfix:after { content: "."; 	display: block;	clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

.no { display: none; }
.cb, .clear { clear: both; }
.lc { text-transform: lowercase !important; }
.flr { float: right; }
.small, #content-main3 .small { font-size: 11px; line-height: 15px !important; }
.right { text-align: right; }
.intro { font-size: 15px; font-weight: bold; text-align: left; line-height: 20px; }
.intro-space { width: 420px; float: left; }
.quote { font-weight: bold; font-style: italic; font-size: 14px; }
.stat { font-weight: normal; font-style: normal; font-size: 18px; }
.panel, .panel-icon { display: block; }
	.panel { margin: 5px 0 10px 20px; border: #EEE 1px solid; }
	.panel-icon { margin: 5px auto 10px auto; }
.date { color: #666; font-size: 11px; }
.stat-box, .quote-box { margin: 10px 0 0 0; padding: 0; background: #FFF; color: #008A37; text-align: left; }
.stat-box { background: #008A37 url(../images/bg-stat-box.gif) no-repeat bottom left; color: #FFF; }
.stat-box p, .quote-box p { padding: 5px; text-align: left; }
.stat-box .caption, .quote-box .caption  { font-size: 11px; line-height: 14px; display: block; color: #666; }
.stat-box .stat, .quote-box .stat { font-size: 14px; font-weight: bold; line-height: 16px; display: block; }
.stat-box .caption { color: #FFF; padding: 5px 5px 5px 40px; }
.stat-box-home { margin: 90px 0 0 0; background: none; color: #008A37; }
.stat-box-home .stat { font-size: 12px; }
.stat-box-home .caption { color: #666; padding: 5px; }
.quote-box { background: url(../images/quote-99.gif) no-repeat bottom right; }
.quote-box .stat { padding: 17px 10px 0 10px; background: url(../images/quote-66.gif) no-repeat top left; }
.quote-box .caption { padding: 5px 10px; }
.quote-box a { color: #008A37 !important; }
.quote-box a:hover { color: #EEE !important; }
.quote-small { color: #666; font-size: 11px; text-align: left; line-height: 15px; }
.title { font-size: 11px; }
.profile { width: 475px; margin: 0; padding: 0 0 5px 0; float: left; }
.main-headline { width: 410px; margin: 0; padding: 0 20px 0 0; float: left; }
.main-headline .headline { font-size: 18px; }
.main-headline .headline .date { padding: 5px 0; display: block; font-size: 11px; }
.main-headline p { font-size: 12px; }
.main-photo { margin: 0 20px 10px 0; float: left; }
.profile-image { width: 215px; margin: 0; padding: 0; float: left; }
.profile-photo { margin: 10px 20px 20px 0; float: left; }
.linkedin-link { margin: 0 0 0 40px; }
.two-col { width: 314px; margin: 0; padding: 0 10px 0 0; float: left; }
.audio { margin: 0; padding: 5px 0; }
.brand { margin: 20px 20px 40px 0; padding: 0; float: left; }

a.follow-us {
	width: 67px; height: 76px;
	margin: 0 0 0 270px; padding: 0;
	display: block; position: absolute; z-index: 99;
	background: url(../images/netbop-twitter.png) no-repeat top right;
}
a.follow-us:hover { width: 201px; margin: 0 0 0 137px; background-position: 0 -76px; }
a.follow-us span { display: none; }

#twit-div { padding: 0; }
#twit-div ul#twitter_update_list { margin: 0; padding: 0; list-style: none; }
#twit-div ul#twitter_update_list li { border-top: #CCC 1px dotted; padding: 5px 0; }
#twit-div ul#twitter_update_list li span a { color: #005D9C; }
#twit-div ul#twitter_update_list li a { color: #666; }
#twit-div ul#twitter_update_list li a:hover,
#twit-div ul#twitter_update_list li span a:hover { color: #008A37; }

/***************************** wrappers ***/

.wrapper-header-shadow-home, .wrapper-header-shadow { width: 100%; height: 9px; background: url(../images/bg-bottom-shadow.png) repeat-x 0 bottom; position: absolute; z-index: 50; }
.wrapper-header-shadow-home { margin: 411px 0 0 0; }
.wrapper-header-shadow { margin: 163px 0 0 0; }

#wrapper-header, #wrapper-content, #wrapper-footer { margin: 0; padding: 0; clear: both; text-align: left; }
#wrapper-header, #wrapper-footer { color: #FFF; }
#wrapper-header { height: 420px; background: #005D9C url(../images/bg-netbop1.gif) no-repeat top left; }
#wrapper-header a, #wrapper-footer a { color: #E5AE0A; }
#wrapper-header a:hover, #wrapper-footer a:hover { color: #FFC823; }
#wrapper-header.non-home { height: 172px; }
#wrapper-content { background: #FFF; color: #2F3437; }
#wrapper-footer { background: #005D9C url(../images/bg-footer-top.gif) repeat-x 0 top; }

/***************************** header section ***/

#header {
	width: 994px; height: 113px;
	margin: 0 auto; padding: 42px 20px 0 20px;
	clear: both;
}
#header a.logo {
	width: 317px; height: 92px;
	margin: 0; padding: 0;
	display: block; float: right;
	background: url(../images/netbop-technologies.jpg) no-repeat;
}
#header a.logo span { display: none; }
#header .strapline {
	width: 313px; height: 17px;
	margin: 39px 0 0 0; padding: 0;
	display: block; float: left;
	background: url(../images/delivering-success.png) no-repeat;
}
#header .strapline strong { display: none; }

.banner-screen {
	width: 982px;  height: 256px;
	margin: 0 auto; padding: 9px 0 0 9px;
	clear: both;
	background: url(../images/banner-screen.png) no-repeat bottom left;
}
.banner-screen img.banner { display: block; float: left; }
.banner-screen .banner-text { width: 280px; margin: 0; padding: 120px 0 0 30px; float: left; }
.banner-screen .banner-text .title { font-size: 13px; font-weight: bold; text-align: left; }
.banner-screen .banner-text .description { font-size: 11px; text-align: left; line-height: 15px; }

#portfolio { width: 982px;  height: 256px; float:left; top: 0; left: 0; overflow:hidden; }

/***************************** content area ***/

#content {
	width: 994px;
	margin: 0 auto; padding: 0 20px 15px 40px;
	clear: both;
}
#content a { color: #005D9C; }
#content a:hover { color: #008A37; }
#content .nav-area { width: 968px; margin: 0; padding: 10px 0 0 0; float: left; clear: both; }
#content ul.nav { /*width: 658px;*/ margin: 0; padding: 5px 0 8px 2px; clear: both; float: left; list-style: none; }
#content ul.nav li { margin: 0 10px 0 0; padding: 0; display: block; float: left; }
#content ul.nav li a {
	margin: 0; padding: 6px 9px;
	display: block; float: left;
	color: #6C6C6C;
	text-transform: uppercase;
	font-weight: bold; font-size: 12px;
}
#content ul.nav li a:hover, #content ul.nav li a.on { background: #008A37; color: #FFF; }

#content .content-main, #content .content-main2, #content .content-main3, #content .content-main-wide, #content .content-main-sub,
#content .content-main-sub2, #content .content-sub { margin: 0; float: left; }
#content .content-main-wide { width: 980px; padding: 10px 10px 0 10px; clear: both; }
#content .content-main, #content .content-main2, #content .content-main3 { padding: 0 10px; clear: both; }
#content .content-main { width: 420px; }
#content .content-main2 { width: 710px; }
#content .content-main3 { width: 648px; padding: 0 20px 0 10px; }
/*#content .content-main ul li, #content .content-main2 ul li, #content .content-main3 ul li { line-height: 18px; }*/
#content .content-main ul, #content .content-main2 ul, #content .content-main3 ul { list-style: square; color: #E7AE07; }
#content .content-main ul li span, #content .content-main2 ul li span, #content .content-main3 ul li span { color: #2F3437; }
#content .content-main-sub, #content .content-main-sub2 { width: 200px; text-align: left; }
#content .content-main-sub { padding: 10px 19px 0 19px;}
#content .content-main-sub2 { padding: 10px 30px 0 18px;}
#content .content-main-sub p { text-align: left; }
#content .content-main-sub ul.sub-nav { margin: 0; padding: 5px 0 0 0; list-style: none; }
#content .content-main-sub ul.sub-nav li { margin: 0; padding: 0; border-bottom: #EEE 1px dotted; }
#content .content-main-sub ul.sub-nav li a { padding: 5px; display: block; }
#content .content-main-sub ul.sub-nav li a:hover { background: #E7AE07; color: #FFF; }
#content .content-main-sub ul.sub-nav li a.on { background: #008A37; color: #FFF; }
#content .content-sub { width: 290px; padding: 10px 0 0 0; font-size: 11px; }
#content .content-sub h4 { padding: 10px 0 7px 0; font-size: 12px; font-weight: bold; }
#content .content-sub ul.news { margin: 0; padding: 0; list-style: none; }
#content .content-sub ul.news li { margin: 0; padding: 5px 0; border-top: #CCC 1px dotted; }
#content .contact-details { padding: 36px 19px 0 19px; }
#content .contact-sub { margin: 0; padding: 48px 0 0 0; }

.content-region-main {
	width: 548px;
	margin: 0; padding: 0 20px 0 0;
	float: left;
}

.content-region-form {
	width: 355px;
	margin: 0; padding: 0 0 0 20px;
	float: left;
	border-left: #EEE 1px dotted;
}

/***************************** footer section ***/

#footer {
	width: 994px;
	margin: 0 auto; padding: 0 20px 40px 45px;
	clear: both; text-align:left;
	font-size: 11px;
}
#footer ul { margin: 0; padding: 2px 0 10px 8px; float: left; list-style: none; color: #FFF; }
#footer ul.home, #footer ul.company { width: 160px; }
#footer ul.services { width: 195px; }
#footer ul.products { width: 120px; }
#footer ul.contact { width: 200px; }
#footer ul li { margin: 0; padding: 3px 0; display: block; clear: both; }
#footer ul li.title { text-transform: uppercase; font-weight: bold; }
#footer .copyright { color: #7FADCC; }

#toggle-wrapper	{ margin:0 auto; height:1.5em; width:986px; padding:5px 20px 5px 53px; }
#footer_toggle	{ float:left; position:relative; margin:5px 0; padding:0 0 10px; display:block; overflow:hidden; width:20px; text-align:left; }
#copyright_fade 	{ color:#7FADCC; font-size:11px; margin:5px 0 0 645px; display:block; padding:0 0 10px; position:relative; float:left; width:200px; }

/***************************** common styles ***/

fieldset.contact_form {
	width: 326px;
	margin: 10px 20px 0 0; padding: 0;
	float: left;
}
fieldset.contact_form dl dt { width: 80px; margin: 5px 0; padding: 4px 5px 0 0; float: left; clear: both; font-size: 13px; text-align: right; }
fieldset.contact_form dl dd { width: 210px; margin: 5px 0;  float: left; }
fieldset.contact_form dl dd input#submit {
	width: auto; cursor: pointer;
	margin: 0; padding: 3px;
	background: #E5AE09; color: #FFF; border: 0;
	text-transform: uppercase;
	font-weight: bold; font-size: 12px; font-family: Arial, Sans-Serif;
}
fieldset.contact_form dl dd input#submit:hover { background: #008A37; color: #FFF; }
form, fieldset, dl, dt, dd { margin: 0; padding: 0; border: 0; }
input.text, textarea.text {
	width: 200px; padding: 3px;
	font-size: 12px; font-family: Arial, Sans-Serif;
}
textarea.text { height: 100px; }

ul.awards { margin: 0; padding: 10px 0 10px 10px; list-style: none; clear: both; }
ul.awards li { margin: 0; padding: 0 8px; display: block; float: left; }
ul.awards li span {
	height: 64px;
	margin: 0; padding: 0;
	display: block; float: left;
}
ul.awards li span:hover { background-position: 0 -64px; }
ul.awards li span span { display: none; }
ul.awards li .investor { background: url(../images/logos/awards/investors-in-people.gif) no-repeat; width: 104px; }
ul.awards li .fsb { background: url(../images/logos/awards/fsb.gif) no-repeat; width: 53px; }
ul.awards li .rising-stars { background: url(../images/logos/awards/rising-stars.gif) no-repeat; width: 53px; }
ul.awards li .google-adwords { background: url(../images/logos/awards/google-adwords.gif) no-repeat; width: 71px; }
ul.awards li .nominet { background: url(../images/logos/awards/nominet.gif) no-repeat; width: 85px; }
ul.awards li .cim { background: url(../images/logos/awards/cim.gif) no-repeat; width: 104px; }
ul.awards li .web-user-gold { background: url(../images/logos/awards/web-user-gold-award.gif) no-repeat; width: 53px; }
ul.awards li .wales-hot-100 { background: url(../images/logos/awards/wales-hot-100.gif) no-repeat; width: 71px; }
ul.awards li .bsb-champions { background: url(../images/logos/awards/bsb-champions.gif) no-repeat; width: 85px; }
ul.awards li .bee-carbon-free { background: url(../images/logos/awards/bee-carbon-free-supporter.gif) no-repeat; width: 104px; }

ul#portfolio { margin: 0; padding: 0; list-style: none; }
ul#portfolio li { margin: 0; padding: 0; }

ul.portfolio-shots { margin: 0; padding: 20px 0 0 0; list-style: none; }
ul.portfolio-shots li {
	width: 318px; height: 176px;
	margin: 0 12px 12px 0; padding: 0;
	display: block; float: left;
	background: #EEE;
}
ul.portfolio-shots li.end { margin: 0 0 20px 0; }
ul.portfolio-shots li a { margin: 0; padding: 0; display: block; border: #FFF 3px solid; }
ul.portfolio-shots li a:hover { border: #E7AE07 3px solid; }
ul.portfolio-shots li img { border: #EEE 1px solid; display: block; }

ul.website-listings { margin: 0; padding: 10px 0 0 0; list-style: none; }
ul.website-listings li {
	width: 235px; height: 40px;
	margin: 3px 10px 3px 0; padding: 0;
	display: block; float: left;
}
ul.website-listings li a { font-size: 11px; }

ul.press { margin: 0; padding: 8px 0 0 0; list-style: none; }
ul.press li { margin: 0; padding: 10px 0; display: block; clear: both; }

a.button-action, a.button-action-green, a.button-action-red {
	width: 287px; height: 27px;
	margin: 0; padding: 13px 0 0 38px;
	display: block;
	font-size: 14px; font-weight: bold;
}
a.button-action, a.button-action-red { background: url(../images/button-action.gif) no-repeat; color: #C82C23 !important; }
a.button-action-green { background: url(../images/button-action-green.gif) no-repeat; color: #008A37 !important; }
a.button-action:hover, a.button-action-green:hover, a.button-action-red:hover { background-position: 0 -40px; color: #FFF !important; }
a.button-right { margin: 10px 5px 0 0; float: right; }

.portfolio-case img.website { display: block; margin: 0 0 10px 0; }
.portfolio-case .holder { width: 770px; margin: 10px auto 0 auto; padding: 0 0 20px 0; }
.portfolio-case h3, .portfolio-case p { padding: 3px 0; text-transform: none; }
.portfolio-case a { color: #005D9C; }
.portfolio-case a:hover { color: #008A37; }

.profile-case img.website { display: block; margin: 0 0 10px 0; }
.profile-case .holder { width: 750px; margin: 0 auto 10px auto; padding: 10px; background: #FFF; color: #2F3437; }
.profile-case .holder .profile { padding: 5px 0; }
.profile-case h3, .profile-case p { padding: 3px 0; }
.profile-case a { color: #005D9C; }
.profile-case a:hover { color: #008A37; }

#supportstaff_toggle	{ clear:both; cursor:pointer; margin-left:235px; }
#supportstaff	{ margin-left:210px; position:relative; }
#supportstaff_toggle span	{ color:#E5AE0A; }

#slider { margin: 10px 0 0 0; border: #EEE 1px solid; }

/*************************************************************** Easy Slider ***/

#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li{ 
	width:950px;
	height:241px;
	overflow:hidden; 
	}

.graphic, #prevBtn, #nextBtn{
	margin:0;
	padding:0;
	display:block;
	overflow:hidden;
}

#prevBtn, #nextBtn { 
	width: 476px;
	margin: 0; padding: 0;
	display:block; float: left;
}
#nextBtn { text-align: right; }

#prevBtn a, #nextBtn a { 
	width: auto;
	margin: 0; padding: 6px 9px;
	display: block;
	color: #6C6C6C;
	text-transform: uppercase;
	font-weight: bold; font-size: 12px;
}
#prevBtn a { float: left; }
#nextBtn a { float: right; }
#prevBtn a:hover, #nextBtn a:hover { background: #E5AE09; color: #FFF; }

