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

Style sheet written for Josh Schofield Design
Author: Josh Schofield
September 2009


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


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

GLOBAL NORMALIZING STYLES  

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

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	font-size: 100%;
	outline: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

a {
	background: transparent;
	font-size: 100%;
	outline: 0;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

body {
	line-height: 1;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 62.5%;
	color: #333;
	background: #fff;
}

div {
	background: transparent;
	display: block;
}

ol, ul {
	list-style: none;
}






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

GENERAL PAGE STYLES 

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

.contentwrap {
width: 960px;
margin: auto;
}

ul, ol {
display: block;
float: left;
width: 320px;
}

h1, h2 {
text-indent: -5000px;
overflow: hidden;
}

h3 {
font-size: 2.4em;
float: left;
font-weight: normal;
text-align: left;
color: #fff;
padding: 10px 25px;
}

.header1 {
background: #002953 url(../images/header1.gif) no-repeat;
width: 960px;
float: left;
padding: 35px 0px 25px;
margin: 50px 0px 10px;
}

.header2 {
background: #005323 url(../images/header2.gif) no-repeat;
width: 960px;
float: left;
padding: 35px 0px 25px;
margin: 50px 0px 10px;
}

.header3 {
background: #390053 url(../images/header3.gif) no-repeat;
width: 960px;
float: left;
padding: 35px 0px 25px;
margin: 50px 0px 10px;
}

.header4 {
background: #53000c url(../images/header4.gif) no-repeat;
width: 960px;
float: left;
padding: 35px 0px 25px;
margin: 50px 0px 10px;
}

li {
font-size: 1.4em;
text-align: left;
color: #999;
padding: 10px 25px;
}

li a:link, li a:visited {
color: #555;
text-decoration: none;	
border-bottom: 1px dotted #333;
}

li a:hover {
color: #999;
text-decoration: none;
border-bottom: none;
}

.logo a:link, .logo a:visited {
color: #999;
text-decoration: none;	
border-bottom: none;
}

.logo a:hover {
color: #999;
border-bottom: none;
}

.text {
float: left;
margin-top: 25px;	
font-size: 1.4em;
text-align: left;
line-height: 2em;
color: #555;
padding: 10px 25px;
}



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

HOME PAGE STYLES 

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

.home {
width: 960px;
float: left;
background: #000;
font-size: 1.6em;
text-align: left;
line-height: 2em;
color: #fff;
border-bottom: 5px solid #ccc;
margin: 0 0 45px;
}

.home img {
float: left;
margin: 0 25px 35px;
}

.home p {
float: left;
padding: 5px 25px 10px 190px;
width: 625px;
}

.home strong {
font-size: 1.2em;
text-align: left;
font-weight: normal;
line-height: 2em;
color: #fff;
}

.home p a:link, .home p a:visited {
color: #fff;
text-decoration: none;
border-bottom: 1px dotted #fff;
}

.home p a:hover {
color: #fff;
text-decoration: none;
border-bottom: none;
}

.home ul {
display: block;
float: left;
width: 625px;
padding: 35px 0 50px 165px;
}

.home li {
font-weight: normal;
font-size: 1.2em;
text-align: left;
color: #fff;
padding: 10px 25px;
}

.home li a:link, .home li a:visited {
color: #999;
text-decoration: none;	
border-bottom: 1px dotted #999;
}

.home li a:hover {
color: #555;
text-decoration: none;
border-bottom: none;
}






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

INTRO/NAV STYLES 

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

.nav {
width: 960px;
background: #000;
height: 65px;
}

.nav h3, .nav h3.case1, .nav h3.case2, .nav h3.case3, .nav h3.case4 {
font-size: 2em;
float: left;
background: #000;
font-weight: normal;
text-align: left;
color: #ccc;
padding: 30px 15px 15px;
border-left: 25px solid #000;
}

.nav h3.case1 {
border-left: 25px solid #002953;
}

.nav h3.case2 {
border-left: 25px solid #005323;
}

.nav h3.case3 {
border-left: 25px solid #390053;
}

.nav h3.case4 {
border-left: 25px solid #53000c;
}

.nav ul {
background: #000;
float: right;
width: 440px;
padding: 38px 0 15px;
display: inline;
}

.nav li {
text-align: right;
font-size: 1.2em;
font-weight: bold;
color: #fff;
display: inline;
margin-right: 5px;
}

.nav li a:link, .nav li a:visited {
color: #fff;
border-bottom: none;
}

.nav li a:hover {
color: #555;
border-bottom: none;
}

.intro {
background: #fff;
height: 125px;
width: 960px;
float: left;
margin: 25px 0 25px;
padding-bottom: 50px;
border-bottom: 3px solid #ccc;
}

.intro img {
float: left;
}




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

FOOTER STYLES 

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

.footwrap {
width: 960px;
float: left;
text-align: left;
background: #ccc url(../images/bkgd_footer.gif) no-repeat;
margin-top: 50px;
border-top: 1px dotted #333;
padding-top: 25px;
}

.footwrap p {
font-size: 1.2em;
text-align: left;
line-height: 2em;
color: #555;
padding: 0 0 15px 50px;
}

.footwrap h4 {
font-size: 1.2em;
font-weight: bold;
text-align: left;
padding: 25px 0 50px 50px;
}

.footwrap h4 a:link, .footwrap h4 a:visited {
color: #333;
text-decoration: none;
border-bottom: 1px dotted #333;
}

.footwrap h4 a:hover {
color: #777;
text-decoration: none;
border-bottom: none;
}

.footwrap p a:link, .footwrap p a:visited {
color: #333;
text-decoration: none;
border-bottom: 1px dotted #333;
}

.footwrap p a:hover {
color: #777;
text-decoration: none;
border-bottom: none;
}



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

INTERIOR PAGE SPECFIC 

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

.top h3, .middle1 h3, .middle1a h3, .middle2 h3, .middle3 h3, .middle4 h3, .bottom h3, .text h3 {
background: #000;
font-size: 2em;
float: left;
font-weight: normal;
text-align: left;
color: #fff;
padding: 15px 25px;
width: 180px;
}

.copy1, .copy2, .copy3, .copy4, .copy5 {
font-size: 1.4em;
text-align: left;
line-height: 2em;
color: #555;
}

.copy1 p, .copy2 p, .copy3 p, .copy4 p, .contact p, .text p,
.top p, .raven p, .middle1 p, .middle2 p, .middle3 p, .bottom p {
padding-bottom: 25px;
}

.copy1 strong, .copy2 strong, .copy3 strong, .copy4 strong, .copy5 strong, .text strong {
font-size: 1.6em;
text-align: left;
font-weight: normal;
line-height: 1.8em;
color: #000;
}

.contact strong {
font-size: 1em;
text-align: left;
font-weight: bold;
line-height: 2em;
color: #000;
}

.top {
width: 960px;
float: left;
margin: 50px 0 25px;
border-bottom: 1px dotted #333;
}

.raven {
width: 960px;
float: left;
margin: 0 0 25px;
border-bottom: 1px dotted #333;
}

.copy5 {
margin: 0 25px 25px;
}

.copy1 {
margin: 50px 25px 50px;
padding-top: 25px;
}

.middle1 {
width: 430px;
float: left;
margin: 25px 0 25px;
padding-right: 25px;
}

.middle1a {
width: 430px;
float: left;
margin: 25px 0 25px;
padding-right: 25px;
border-bottom: 1px dotted #333;
}

.copy2 {
margin: 50px 25px 25px 25px;
padding-top: 25px;
}

.middle2 {
width: 430px;
float: left;
margin: 25px 0 25px;
padding-left: 50px;
border-left: 1px dotted #333;
}

.copy3 {
width: 400px;	
float: left;
margin: 25px 0 25px;
}

.copy3 a:link, .copy3 a:visited {
font-size: 1.4em;
text-align: left;
line-height: 2em;
color: #000;
text-decoration: none;
border-bottom: 1px dotted #000;
}

.copy3 a:hover {
font-size: 1.4em;
text-align: left;
line-height: 2em;
color: #ccc;
text-decoration: none;
border-bottom: none;
}

.middle3 {
float: left;
margin: 25px 0 25px 35px;
padding-top: 50px;
}

.middle1 p a:link, .middle1 p a:visited, .middle2 p a:link, .middle2 p a:visited,
.middle3 p a:link, .middle3 p a:visited, .copy1 p a:link, .copy1 p a:visited,
.copy2 p a:link, .copy2 p a:visited, .copy3 p a:link, .copy3 p a:visited, 
.copy4 p a:link, .copy4 p a:visited, .text p a:link, .text p a:visited {
color: #333;
text-decoration: none;
border-bottom: 1px dotted #333;
}

.middle1 p a:hover, .middle2 p a:hover,
.middle3 p a:hover, .copy1 p a:hover, .copy2 p a:hover,
.copy3 p a:hover, .copy4 p a:hover, .text p a:hover {
color: #777;
text-decoration: none;
border-bottom: none;
}

.middle4 {
width: 430px;
float: right;
margin: 25px 0 25px 40px;
padding: 10px;
border: 2px solid #999;
background: #ccc;
}

.middle4 h6 {
font-size: 1.2em;
font-weight: bold;
text-align: left;
float: left;
padding: 10px 0 10px 25px;
margin-right: 50px;
}

.middle4 ul {
display: block;
float: left;
width: 200px;
padding: 5px 0 15px;
margin: 0;
}

.middle4 ul.office {
display: block;
float: left;
width: 430px;
}

.middle4 li {
font-size: 1em;
text-align: left;
color: #555;
padding: 5px 25px;
margin: 0;
}

.middle4 li.abroad {
font-size: 1em;
text-align: left;
color: #555;
padding: 15px 25px 5px;
border-top: 1px dotted #555;
}

.contact {
font-size: 1.4em;
text-align: left;
line-height: 2em;
color: #555;
margin: 50px 25px 50px;
padding-top: 25px;
}

.bottom {
width: 960px;
float: left;
margin: 25px 0 25px;
border-top: 1px dotted #333;
padding-top: 50px;
}

.copy4 {
padding: 75px 25px 0px;
}





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

THUMBNAIL ROLLOVERS 

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

.thumbnail {
position: relative;
z-index: 0;
}

.thumbnail:hover {
background-color: transparent;
z-index: 50;
}

.thumbnail span { /*CSS for enlarged image*/
position: absolute;
background-color: #f8f8f8;
padding: 5px;
left: -1000px;
border: 1px solid #666;
visibility: hidden;
color: #000;
text-decoration: none;
font-size: .8em;
text-align: left;
font-weight: bold;
}

.thumbnail span img { /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
top: -35px;
left: 75px; /*position where enlarged image should offset horizontally */
}






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

CASE STUDY PAGES 

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

.outline {
float: left;
width: 200px;
padding: 55px 0 0 25px;
margin-left: 55px;
}

.outline h5 {
font-size: 1.2em;
text-align: left;
color: #999;
text-decoration: none;
padding-bottom: 5px;
}

.outline h5.case1 {
color: #002953;
}

.outline h5.case2 {
color: #005323;
}

.outline h5.case3 {
color: #390053;
}

.outline h5.case4 {
color: #53000c;
}

.outline ul {
margin-bottom: 25px;
width: 225px;
}

.outline li {
font-size: 1em;
text-align: left;
color: #999;
padding: 5px 0;
}

.outline h5 a:link, .outline h5 a:visited {
color: #444;
text-decoration: none;	
border-bottom: none;
}

.outline li a:link, .outline li a:visited {
color: #999;
text-decoration: none;	
border-bottom: none;
}

.outline h5 a:hover, .outline li a:hover {
color: #ccc;
text-decoration: none;
border-bottom: 1px dotted #ccc;	
}

.brief {
float: left;
width: 420px;
font-size: 1.4em;
text-align: left;
line-height: 1.6em;
color: #555;
padding: 50px 0 50px 60px;
}

.brief a:link, .brief a:visited {
color: #555;
}

.brief a:hover {
color: #390053;
border-bottom: 1px dotted #390053;
}


.brief p {
padding-bottom: 10px;
}

strong {
color: #000;
font-size: .8em;
}


	


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

CASE STUDY GALLERY 

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

.gallerycontainer {
position: relative;
float: left;
padding: 50px 0 0 25px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.gallerycontainer ul {
display: block;
float: left;
width: 200px;
margin-bottom: 50px;
}

.gallerycontainer li {
font-size: 1.4em;
text-align: left;
color: #999;
padding: 15px 0 0;
}

.gallerycontainer li a:link, .gallerycontainer li a:visited {
color: #555;
text-decoration: none;	
border-bottom: 1px dotted #333;
}

.gallerycontainer li a:hover {
color: #999;
text-decoration: none;
border-bottom: none;
}


.gallery img {
border: 0;
padding-bottom: 15px;
}

.gallery:hover {
background-color: transparent;
border: 0;
}

.gallery:hover img {
border: 0;
}

.gallery span { /*CSS for enlarged image*/
position: absolute;
background-color: #f8f8f8;
padding: 5px;
left: -1000px;
border: 1px solid #333;
visibility: hidden;
color: #000;
text-decoration: none;
font-size: 1.2em;
text-align: left;
font-weight: bold;
}

.gallery span img { /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
padding-bottom: 15px;
}

.gallery:hover span { /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 200px; /*position where enlarged image should offset horizontally */
z-index: 50;
border: 1px solid #333;
}





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

THUMBNAIL2 ROLLOVERS // LOGOS COLLECTION ONLY

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

.logos {
float: left;
width: 630px;
font-size: .8em;
text-align: left;
line-height: 1.6em;
color: #000;
}

.logos ul {
width: 200px;
padding: 0;
}

.logos ul.spacer {
margin-right: 10px;
}

.logos li.image {
padding: 0;
margin: 0;
}

.logos li.title {
color: #000;
font-weight: bold;
}

.logos li.sub {
text-align: left;
color: #999;
line-height: 1.4em;
padding: 10px 0;
}

.logos li a:link, .logos li a:visited {
color: #555;
text-decoration: none;	
border-bottom: 0;
}

.logos li a:hover {
color: #999;
text-decoration: none;
border-bottom: 0;
}

.thumbnail2 {
position: relative;
z-index: 0;
}

.thumbnail2:hover {
background-color: transparent;
z-index: 50;
}

.thumbnail2 span { /*CSS for enlarged image*/
position: absolute;
background-color: #f8f8f8;
padding: 5px;
left: -1000px;
border: 1px solid #666;
visibility: hidden;
color: #000;
text-decoration: none;
font-size: .8em;
text-align: left;
font-weight: bold;
}

.thumbnail2 span img { /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail2:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
top: 25px;
left: 50px; /*position where enlarged image should offset horizontally */
}