/*
      Created by Carlo@fresh79.com
	  
*/

* { padding: 0; margin: 0; }

body {
 font-family: Helvetica neue, Helvetica, Arial, sans-serif;
 font-size: 0.80em;
 background: #000 url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/bgbody.jpg') top center no-repeat;
 color: #eee;
}
/*************************************/
/*************** Layout **************/
/*************************************/
#wrapper { 
 margin: 0 auto;
 width: 1000px;
}

#header {
 color: #333;
 width: 1000px;
 float: left;
 padding: 0px;
 height: 80px;
 margin: 0px 0px 0px 0px;
 background: #000;
}

#flash {
 width:650px;
 height: 450px;
 background: none;
 float: right;
 margin-top: -1px;
 margin-right: -1px;
 z-index: 100;
 }
 
 #leftcolumn { 
 color: #333;
 background: none;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 400px;
 width: 280px;
 float: left;
}
#menu-box {
padding-top: 100px;
padding-left: 40px;
}
#rightcolumn { 
 float: right;
 color: #b1b3b4;
 background: #none;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 400px;
 width: 680px;
 display: inline;
}
#footer { 
background: none;
 width: 980px;
 clear: both;
 color: #333;
 margin: 0px 0px 10px 0px;
 padding: 10px;
 height:80px;
}
#bigfoot {
width: 100%;
height: 180px;
background: #000 url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/footerbg.jpg') no-repeat;
position: fixed;
bottom: 0px;
z-index: -50;
} 

#butterfly-holder {
width: 1000px;
height: 200px;
margin: 0 auto;
background: none;
}
#butterfly {
margin-left: 400px;
background:none;
z-index: 2500;
}
/*************************************/
/*********** Header & Logo ***********/
/*************************************/ 
 h1.logo, h1.logo-text {
 margin: 0;
 padding: 0;
 font-size: 200%;
}

h1.logo a {
 width: 319px;
 display: block;
 background: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/logo.jpg) no-repeat;
 position: absolute;
 height: 90px;
}

h1.logo a span {
 position: absolute;
 top: -1000px;
}

h1.logo-text a {
 text-decoration: none;
 outline: none;
 position: absolute;
}

p.brief {
width: 600px;
font-weight: light;
color: #666666;
}

p .contact {
width: 230px;
height:350px;
float: right;

}
.contact {
width: 230px;
height:350px;
float: right;
color: #666666;
}
.contact a:link ,a:visited {
color: #b1b3b4;
}
.contact a:hover ,a:active{
color: #fff;
}
#content-fixed {
padding-top: 100px;
}

/*************************************/
/********** Typography ***************/
/*************************************/

h2.pink {
background-image: url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-pink.gif');
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: 9px;
font-weight: normal;
letter-spacing: 1px;
line-height: 24px;
}
h2.yellow {
background-image: url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-yellow.gif');
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: 9px;
font-weight: normal;
letter-spacing: 1px;
line-height: 24px;
}
h2.blue {
background-image: url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-blue.gif');
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: 9px;
font-weight: normal;
letter-spacing: 1px;
line-height: 24px;
}
h2.red {
background-image: url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-red.gif');
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: 9px;
font-weight: normal;
letter-spacing: 1px;
line-height: 24px;
}
h2.green {
background-image: url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-green.gif');
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: 9px;
font-weight: normal;
letter-spacing: 1px;
line-height: 24px;
}
h2.orange{
background-image: url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-orange.gif');
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: 9px;
font-weight: normal;
letter-spacing: 1px;
line-height: 24px;
}
h2.purple {
background-image: url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-purple.gif');
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: 9px;
font-weight: normal;
letter-spacing: 1px;
line-height: 24px;
}
h2.lime {
background-image: url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-lime.gif');
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: 9px;
font-weight: normal;
letter-spacing: 1px;
line-height: 24px;
}
h2.teal {
background-image: url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-teal.gif');
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: 9px;
font-weight: normal;
letter-spacing: 1px;
line-height: 24px;
}
h2.lightblue {
background-image: url('http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-lightblue.gif');
background-repeat: no-repeat;
background-position: 0 .1em;
padding-left: 9px;
font-weight: normal;
letter-spacing: 1px;
line-height: 24px;
}
/*************************************/
/*************** Menu ****************/
/*************************************/

