/*
-----------------------------------------------
Grey Box Method - Layout CSS
----------------------------------------------- */

body {
	background: url("../images/bg6.jpg") repeat-y fixed center 100%;
	color: #333;
	font-size: 11px;
	padding: 0 0 0px;
}


/* anchors
----------------------------------------------- */
a {
	color: #000;
	font-weight:bold;
	text-decoration: none;
}
a:hover {
	color:#333;
}

/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;cursor:pointer} 
a:link {color:#ff0080} 
a:visited {color:#ff0080} 
a:hover,a:active {
	color:#005b9a;
} 

#slogan {
	margin-bottom:0;
	padding-top: 4px;
	margin-top: -157px;
	margin-left: -1px;
	z-index: 1;
}

#slogan2 {
	margin-bottom:0;
	padding-top: 5px;
	margin-top: -150px;
	margin-left: -1px;
	z-index: 1;
}

#altbrand {
	margin-bottom:0;
	padding-top: 10px;
	margin-left: 310px;
	z-index: 1;

}

/* submit btn
----------------------------------------------- */

#submitlink, #submitlink:link, #submitlink:visited, #submitlink:focus, #submitlink:hover{
}
#submitlink:active{
}

#mysubmit { 
	width: 100px;
	height: 25px;
	color:#FFFFFF;
	display:inline-block;
	font-family:arial,sans-serif;
	font-size:12px;
	font-size-adjust:none;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	text-decoration:none;
	background: url(../images/submitbtn.png) no-repeat scroll 0 0;
	border:none;
	padding-bottom:5px;
	padding-left:0px;
	margin-left:235px;
margin-top:-22px;
	}

#sumbitbtn2 { 
	margin-top:-18px;
}


/* 960 grid system container background
----------------------------------------------- */
.container_12,
.container_16 {
	background:white;
	
}

#footer {
	margin-left: auto;
	margin-right: auto;
	width:960px;
	height:70px;
	margin-bottom: 0px;
	/* position: absolute; */
	background:white;
	
}
* html #footer{margin-bottom:-1px}/* ie rounding bug*/
* html #footer {/*only ie gets this style*/
	\height:5px;/* for ie5 */
	he\ight:5px;/* for ie6 */
}


/* headings
----------------------------------------------- */
h1, h3, h5, h6 {line-height:1.2em; margin-bottom:.3em;}
h5 {font-size:1.2em;}
h6 {font-size:1em; text-transform:uppercase;}


h1 a {
	font-weight:normal;
}

h4 {
	line-height:1.2em;
	margin-bottom:.3em;
	font-weight:bold;
	color:#005b9a;
	border-bottom:1px dotted #999999;
	padding-bottom:3px;
}

h8 {
	line-height:1.2em;
	margin-bottom:.3em;
	font-weight:bold;
	
}



/* image viewer
----------------------------------------------- */


#viewer,
#imagesBox,
#image-title, 
#image-comment {
	float: left;
    width: 600px;
    margin: 0 auto 0 auto;
	padding-right: 15px;
}
#viewer,
#imagesBox {
	float: left;
    overflow: auto;
}
#viewer {
	float: left;
    height: 450px;
    text-align: center;
    vertical-align: middle;
}
#viewer img {
    max-height: 600px;
    max-width: 600px;
    cursor: pointer;
    display: block;
    margin: 0 auto 0 auto;
}
#imagesBox {
    height: 40px;
    margin-bottom: 0px;
}        
#imagesBox img {
    height: 30px;
    width: 30px;
    float: left;
    margin: 5px 5px 0 0px;
    cursor: pointer;
}
#image-title{
    font-weight: bold;
    margin-top: 5px;
}
#image-comment {
    padding: 4px 0 4px 0; 
}

/* work image
----------------------------------------------- */
a img.pics {
	background-color: #EEEEEE;
	padding: 3px;
	margin: 1px;
}

a:hover img.pics {
	background-color: #005b9a;
}

