/*
Theme Name: BREAK Theme - Version 1 - www.blanktheme.com
Theme URI: http://www.break.uk.com/
Description: BREAK Theme - Version 1 - Theme designed by Breakfrom
Version: 1.0
Author: Breakfrom Limited
Author URI: http://www.breakfrom.com/
*/

img, form, h1, h2, h3, h4, h5, h6, p, body {border: 0; padding: 0; margin: 0}

/* set background to white and set the default font style. */
body {background-color: #fff; background-image: url(images/bg.png); background-position: top; background-repeat: no-repeat; font: 12px Arial, Helvetica, sans-serif; color: #000; margin: 0 0 40px 0}

/*

color scheme
------------

color1: #code
color2: #code
color3: #code

*/


/*////////////////////		General		////////////////////*/

#header {margin: auto; width: 900px; height: 83px; padding-top: 20px; clear: both}
	#contact-social {float:right; text-align: right}
	#logo {float: left; height: 83px; margin-left: -3px}

#menu {margin: auto; width: 900px; height: 40px; background: #333 url(images/menu-bg.png) top left no-repeat; clear: both; position: relative; z-index: 99999}

.christmascontainer {position: absolute}
.christmas {position: relative; top: -39px; left: -190px; background-image:url(images/christmas.png); width: 1100px; height: 139px}

#main {margin: auto; width: 900px}

.col2-right {margin-top: 20px}
.col2-right .left {width: 564px; float: left}
.col2-right .right {width: 316px; float: left; margin-left: 20px}

.col3 {margin-top: 20px}
.col3 .left {width: 180px; float: left; margin-right: 20px}
.col3 .center {width: 500px; float: left}
.col3 .right {width: 180px; float: left; margin-left: 20px}

.col3 .starter {border: 10px solid #3c95b5; padding: 10px; height: 210px}
.col3 .business {border: 10px solid #f46c2e; padding: 10px; height: 210px}
.col3 .ecommerce {border: 10px solid #6d9a51; padding: 10px; height: 210px}
.col3 .bespoke {border: 10px solid #333; padding: 10px; height: 210px}

.col2-left {margin-top: 20px}
.col2-left .left {width: 200px; float: left; margin-right:20px}
.col2-left .right {width: 680px; float: left}

.col2-center {}
.col2-center .left {width: 450px; float: left}
.col2-center .right {width: 450px; float: left}

.col1 {margin-top: 20px}

#cu3er {width: 900px; height: 200px; margin-bottom: 40px}

#footer {clear: both; width: 900px; margin-top: 20px}
	#footer .footertop {padding: 0 0 10px 0; background: #fff url(images/footer.png) top center no-repeat}
		#footer .footertop p {border-bottom: 1px solid #ddd; padding: 10px 10px 6px 10px}
	#footer .footerbot {padding: 10px 0 0 0; background: #fff url(images/footer.png) bottom center no-repeat}
		#footer .footerbot p {text-align: right; border-top: 1px solid #ddd; padding: 10px}
	#footer .footercol {float: left; width: 204px; border-right: 1px solid #a3d4e8; padding: 10px; min-height: 140px}
	#footer .footercol ul {margin: 0; padding: 0; list-style: none}
	#footer .footercol ul li p {font-size: 11px; font-weight: bold; color: #666; padding-bottom: 10px}
	#footer .footercol ul li ul li a {font-size: 11px; font-weight: normal; color: #999}
	#footer .footercol1 {border-left: 1px solid #ddd}
	#footer .footercol2 {}
	#footer .footercol3 {}
	#footer .footercol4 {border-right: 1px solid #ddd; width: 203px}

.menu_list {
	width: 540px;
}
.menu_head {
	color:#FFFFFF;
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
       font-weight:bold;
       background: #2981a5 url(left.png) center right no-repeat;
}
.menu_body {
	
	padding: 10px 10px 10px 10px
}
.menu_body a {
  display:block;
  color:#FFF;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover {
  color: #000000;
  text-decoration:underline;
  
}

.clear {display:block; content:"."; clear:both; font-size:0; line-height:0; height:0; overflow:hidden}
.clear5 {display:block; content:"."; clear:both; font-size:0; line-height:0; height:5px; overflow:hidden}
.clear10 {display:block; content:"."; clear:both; font-size:0; line-height:0; height:10px; overflow:hidden}
.clear20 {display:block; content:"."; clear:both; font-size:0; line-height:0; height:20px; overflow:hidden}
.clear30 {display:block; content:"."; clear:both; font-size:0; line-height:0; height:30px; overflow:hidden}
.clear100 {display:block; content:"."; clear:both; font-size:0; line-height:0; height:100px; overflow:hidden}
.spacer-d10 {clear: both; height: 9px; border-bottom: 1px dotted #ccc; margin-bottom: 10px}
.spacer-d20 {clear: both; height: 19px; border-bottom: 1px dotted #ccc; margin-bottom: 20px}
.spacer-d30 {clear: both; height: 29px; border-bottom: 1px dotted #ccc; margin-bottom: 30px}
.spacer-s10 {clear: both; height: 9px; border-bottom: 1px solid #eee; margin-bottom: 10px}
.spacer-s20 {clear: both; height: 19px; border-bottom: 1px solid #eee; margin-bottom: 20px}
.spacer2-s20 {clear: both; height: 19px; border-top: 1px solid #eee}
.spacer-s30 {clear: both; height: 29px; border-bottom: 1px solid #eee; margin-bottom: 30px}

.highlight {background: #f0e5d2; border: 1px dotted #d1c3aa; padding: 10px}


/*////////////////////		Text		////////////////////*/

h1 {font-weight: normal; font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #333; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 20px solid #ccc; border-right: 10px groove #2a85aa; background: #eee; padding: 10px 10px; margin-bottom: 20px}
h2 {font-weight: bold; font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #000; padding: 10px 0}
h3 {font-weight: normal; font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #333; padding: 10px 0}
	.title h3 {font-weight: normal; font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #2a85aa; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 20px solid #ccc; border-right: 10px groove #2a85aa; background: #eee; padding: 10px 10px; margin-bottom: 20px}
h4 {font-weight: bold; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #142342; margin-bottom: 5px; padding-bottom: 2px}
h5 {font-weight: normal; font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #333; border-top: 1px solid #fff; border-bottom: 1px solid #ddd; background: #eee; padding: 10px 10px}
h6 {font-weight: normal; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #000; border-bottom: 1px solid #ccc; margin-bottom: 10px}

p {color: #000}
.post p {margin-bottom: 10px}
.post ul {border-bottom: 10px solid #fff}
.post img {margin: 0; padding: 0}
.post .alignright {margin-left: 20px}
.post .alignleft {margin-right: 20px}
#comments p {margin-bottom: 10px; font-size: 11px}

.post img.wp-post-image {border: 1px solid #ccc; padding: 1px}

.latest {margin-bottom: 20px}
.latest p {font-size: 11px}
.latest img.wp-post-image {float: left; margin-right: 10px; border: 1px solid #ccc; padding: 1px}

.meta {color: #999}
.meta span {display: block; width: 16px; height: 16px; margin-right: 3px; float: left}
.meta span.portfolio {background-image: url(images/icons/portfolio.png)}
.meta span.news {background-image: url(images/icons/news.png)}
.meta span.client {background-image: url(images/icons/client.png)}
.meta span.casestudy {background-image: url(images/icons/casestudy.png)}
.meta span.testimonial {background-image: url(images/icons/testimonial.png)}
.meta span.partner {background-image: url(images/icons/partner.png)}
.meta span.job {background-image: url(images/icons/job.png)}

.comments-count {float: right}
.comments-count p {color: #2c4e5c; font-size: 11px}

#comments {margin: 20px 0 0 0; padding: 20px 0 0 0; border-top: 10px solid #7fbbd3}
	#comments ul {list-style: none; margin: 0; padding: 0}
	#comments ul li.even {padding: 20px; background-color: #eee}
	#comments ul li.odd {padding: 20px; background-color: #f5f5f5}
	#comments .comment-author {float: left; font-weight: bold}
	#comments .comment-author .says {display: none}
	#comments .comment-meta {text-align: right; padding-bottom: 10px}

.portfolio img {border: 1px solid #ccc; padding: 1px}
.portfolio1, .portfolio2 {float: left; width: 284px; padding-right: 24px}
.portfolio3 {float: left; width: 284px}
.portfoliohome1, .portfoliohome2 {float: left; width: 284px; padding-right: 24px}
.portfoliohome1 {padding-left: 40px}

.compare_table {border-collapse: collapse; border: 1px solid #ccc}
.compare_table th {padding: 5px}
.compare_table td {padding: 3px}

.breadcrumbs {padding: 0 0 10px 0}

.list {margin: 0; padding: 0 0 0 30px; list-style: circle; font-size: 11px}

.blue {color: #3c95b5}
.orange {color: #f46c2e}
.green {color: #6d9a51}
.dark {color: #333}
.black {color: #000}
.grey {color: #666}
.white {color: #fff}
.red {color: #c00}

.xxxlarge {font-size: 20px}
.xxlarge {font-size: 18px}
.xlarge {font-size: 16px}
.large {font-size: 14px}
.mediumlarge {font-size: 13px}
.medium {font-size: 12px}
.smallmedium {font-size: 11px}
.small {font-size: 10px}
.xsmall {font-size: 8px}

.textright {text-align: right}
.textleft {text-align: left}
.textcenter {text-align: center}

.alignright {float: right}
.alignleft {float: left}
.alignmiddle {vertical-align: middle}

.clearright {clear: right}
.clearleft {clear: left}
.clearboth {clear: both}

.pad10 {padding: 10px}

.icon16-12px {vertical-align: middle; padding: 0 0 4px 0}
.icon16-11px {vertical-align: middle; padding: 0 0 2px 0}


/*////////////////////		Linkology		////////////////////*/

a:link, a:visited {text-decoration: none; color: #2a85aa}
a:hover {text-decoration: underline}
a:active {text-decoration: none}

a.blue:link,a.blue:visited {color: #3c95b5}
a.orange:link,a.orange:visited {color: #f46c2e}
a.green:link,a.green:visited {color: #6d9a51}
a.dark,a.dark:visited {color: #333}

a.orangeblock {display: block; text-decoration: none; color: #fff; border-bottom: 1px solid #c6501a; background: #f46c2e; padding: 5px 0 5px 10px}
a.orangeblock:hover {background: #fd8046}
a.greenblock {display: block; text-decoration: none; color: #fff; border-bottom: 1px solid #436a2b; border-top: 1px solid #fff; background: #6d9a51; padding: 5px 0 5px 10px}
a.greenblock:hover {background: #82ae67}
a.blueblock {display: block; text-decoration: none; color: #fff; border-bottom: 1px solid #196888; border-top: 1px solid #fff; background: #2a85aa; padding: 5px 0 5px 10px}
a.blueblock:hover {background: #3c95b5}
a.greyblock {display: block; text-decoration: none; color: #fff; border-bottom: 1px solid #000; background: #333; padding: 5px 0 5px 10px}
a.greyblock:hover {background: #444}

a.external:link, a.external:visited {background: transparent url(images/external.png) right center no-repeat; padding-right: 13px}
a.external:hover {}
a.external:active {}

a.qcr:link, a.qcr:visited {display: block; padding: 6px; text-decoration: none; color: #2a85aa}
a.qcr:hover {display: block; padding: 6px; text-decoration: none; color: #fff; background-color: #6baac4}
a.qcr:active {display: block; padding: 6px; text-decoration: none}

a.button:link, a.button:visited {font-size: 0.9em; font-family: Arial, Helvetica, sans-serif; padding: 3px 5px 3px 5px; background-color: #ddd; border: 1px solid; border-color: #fff #bbb #999 #bbb; text-decoration: none; color: #000}
a.button:hover {background-color: #ffffe4; border-color: #ffffe6 #f5f5b6 #d3d397 #f5f5b6}
a.button:active {background-color: #ffffe6; border: 1px solid; border-color: #d3d397}

#footer a {color: #666}

.breakfrom a {color: #f0f}


/*////////////////////		Menu		////////////////////*/

#menu ul {padding: 0; margin: 0; list-style: none}
#menu ul li {padding: 0; margin: 0; float: left; position: relative}
#menu ul li a {display: block; text-decoration: none; color: #fff; height: 20px; line-height: 20px; padding: 0 5px 0 5px; margin: 10px 15px 10px 15px}
#menu ul li:hover {background: transparent url(images/pyramid.png) bottom center no-repeat}
#menu ul li.current_page_item a, #menu ul li.current_page_ancestor a, #menu ul li.current_page_parent a {color: #7fbbd4}
#menu ul li a:hover {text-decoration: none; background-color: #7fbbd4; color: #fff}
#menu ul li ul {display: none; background-color: #7fbbd4; padding-top: 7px; border-bottom: 7px solid #7fbbd4}
#menu ul li:hover ul {display: block; position: absolute; top: 40px; left: 0; width: 220px; z-index: 99}
#menu ul li ul li {padding: 0; margin: 0; width: 220px; border-bottom: 1px dotted #aadaee}
#menu ul li ul li a {font-size: 11px; color: #fff; height: auto; line-height: normal; padding: 5px 20px 5px 20px; margin: 0; background-color: #7fbbd4}
#menu ul li ul li a:hover {text-decoration: none; color: #fff; background-color: #5492ac}
#menu ul li.current_page_item ul li a, #menu ul li.current_page_ancestor ul li a, #menu ul li.current_page_parent ul li a {color: #fff}
#menu ul li ul li.current_page_item a {text-decoration: underline; color: #fff}

/* related blog icons */
#menu li.page-item-34 a {background: transparent url(images/icons/portfolio.png) 194px center no-repeat}
#menu li.page-item-50 a {background: transparent url(images/icons/news.png) 194px center no-repeat}
#menu li.page-item-42 a {background: transparent url(images/icons/casestudy.png) 194px center no-repeat}
#menu li.page-item-57 a {background: transparent url(images/icons/testimonial.png) 194px center no-repeat}
#menu li.page-item-44 a {background: transparent url(images/icons/partner.png) 194px center no-repeat}
#menu li.page-item-38 a {background: transparent url(images/icons/job.png) 194px center no-repeat}


/*////////////////////		Forms		////////////////////*/

.cform {padding: 0; margin: 0; border: 0}
.cform ol {padding: 0; margin: 0; list-style: none}
.cform label {display: block}
.cform .single {width: 300px}
.cform textarea {width: 400px}
.cform .sendbutton {margin-top: 10px; font-size: 20px}
.cform .reqtxt, .cform .emailreqtxt {font-size: 11px; color: #666; padding-left: 5px}
.failure {border-top: 1px solid #fcc; border-bottom: 1px solid #fcc; background: #fee; color: #c00; font-weight: bold; padding: 10px; text-align: center; margin-bottom: 10px}
.success {border-top: 1px solid #cee9ce; border-bottom: 1px solid #cee9ce; background: #e4f4e4; color: #42a342; font-weight: bold; padding: 10px; text-align: center; margin-bottom: 10px}
.cform .cf_li_err input, .cform .cf_li_err textarea, .cform .cf_li_err select {border: 1px solid #c00}

.cform .cf_hidden, .linklove {display: none}

/* Referral Form */
#li-2-3, #li-2-8, #li-2-7 {margin-bottom: 20px}
#li-2-9 label {display: inline}
#li-2-9 input {float: left; margin-right: 10px}
.cf-sb {clear: both; margin-top: 10px}

/* Bespoke Form */
#li-5-3, #li-5-5, #li-5-7, #li-5-11, #li-5-14 {margin-bottom: 20px}


/*////////////////////		Banner		////////////////////*/

.wt-rotator {position: relative; width: 900px; height: 200px; overflow: hidden}
.wt-rotator a {outline: none}
.wt-rotator .screen {position: relative; top: 0; left: 0; width: 900px; height: 200px; overflow: hidden}
.wt-rotator #strip {display: block; position: absolute; top: 0; left: 0; z-index:  0; overflow: hidden}
.wt-rotator .content-box {display: none; position: absolute; top: 0; left: 0; overflow: hidden}
.wt-rotator .main-img {display: none; position: absolute; top: 0; left: 0; z-index: 0; border: 0}
.wt-rotator .preloader {position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin-top: -18px; margin-left: -18px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #000 url(images/loader.gif) center no-repeat; background: rgba(0,0,0,.7) url(images/loader.gif) center no-repeat; z-index: 4; display: none}
.wt-rotator #timer {position: absolute; left: 0; height: 4px; background-color: #FFF; -moz-opacity: .5; filter: alpha(opacity=50); opacity: 0.5; z-index: 4; visibility: hidden; font-size: 0}
.wt-rotator .desc {color: #000; position: absolute; top: 0; left: 0; z-index: 6; overflow: hidden; visibility: hidden; text-align: left}
.wt-rotator .inner-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; -moz-opacity: .7; filter: alpha(opacity=70); opacity: 0.7; z-index: 1}
.wt-rotator .inner-text {position: absolute; padding: 10px; z-index: 2}
.wt-rotator .c-panel {position: absolute; top: 0; z-index: 7; visibility: hidden}
.wt-rotator .outer-cp {position: absolute; left: 0; width: 100%; background: #333; background: -moz-linear-gradient(top, #999 0%, #333 50%, #000 51%, #111 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#333), color-stop(51%,#000), color-stop(100%,#111)); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#111111',GradientType=0); border: 1px solid #000; border-left: none; border-right: none}
.wt-rotator .thumbnails, .wt-rotator .buttons {display: inline; position: relative; float: left; overflow: hidden}
.wt-rotator .thumbnails ul {list-style: none; margin: 0; padding: 0}
.wt-rotator .thumbnails li, .wt-rotator .play-btn, .wt-rotator .prev-btn, .wt-rotator .next-btn {list-style: none; display: inline; float: left; margin-right: 4px; overflow: hidden; width: 24px; height: 24px; line-height: 24px; text-align: center; color: #FFF; background-color: #000; border: 1px solid #000; cursor: pointer; font-weight: bold}
.wt-rotator .thumbnails li.thumb-over {color: #FFF; background-color: #CCC}
.wt-rotator .thumbnails li.curr-thumb {color: #000; background-color: #FFF; cursor: default}
.wt-rotator .thumbnails li.image {background-color: #000}.wt-rotator .thumbnails li.image.curr-thumb, .wt-rotator .thumbnails li.image.thumb-over {border-color: #06F}.wt-rotator .thumbnails li.image a, .wt-rotator .thumbnails li.image img {display: block; border: 0}
.wt-rotator .thumbnails li.image.curr-thumb img {-moz-opacity: .8; filter: alpha(opacity=80); opacity: 0.8; cursor: default}
.wt-rotator .thumbnails li * {display: none}
.wt-rotator .thumbnails li div {position: relative; color: #FFF; background-color: #000}
.wt-rotator .play-btn {background: #000 url(images/play.png) no-repeat center}
.wt-rotator .pause {background: #000 url(images/pause.png) no-repeat center}
.wt-rotator .prev-btn {background: #000 url(images/prev.png) no-repeat center}
.wt-rotator .next-btn {background: #000 url(images/next.png) no-repeat center}
.wt-rotator .button-over {background-color: #CCC}
#rotator-tooltip {position: absolute; top: 0; left: 0; z-index: 99999; display: none}
#rotator-tooltip.txt-up {margin-left: -10px; margin-bottom: 5px; background: url(images/tail.png) no-repeat; background-position: 10px bottom; background-position-x: 10px; background-position-y: bottom}
#rotator-tooltip.txt-down {margin-left: -10px; margin-top: 24px; background: url(images/rev_tail.png) no-repeat; background-position: 10px top; background-position-x: 10px; background-position-y: top}
#rotator-tooltip.img-up {background: url(images/tail.png) center bottom no-repeat}
#rotator-tooltip.img-down {background: url(images/rev_tail.png) center top no-repeat}
#rotator-tooltip .tt-txt {font-family: Arial,Helvetica,sans-serif; font-size: 12px; color: #FFF; background-color: #000; max-width: 300px; padding: 4px; margin: 8px 0}
#rotator-tooltip .tt-img {display: none; background-color: #000; padding: 2px; margin: 8px 0}
.wt-rotator .block, .wt-rotator .vpiece, .wt-rotator .hpiece {position:  absolute;  z-index: 2}