ul.menu {
font-size: 1.2em;
text-align: left;
padding-left: 0px;
list-style:none;
line-height: 23px;
} 
li.lightblue a{
color: #b1b3b4;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-lightblue.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.lightblue a:hover {
color: #99ccff;
font-weight: normal;
}
li.lightblue-active a {
color: #99ccff;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-lightblue.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.pink a{
color: #b1b3b4;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-pink.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.pink a:hover {
color: #cc0066;
font-weight: normal;
}
li.pink-active a{
color: #cc0066;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-pink.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.yellow a{
color: #b1b3b4;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-yellow.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.yellow a:hover {
color: #ffff00;
font-weight: normal;

}
li.yellow-active a {
color: #ffff00;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-yellow.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.blue a{
color: #b1b3b4;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-blue.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.blue a:hover {
color: #0099cc;
font-weight: normal;
}
li.blue-active a {
color: #0099cc;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-blue.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.red a{
color: #b1b3b4;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-red.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.red a:hover {
color: #cc0033;
font-weight: normal;
}
li.red-active a {
color: #cc0033;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-red.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.green a{
color: #b1b3b4;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-green.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.green a:hover {
color: #33cc33;
font-weight: normal;
}
li.green-active a {
color: #33cc33;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-green.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.orange a{
color: #b1b3b4;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-orange.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.orange a:hover {
color: #ff9900;
font-weight: normal;
}
li.orange-active a{
color: #ff9900;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-orange.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.purple a{
color: #b1b3b4;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-purple.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.purple a:hover {
color: #cc00cc;
font-weight: normal;
}
li.purple-active a{
color: #cc00cc;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-purple.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.teal a{
color: #b1b3b4;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-teal.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.teal a:hover {
color: #00ffcc;
font-weight: normal;
}
li.teal-active a{
color: #00ffcc;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-teal.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.lime a{
color: #b1b3b4;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-lime.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}
li.lime a:hover {
color: #99ff00;
font-weight: normal;
}
li.lime-active a {
color: #99ff00;
font-weight: normal;
text-decoration: none;
padding-left: 10px;
padding-top: 12px;
background-image: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/li-lime.gif);
background-repeat: no-repeat;
background-position: 0 .8em;
}

/*************************************/
/*************** Slider **************/
/*************************************/

#photo_wrapper {
	height:	309px;
	width: 430px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	float: left;
background:url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/imagebg.png) top left no-repeat;
}
#fade-sides {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 800px;
	height: 300px;
	background:url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/lefbtfade.png) top left no-repeat;
}
#fade-sides div {
	background:url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/rightfade.png) top left no-repeat;
	width: 100px;
	height: 300px;
	float: right;
}
#photos {
	height:	309px;
	width: 12000px;
	position: relative;
	z-index: 2;
	top: 0;
	left: 00px;
}
#photos ul {
	list-style: none;
	clear:both;
	float: left;
	height: 309px;
	padding-bottom: 0px;
}
#photos li {
	float: left;
	height: 309px;
	margin-right: 50px;
	/*min-width: 430px;*/
	text-align:center;
/*  width:auto !important;
  width:542px;*/
}

#photos li img {
margin: 0 auto;	
}

#photos li.loading {
	/*width: 430px;
	height: 309px;*/
	margin: 0 10px 0 0;
	background-image:url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/preloaded.gif);
	border: 1px solid #999;
}


#imagenav {
clear: both;	
list-style-type: none;
width: 450px;
height: 20px;
z-index: 50;
background: none;
padding-left: -60px;
}
#imagenav div {
display: none;
}

#next {
position: absolute;
top: 0px;
right: 0px;
z-index: 50;
width: 20px;
height: 20px;
background:url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/nextbtn.png) top left no-repeat;
}
#next.grey {
background: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/nextbtn_grey.png) top left no-repeat;	
}
#previous {
position:absolute;	
top: 0px;
left: 0px;
z-index: 50;
display: block;
width: 20px;
height: 20px;
background:url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/prevbtn.png) top left no-repeat;
}
#previous.grey {
background: url(http://www.gray-associates.co.uk/assets/templates/Gray/template_images/prevbtn_grey.png) top left no-repeat;	
}
#next span,
#previous span {
margin: 0 0 0 -10000px;	
}

/****** PROJECT NAV **********/
#gallery {
width: 610px;
height: 450px;
z-index: 1000;
background: none;
}

#myrow {
background: none;
width:450px;
height: 15px;
float:left;
margin-top: 325px;
margin-left: -30px;
z-index: 50;
color: #fff;
}
#myrow ul {

}
#myrow ul li{
font-size: 12px;
text-decoration: none;
font-weight: bold;
}
#myrow ul li a:link{
font-size: 12px;
text-decoration: none;
font-weight: bold;
color: #dddddd;
}
#myrow ul li a:active {
font-size: 12px;
text-decoration: underline;
font-weight: bold;
color: #ff0000;
}
#myrow ul li a:hover{
font-size: 12px;
text-decoration: underline;
font-weight: bold;
color: #a8e1fc;
}
#myrow ul li a:visited {
font-size: 12px;
text-decoration: none;
font-weight: bold;
color: #a8e1fc;
}
#thumbs {
width: 180px;
height: 390px;
background: none;
float: right;
overflow: hidden;
}
#row_nav {
    width: 600px;
	margin: 0 auto;
	padding: 0px 0;
	float: right;
	margin-top: -314px;
	height: 390px;
	background: none;
}
#row_nav ul {
list-style: none;	
margin: 0;
padding-left:20px;
width: 210px;
padding-top: 5px;
}
#row_nav li {
float: left;
padding-bottom: 5px;	
padding-left: 4px;
}
#row_nav a {
margin-right: 4px;
color: #FFF;
text-decoration: none;
font-weight: bold;
}
#row_nav a:hover {
margin-right: 4px;
color: #a8e1fc;
}
#row_nav a:active {
margin-right: 4px;
color: #a8e1fc;
}
#row_nav img {
border: none;
}

img, div { behavior: url(/css/iepngfix.htc) }
.info {
width: 450px;
height: 80px;
background: none;
margin-left: 20px;
padding-top: 10px;
}