.thumbnail2 {
	left: 0px;
	position:relative;
	border: 0px solid #EEEEEE;
	float:left;
	background:#fff;
}
	.thumbnail2 img {border: 0px solid #000}

.workimg {
	width: 200px;
	height: 150px;
	border-style:solid;
	border-width:5px;
	color:#EEEEEE
}



.newsimg {
	float: left;
	width: 125px;
	height: 88px;
	padding: 0 0px 0 0;
	margin-right: 10px;
	border-style:solid;
	border-width:3px;
	color:#EEEEEE
}

.workimgbig {
	float: left;
	padding: 0 0px 0 0;
	margin-right: 15px;
	color:#EEEEEE
}

/* work icons
----------------------------------------------- */
.icons
{
	display: block;
	text-align: right;
	float: right;
	padding: 3px 0 0 0;
}




.wkhome
{
position: relative;
background: url(../images/dot1.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 19px;
height: 19px;
padding-right: 5px;
float: left;
}

.wkhome a:hover img
{
visibility:hidden
}

.wkarrowl
{
position: relative;
background: url(../images/arrowl1.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 19px;
height: 19px;
padding-right: 5px;
float: left;
}

.wkarrowl a:hover img
{
visibility:hidden
}

.wkarrowr
{
position: relative;
background: url(../images/arrowr1.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 19px;
height: 19px;
padding-right: 5px;
float: left;
}

.wkarrowr a:hover img
{
visibility:hidden
}







/* more
----------------------------------------------- */


.cssnav
{
position: relative;
background: url(../images/more1.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 24px;
height: 24px;
padding: 0;
}


.cssnav a
{
	display: block;
	width: 24px;
	height: 24px;
	display: block;
	float: left;
	text-decoration: none;
	
}

.cssnav img
{
width: 24px;
height: 24px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
	position: absolute;
	left: 35px;
	top: 2px;
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	width: 84px;
	font-size: 13px;
}



/* contact img
----------------------------------------------- */
#ed1 {
	margin-left:100px;
margin-top:-92px;
padding-bottom:5px;

}

#john1 {
	

}

.emt {
margin-left:45px;
margin-top:-25px;
padding-bottom:7px;
}


.contact
{
	position: relative;
	top: 10px;
	
}






.contact span
{
	position: absolute;
	left: 0px;
	top: -24px;
	margin: 0px;
	padding: 0px;
	cursor: pointer;
}



/* branding
----------------------------------------------- */
h1#branding {
	font-weight:normal;
	font-size:3em;
	text-align:left;
	padding:.3em .0em .0em .5em;
	padding-top: 15px;
	margin-bottom:10;
	z-index: 5;
}


/* page heading
----------------------------------------------- */
#subnav {
	color:#005b9a;
	font-size:9px;
	margin:0px 10px 0px 13px;
	height: 20px;
}




h2#sub {
	font-size:1.3em;
	border-bottom:1px dashed #000000;
padding-left:5px;
}

#breadcrumb {
	font-size:11px;
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	/*background:#EEEEEE none repeat scroll 0 0;*/
	border-bottom:1px dashed #000000;
	margin-bottom:0;
	margin-left:7px;
	padding-left:5px;
	margin-top:0;
	padding-bottom:0;
	padding-top:0;
	width:918px;
}

#breadcrumb a {
display:inline-block;
font-family:Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
font-size:14px;
margin-left:7px;
margin-right:10px;
padding:0;
text-align:center;
text-decoration:none;
padding-bottom:3px;
padding-top:5px;
}

#email {
float:right;
margin-bottom:0px;
padding-left:0;
padding-right:15px;
padding-top:2px;
}

#email a{
font-size:13px;
padding-top: 3px;
padding-right: 0px;
}



#emailtext {
margin-top:-25px;
padding-left:30px;
padding-right:0;
}

/* boxes
----------------------------------------------- */
.box {
	margin-bottom:0px;
	padding:10px 0px 0px 3px;
}

.boxcontact {
	margin-bottom:0px;
	padding:10px 15px 0px 10px;
}

