/* CSS */
html,body{
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
font-size: 10px;
color: #766A65;
background-repeat: repeat;
background-color: #f8f8f8;
}

.container{
background: #fff;}

h1, h2, h3, h4{
color: #E00034;
}

h2{
font-size: 2.3em;}


a{color: #E00034;
text-decoration: none;
}

a:hover{
text-decoration: underline;}

#site{
border: 1px solid #766A65;
position: relative;
padding-bottom: 100px;
}

.headBox{
border-bottom: 1px solid #766A65;

}


#header{
padding-top: 47px;
height: 128px;
}

#logo a{
background: url(/img/logo.gif) top left no-repeat;
text-indent: -2999em;
display: block;
width: 63px;
height: 36px;
outline-style:none;
outline-width:0;
}

/* navigation */
#nav {
	width:90px;
	float: left;
}



ul.navlist{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
font-size: 1.3em;
}

ul.navlist li{
}

ul.navlist li a{
text-decoration: none;
color: #766A65;
width: 120px;
border-bottom: 1px solid #766A65;
display: block;
outline-style:none;
outline-width:0;
}

ul.navlist li a:hover,
ul.navlist li a.current{
color: #E00034;
border-bottom: 1px solid #E00034;
background: url(/img/navhover.png) 0 10px no-repeat;
padding-left: 8px;
width: 112px;
}

ul.subNav li a{
color: #B5ACA6;
border-bottom: 1px solid #B5ACA6;
width: 120px;

}

ul.subNav li a:hover,
ul.subNav li a.current{
color: #E00034;
border-bottom: 1px solid #E00034;
background: url(/img/navhover.png) 0 10px no-repeat;
padding-left: 8px;
width: 112px;
}

ul#oldSite{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
font-size: 1.3em;
}

ul#oldSite li{
}

ul#oldSite li a{
text-decoration: none;
color: #766A65;
width: 120px;
border-bottom: 1px solid #766A65;
display: block;
outline-style:none;
outline-width:0;
}

ul#oldSite li a:hover,
ul#oldSite li a.current{
color: #E00034;
border-bottom: 1px solid #E00034;
background: url(/img/navhover.png) 0 10px no-repeat;
padding-left: 8px;
width: 112px;
}


/* panes */
#panes {
	margin-left: 130px;
	
	/* must be relative so the individual panes can be absolutely positioned */
	position:relative;
}

/* crossfading effect needs absolute positioning from the elements */
#panes div {
	display:none;		
	position:absolute;
	top:0px;
	left:0px;
	width:470px; 
}
#content{
padding-top: 30px;
min-height: 439px;}

#projectcontent{
min-height: 469px;}

#content p,
#content ul{
font-size: 1.4em;
}

#footer{

position: absolute;
bottom: 0;
height: 80px;
padding-top: 20px;
}
#footer h3{
font-size: 1.3em;
line-height: 1.4em;
}

#footer p{
font-size: 1.2em;
line-height: 1.5em;
}


.emailSignup{
position: absolute;
bottom: 0;
padding-bottom: 0;
margin-bottom: 0;}

.emailSignup a{
background: #fff url(/img/emailbtn.gif) top left no-repeat;
height: 18px;
color: #fff;
width: 110px;
display: block;
text-align: center;
text-decoration: none;
cursor: pointer;
}

.emailSignup a:hover{
background-position: bottom left;
}

#btnBlog a{
background: url(/img/blogbtnanim2.gif) top left no-repeat;
width: 50px;
height: 50px;
display: block;
text-indent: -2999em;}

#btnBlog a:hover{
background-position: bottom left;}

#btnShop a{
background: url(/img/btn_shop.png) top left no-repeat;
width: 50px;
height: 50px;
display: block;
text-indent: -2999em;}

#btnShop a:hover{
background-position: bottom left;}


#projectcontent{
position: relative;}

#projectcontent img{
margin: 0;
vertical-align: top;
padding: 0;
}

#slideshow{
	overflow:hidden;
	width:950px;
	border:none;

}



	#slideshow ul{
		width:2182px;
		padding-left:0px;
	}

		#slideshow li{
			float:left;
			margin:0;
			padding: 0;
			cursor:pointer;
			list-style: none;
		}

#slideshow li.firstPanel{
width: 180px;
padding-left: 60px;
padding-right: 60px;
padding-top: 30px;}

a#next{
background: url(/img/arrownext.png) top left no-repeat;
display: block;
width: 34px;
height: 34px;
overflow: hidden;
text-indent: -2999em;
position: absolute;
top: 200px;
right: 20px;

}

a#next:hover{
background-position: bottom left;
}