.box2 {
	margin-bottom:0px;
	padding:0px 10px 10px 10px;
}
.box3 {
	margin-bottom:0px;
	padding:0px 10px 10px 20px;
}

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

.box5 {
	margin-bottom:0px;
	padding:10px 10px 0px 0px;
}

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



.box h2 {
	font-size:1em;
	font-weight:normal;
	text-transform:uppercase;
	color:#fff;
	background:#333;
	margin:-10px -10px 0 -10px;
	padding:6px 12px;
}
.box h2 a,
.box h2 a.visible {
	color:#fff;
	background:#333 url("../img/switch_minus.gif") 97% 50% no-repeat;
	display:block;
	padding:6px 12px;
	margin:-6px -12px;
	border:none;
}
.grid_4 .box h2 a {
	background-position: 97% 50%;
}
.grid_5 .box h2 a {
	background-position: 98% 50%;
}
.grid_12 .box h2 a {
	background-position: 99% 50%;
}


.box h2 a.hidden,
.box h2 a.hidden:hover {
	background-image: url("../img/switch_plus.gif");
}
.box h2 a:hover {
	background-color:#111;
}
.block {
	padding-top:10px;
}

.block2 {
	padding-top:0px;
}

div.menu {
	padding:0;
}
div.menu h2 {
	margin:0;
}
div.menu .block {
	padding-top:0;
}

.boxwhatever {
	margin-bottom:0px;
	padding:10px 0px 0px 10px;
	text-align: center;
}

.boxportfolio {
	margin-bottom:0px;
	padding:10px 0px 0px 10px;
	text-align: center;
}

.boxmailing {
	margin-bottom:0px;
	padding:10px 25px 0px 25px;
	text-align: left;
}

#leftcolumn {
	padding-bottom: 20px;
	margin-left:7px;
	width:209px;
	margin-top:-4px;
}


.portfolio img {
	border:2px solid #EEEEEE;
	padding:5px;
	margin-right:10px;
}


.portfolio h4 {
	margin-right:5px;
}



.flashportfolio {
	border:2px solid #EEEEEE;
	padding:5px;
	margin-right:5px;
}


.error404 {
	background-image: url("../images/error404.png");
}



/* paragraphs, quotes and lists
----------------------------------------------- */
p {
	margin-bottom:1em;
}
blockquote {
	font-family: Georgia, 'Times New Roman', serif;
	font-size:1.2em;
	padding-left:1em;
	border-left:4px solid #ccc;
}
blockquote cite {
	font-size:.9em;
}
ul, ol {
	padding-top:0;
}


/* menus
----------------------------------------------- */

#topmenu ul {
	list-style-image:url(http://www.whatwhat.co.uk/images/bullet_2.png);
list-style-position:outside;
list-style-type:disc;
margin-bottom:0;
margin-top:0;
padding-left:0px;
padding-bottom:10px;
margin-left:-10px;
font-size:13px;
}

#topmenu ul li {
padding-bottom:5px;

}



ul.menu {
	list-style:none;
	border-top:1px solid #bbb;
}
ul.menu li {
	margin:0;
}
ul.menu li a {
	
	display:block;
	padding:4px 10px;
}

ul.menu li a:hover {
	background:#005B9A;
}
ul.menu li a:active {
	background:#005B9A;
}


/* submenus
----------------------------------------------- */
ul.menu ul {
	margin:0;
}
ul.menu ul li a {
	padding-left:20px;
	color:#FF0080;
}

ul.menu ul li a:hover {
	color:#005B9A;
	background:#fff;
}
ul.menu ul li a:active {
	color:#005B9A;
	background:#fff;
}


/* section menus
----------------------------------------------- */
ul.section {
	border-top:0;
	margin-bottom:0;
}
ul.section li {
	color:#FF0080;
}
ul.section li a {
	color:#005B9A;
}

ul.section li a:hover {
	color:#fff;
	background:#005B9A;
}
ul.section li a:active {
	color:#fff;
	background:#005B9A;
}
ul.section li li a {
	/*background:#ddd;*/
	border-bottom:1px solid #eee;
}
/*ul.section li li a:hover {
	background:#ccc;
}*/
ul.section li li a:active {
	background: url(http://www.whatwhat.co.uk/images/bullet_2.png) no-repeat;
	background-position: 2% 50%; 
	font-size: 12px;
}

ul.section ul li {
	text-transform:none;
	
}
ul.section ul.current li a {
	/*background:#eee;*/
	border-bottom:1px solid #fff;
}
/*ul.section ul.current li a:hover {
	background:#005B9A;
}*/
ul.section ul.current li a:active {
	background:#fff;
}
ul.section li a.current {
	color:#005B9A;
	background:#fff;
}
ul.section li a.current:hover {
	color:#fff;
	background:#005B9A;
}
ul.section li a.current:active {
	color:#fff;
	background:#005B9A;
}
ul.section li a.active {
	color:#fff;
	background:#005B9A;
	cursor:default;
	background: url(http://www.whatwhat.co.uk/images/bullet_2.png) no-repeat;
	background-position: 2% 50%; 
	font-size: 12px;
}
ul.section li.current > a.active,
ul.section li.current > a.active:hover {
	color:#fff;
	background:#005B9A;
	cursor:default;
	background: url(http://www.whatwhat.co.uk/images/bullet_2.png) no-repeat;
	background-position: 2% 50%;
}

ul.section li ul a {
	background: url(http://www.whatwhat.co.uk/images/bullet_2.png) no-repeat;
	background-position: 2% 50%;
	font-size: 12px;
}

ul.section li ul a:hover {
	background: url(http://www.whatwhat.co.uk/images/bullet_2.png) no-repeat;
	background-position: 2% 50%; 
	font-size: 12px;
}



/* table
----------------------------------------------- */
table {
	width:100%;
	border:1px solid #bbb;
	margin-bottom:10px;
}
col.colC {
	width:8em;
}
th, td {
	padding:.2em 1em;
	text-align:left;
}
thead th {
	border-bottom:2px solid #888;
	background:#bbb;
	padding:.4em 1em .2em;
}
thead th.table-head {
	font-size:1em;
	font-weight:normal;
	text-transform:uppercase;
	color:#fff;
	background:#555;
	border:1px solid #555;
}
tbody th,
tbody td {
	border-top:1px solid #bbb;
	border-bottom:1px solid #bbb;
	background:#eee;
}
tbody tr.odd th,
tbody tr.odd td {
	background:#fff;
}
tfoot th,
tfoot td {
	border-top:2px solid #666;
	background:#eee;
}
tfoot tr.total th,
tfoot tr.total td {
	border-top:6px double #666;
}
tfoot tr.total th {
	text-transform:uppercase;
}
th.currency,
td.currency {
	text-align:right;
}


/* forms
----------------------------------------------- */
form {
	overflow:hidden;

}

form.subscribe {
	-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/submitbtn.png) no-repeat scroll 0 0;
border:medium none;
color:#FFFFFF;
display:inline-block;
font-family:arial,sans-serif;
font-size:12px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:25px;
margin-left:235px;
margin-top:-22px;
padding-bottom:5px;
padding-left:0;
text-decoration:none;
width:100px;slo

}
fieldset {
	border:1px solid #bbb;
	padding:10px;
	position:relative;
	background:#e9e9e9;
	margin-bottom:10px;
}
legend {
	font-size:1.1em;
	padding:.4em .8em;
	background:#fff;
	border:1px solid #bbb;
}
fieldset.login p {
	margin-bottom:1em;
	margin-top:0pt;
}
fieldset p label {
	width:98%;
}
fieldset p input {
	width:98%;
}
fieldset p select {
	width:99%;
}
fieldset.login p label {
	float:left;
	line-height:2em;
	margin-right:3%;
	text-align:right;
	width:32%;
}
fieldset.login p input {
	width:60%;
}
fieldset.login input.button {
	margin-left:35%;
}
form p.notice {
	font-weight:bold;
}
input.search.text {
	width:66%;
}
input.search.button {
	width:28%;
	margin-left:2%;
}


/* articles
----------------------------------------------- */


.articles {
	padding:0;
	
}
.articles h2 {
	margin:0;
}
#articles {
	padding-top:0;
	
}
.article {
	border-top:0px solid #666;
	padding-top:.0em;
	
}

.article1 {
	border-top:0px solid #666;
	padding-left:10px;
	
}



.article2 {
	border-top:0px solid #666;
	padding-left:0px;
	
}


.news article1 {
	border-top:0px solid #fff;
	padding-left:10px;
}

.box .first article {
	border-top:0px solid #fff;
	padding:0px 0px 0 10px;
}

.box .second article {
	border-top:0px solid #fff;
	padding:0px 0px 0 0px;
}

.box .third article {
	border-top:0px solid #fff;
	padding:0px 0px 0 20px;
}

.article h2 {
	font-size:2em;
	font-weight:normal;
	text-transform:none;
	color:#333;
	background:transparent;
	padding:0;
	margin:0;
	border:none;
}
.article h3 {
	margin-bottom:.2em;
	font-size:1.6em;
}
.box .first {
	border-top:none;
}
.article h4 {
	line-height:1.2em;
	margin-bottom:.3em;
	font-weight:bold;
	color:#005b9a;
}

.article h5 {
}

.article a.image {
	float:left; 
	margin:3px 10px 10px 0px; 
	padding:4px;
	border:0px solid #bbb;
	background:#fff;
}

.article1 a.image {
	float:left; 
	margin:3px 10px 10px 0px; 
	padding:4px;
	border:0px solid #bbb;
	background:#fff;
}

.article2 a.image {
	float:left; 
	margin:3px 10px 10px 0px; 
	padding:4px;
	border:0px solid #bbb;
	background:#fff;
}

.article a.image img {
	float:left; 
}

.article1 a.image img {
	float:left; 
}

.article1 p.meta {
	color:#666;
	border-bottom:1px dotted #999;
	padding:.3em 0;
	margin-bottom:.8em;
}

.article2 p.meta {
	color:#666;
	border-bottom:1px dotted #999;
	margin-bottom:4px;

}

.article p.meta {
	color:#666;
	border-top:1px dotted #999;
	border-bottom:1px dotted #999;
	padding:.3em 0;
	margin-bottom:.8em;
}

.portfolio { 
	width:680px;
}

.portfolio p.meta {
	color:#666;
	border-bottom:1px dotted #999;
	padding-bottom:3px;
padding-left:2px;
padding-top:0;
	margin-bottom:.8em;
}


/* site information
----------------------------------------------- */
#site_info .box {
padding-top:5px;
	padding-bottom:0px;
		border-top-color: #000000;
	border-top-style: dashed;
	border-top-width: 1px;
	border-bottom-color: #000000;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	margin:0px 10px 30px 10px;
}



/* AJAX sliding shelf
----------------------------------------------- */
#loading {float:right; margin-right:14px; margin-top:-2px;}
.block {padding-bottom:1px;}





/* Mootools Kwicks
----------------------------------------------- */
.kwicks a.img {
	float:left; 
	margin:0px 0px 0px 0; 
	padding:0px;
	border:0px;
}

#kwick-box { 
	padding:0;
	overflow:hidden;
	margin:0px 15px 20px 10px;
	
}
#kwick-box h4 { 
padding-left:0px;
margin-left:10px;
	padding-bottom:5px;
	margin:0;
}
#kwick {
	position: relative;
}
#kwick .kwicks {
	display: block;
	background: white;
	height: 210px;
	list-style:none;
	margin:0;
	overflow:hidden;
	
}
#kwick li {
	float: left;
	margin:0;
	padding:0;
}
#kwick .kwick {
	display: block;
	cursor: pointer;
	overflow: hidden;
	height: 210px;
	width: 207px;
	background: #ff0080;
	padding: 10px;
	
}
#kwick .kwick span {
padding-left: 0px;
padding-bottom: 3px;
width: 50px;

}
#kwick .one {
	background: #fff;
}
#kwick .two {
	background: #fff;
}
#kwick .three {
	background: #fff;
}
#kwick .four {
	background: #fff;
}