a#next:active{
outline: none;}

a#prev{
background: url(/img/arrowprev.png) top left no-repeat;
display: block;
width: 34px;
height: 34px;
overflow: hidden;
text-indent: -2999em;
position: absolute;
top: 200px;
left: 20px;
}

a#prev:hover{
background-position: bottom left;}

a#prev:active{
outline: none;
}

#projectcontent h4{
margin-bottom: 5px;}

#projectcontent p{
font-size: 1.1em;
}

.clientList{
list-style: none;
padding: 0;
margin: 0;
width: 185px;
float: left;
margin-right: 10px;
padding-bottom: 20px;
}

.col{
padding: 0;
margin: 0;
width: 185px;
float: left;
margin-right: 10px;
padding-bottom: 20px;
}

#content div.col p{
font-size: 1.1em;}

.offerImg{
border: 1px solid #766A65;
margin-bottom: 20px;}

.modal { 
    background-color:#fff; 
    display:none; 
    width:280px; 
    padding:30px 50px; 
    text-align:left; 
    border:1px solid #fff; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    -moz-box-shadow: 0 0 10px #000; 
    -webkit-box-shadow: 0 0 10px #000; 
} 

.modal a.close{
background-image:url(/img/close.png);
display: block;
text-indent: -2999em; 
    position:absolute; 
    right:-10px; 
    top:-10px; 
    cursor:pointer; 
    height:20px; 
    width:20px;
}
#modalsubform{
font-size: 1.3em;
}


.emailformText{
width: 270px;
height: 25px;}

#content .contactInfo p{
font-size: 1.1em;}

#content .contactInfo h4{
margin-bottom: 0;}

.contactInfo{
width: 160px;
}

.fireRed{
color: #E00034;}

object{
margin-bottom: 20px;}

#casestudy{
padding-top: 20px;}

#more-toggle{

background: url(/img/togglesmall.png) 0 0 no-repeat;
height: 20px;
display: block;
padding-left: 10px;
line-height: 20px;
width: 100%;
cursor: pointer;
font-size: 1.1em;
}

#more-close{
background: url(/img/togglesmall.png) left bottom no-repeat;
height: 20px;
display: block;
padding-left: 10px;
line-height: 20px;
width: 100%;
cursor: pointer;
 color: #87746A;
}

#more-toggle.toggleactive {background-position: left bottom; color: #87746A;}

#mapArea{
position: relative;
}

#mapTrigger{
width: 65px;
height: 55px;
background: url(/img/trans.png) top left repeat;
position: absolute;
top:162px;
left: 235px;
display: block;
cursor: pointer;
text-indent: -2999em;}

#mapPopup{
position: absolute;
display: none;
top: 18px;
left: 238px;
}

blockquote{
padding-left: 0;
margin-left: 0;}


/* BUTTONS */

.buttons{
padding-top: 10px;
padding-bottom: 10px;
display: block;
width: 100%;
height: 30px;}

button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#776B65;
    border:1px solid #776B65;
    border-top:1px solid #776B65;
    border-left:1px solid #776B65;
     font-size:90%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    cursor:pointer;
    padding:2px; /* Links */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:2px; /* IE6 */
}
.buttons button[type]{
    padding:2px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:2px; /* IE7 */
}

button:hover{
   background-color:#E00034;
   border-color: #E00034;}

#socialLinks{
list-style: none;
margin: 0;
padding: 0;
}

#socialLinks li{
float: left;
width: 24px;
height: 24px;
margin-right: 5px;
display: block;
}

#socialLinks li a.socialNetwork{
display: block;
width: 24px;
height: 24px;
text-indent: -2999em;
}
#socialLinks li a.socialNetwork:hover{
background-position: bottom left;
}

#socialHeader{
color: #B5ACA6;
margin-bottom: 5px;
margin-top: 3px;
}

#facebookLink{
background: url(/img/icon_facebook.gif) top left no-repeat;
}

#twitterLink{
background: url(/img/icon_twitter.gif) top left no-repeat;
}

#linkedinLink{
background: url(/img/icon_linkedin.gif) top left no-repeat;
}

#flickrLink{
background: url(/img/icon_flickr.gif) top left no-repeat;
}

#vimeoLink{
background: url(/img/icon_vimeo.gif) top left no-repeat;
}


#btnCoppergallery a{
background: url(/img/copperhousegallery.gif) 0 0 no-repeat;
width: 87px;
height: 50px;
display: block;
text-indent: -2999em;
margin-left: -15px;
margin-top: 8px;
}

#btnCoppergallery a:hover{
background-position: 0px -50px;}