/* accordian - portfolio 
----------------------------------------------- */

.wrap {
	padding-top: 1px;
	background: url(images/BG-light-horizontal-dots.gif) top left repeat-x;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #3f3e37;
	margin-left: -5px; margin-right: -5px;
}

.bottomMargin {
	padding-bottom: 10px;
}
	
/*tooltip*/

div.tooltip {
	width: 200px;
	color: #fff;
	text-align: center;
}

div.tooltip h4 {
	color: #fff;
	font-weight: bold;
	text-shadow: 2px 2px 1px #222;
	margin: 0;
	padding: 13px 10px 5px;
	background: url(images/balloon.png) top left no-repeat !important;
	background: url(images/balloon.gif) top left no-repeat;
	font-size: 11px;
}

div.tooltip p {
	margin: 0;
	padding: 0 10px 15px;
	text-shadow: 2px 2px 1px #222;
	background: url(images/balloon.png) bottom left no-repeat !important;
	background: url(images/balloon.gif) bottom left no-repeat;
	font-size: 10px;
}


/* accordion togglers */
.toggler {
	font-weight: bold;
	color: #3f3e37;
	display:block;
	width:100%;
	cursor:pointer;
	vertical-align: middle;
}
.toggler div{
	margin-left: 10px;
	position: relative;
}



.toggler div span{
	
	line-height: 20px !important;
	line-height: 25px ;
}


/* toggler hover */

.togglerHover {
	font-weight: bold;
	color: #3f3e37;
	display:block;
	width:100%;
	cursor:pointer;
	vertical-align: middle;
}
.togglerHover div{
	margin-left: 10px;
	position: relative;
}

.togglerHover div span{
	
	line-height: 20px !important;
	line-height: 25px ;
}

ul.submenu li {
	font-size: 12px;
}



/* accordion elements */

.accordion {
	color: #3f3e37;
	text-align:left;
	padding-left: 10px;
	padding-right: 10px;
	
}







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

		/*
			Vertical Accordions
		*/
		
		.accordion_toggle {
			display: block;
			cursor:pointer;
			border-bottom:1px dotted #999999;
			color:#005B9A;
			font-weight:bold;
			line-height:1.2em;
			margin-bottom:0.3em;
			padding-bottom:3px;
			margin: 0 0 5px 0;
			font-size:19px;
			padding: 0 10px 0 10px;
			line-height: 30px;
		}
		
		.accordion_toggle_active {
			color:#005B9A;
			border-bottom: 1px dotted #999;
			margin-bottom: 5px;
		}
		
		.accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
			padding-left:10px;
			font-size:12px;
		}
			
			.accordion_content h2 {
				margin: 15px 0 5px 10px;
				color: #0099FF;
			}
			
			.accordion_content p {
				line-height: 150%;
				padding: 5px 10px 15px 10px;
			}
			
		.vertical_accordion_toggle {
			display: block;
			height: 30px;
			width: 600px;
			background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
			padding: 0 10px 0 10px;
			line-height: 30px;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 12px;
			color: #000000;
			border-bottom: 1px solid #cde99f;
			cursor: pointer;
			margin: 0 0 0 0;
		}

		.vertical_accordion_toggle_active {
			background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f;
			color: #ffffff;
			border-bottom: 1px solid #f68263;
		}

		.vertical_accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}

			.vertical_accordion_content h2 {
				margin: 15px 0 5px 10px;
				color: #0099FF;
			}

			.vertical_accordion_content p {
				line-height: 150%;
				padding: 5px 10px 15px 10px;
			}
  			
	
					
					
    /* Container styling*/

    
    #vertical_nested_container {
      margin: 20px auto 20px auto;
      width: 620px;
    }