/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, 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, textarea, input {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	font-family:Helvetica, Arial, sans-serif;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clear					{ clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}

.clearfix:after, .colrow:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix, .colrow {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix, .colrow {display:block;}
/* End hide from IE Mac */

/* STRUCTURE */

body {
background: #fff url(http://periscopecreative.com/assets/images/bckg_gradient.png) repeat-x;
text-align: center;
width:100%;
font-size: 12px;
}
	
	.home #design_head {
	background: transparent url(http://periscopecreative.com/assets/images/home_graphic.jpg) center top no-repeat;
	height:260px;
	margin: 0 auto;
	text-align: center;
	width: 970px;
	position: relative;
	}
	.smallhead #design_head {
	background: transparent url(http://periscopecreative.com/assets/images/header_graphic.jpg) center top no-repeat;
	height:115px;
	margin: 0 auto;
	text-align: center;
	width: 970px;
	}
	.home #head {
	height: 260px;
	position: relative;
	}
	.smallhead #head {
	height: 115px;
	position: relative;
	}

#container {
width: 970px;
margin:0 auto;
text-align: left;
position: relative;
}

#footer {
height: 40px;
width: 970px;
color: #121212;
clear:both;
}


/* NAVIGATION */

.nav{
	height:39px;
	width: 608px;
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat;
	position: relative;
	}
ul.nav {
margin:0; padding: 0;
}
.nav li {
display: inline;
}
.nav li a:link, .nav li a:visited {
position: absolute;
top: 0;
height: 39px;
text-indent: -9000px;
overflow: hidden;
z-index: 10;
}
    
    
    
    .nav .home a:link, .nav .home a:visited {
	left: 0;
	width: 122px;
    }
    .nav .home a:hover, .nav .home a:focus {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat 0 -39px;
    }
    .nav .home a:active {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat 0 -78px;
    }
    .current-home .home a:link, .current-home .home a:visited {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat 0 -117px;
	cursor: default;
	}
	.nav-home, .nav-home-click {
	position: absolute;
	top: 0;
	left: 0;
	width: 122px;
	height: 39px;
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat 0 -39px;
	}
	.nav-home-click {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat 0 -78px;
	}






   
    .nav .services a:link, .nav .services a:visited {
	left: 122px;
	width: 122px;
    }
    .nav .services a:hover, .nav .services a:focus {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -122px -39px;
    }
    .nav .services a:active {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -122px -78px;
    }
    .current-services .services a:link, .current-services .services a:visited {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -122px -117px;
	cursor: default;
	}
    .nav-services, .nav-services-click {
    position: absolute;
    top: 0;
    left: 122px;
    width: 122px;
    height: 39px;
    background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -122px -39px;
	}
	.nav-services-click {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -122px -78px;
	}





    .nav .projects a:link, .nav .projects a:visited {
	left: 243px;
	width: 122px;
    }
    .nav .projects a:hover, .nav .projects a:focus {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -243px -39px;
    }
    .nav .projects a:active {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -243px -78px;
    }
    .current-projects .projects a:link, .current-projects .projects a:visited {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -243px -117px;
	cursor: default;
	}
	.nav-projects, .nav-projects-click {
    position: absolute;
    top: 0;
    left: 243px;
    width: 122px;
    height: 39px;
    background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -243px -39px;
	}
	.nav-projects-click {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -243px -78px;
	}
	
    .nav .bio a:link, .nav .bio a:visited {
    left: 365px;
    width: 122px;
    }
    .nav .bio a:hover, .nav .bio a:focus {
    background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -365px -39px;
    }
    .nav .bio a:active {
    background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -365px -78px;
    }
    .current-bio .bio a:link, .current-bio .bio a:visited {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -365px -117px;
	cursor: default;
	}
  	.nav-bio, .nav-bio-click {
    position: absolute;
    top: 0;
    left: 365px;
    width: 122px;
    height: 39px;
    background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -365px -39px;
	}
	.nav-bio-click {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -365px -78px;
	}

	
	.nav .contact a:link, .nav .contact a:visited {
	left: 486px;
    width: 122px;
    }
    .nav .contact a:hover, .nav .contact a:focus {
    background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -486px -39px;
    }
    .nav .contact a:active {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -486px -78px;
    }
    .current-contact .contact a:link, .current-contact .contact a:visited {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -486px -117px;
	cursor: default;
	}
	.nav-contact, .nav-contact-click {
    position: absolute;
    top: 0;
    left: 486px;
    width: 122px;
    height: 39px;
    background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -486px -39px;
	}
	.nav-contact-click {
	background: url(http://periscopecreative.com/assets/images/main-nav.png) no-repeat -486px -78px;
	}

/*SUBNAV*/

.work_categories {
width: 465px;

}

.subnav{
	height:35px;
	width: 465px;
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat;
	position: relative;
	}
ul.subnav {
margin:0; padding: 0;
border: 1px solid #ddd;
}
.subnav li {
display: inline;
}
.subnav li a:link, .subnav li a:visited {
position: absolute;
top: 0;
height: 35px;
text-indent: -9000px;
overflow: hidden;
z-index: 10;
}
    
    
    
    .subnav .featured a:link, .subnav .featured a:visited {
	left: 0;
	width: 123px;
    }
    .subnav .featured a:hover, .subnav .featured a:focus {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat 0 -35px;
    }
    .subnav .subnav a:active {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat 0 -70px;
    }
    .current-featured .featured a:link, .current-featured .featured a:visited {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat 0 -105px;
	cursor: default;
	}
	.subnav-featured, .subnav-featured-click {
	position: absolute;
	top: 0;
	left: 0;
	width: 123px;
	height: 35px;
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat 0 -35px;
	}
	.subnav-featured-click {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat 0 -70px;
	}






   
    .subnav .print a:link, .subnav .print a:visited {
	left: 123px;
	width: 104px;
    }
    .subnav .print a:hover, .subnav .print a:focus {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -123px -35px;
    }
    .subnav .print a:active {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -123px -70px;
    }
    .current-print .print a:link, .current-print .print a:visited {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -123px -105px;
	cursor: default;
	}
    .subnav-print, .subnav-print-click {
    position: absolute;
    top: 0;
    left: 123px;
    width: 104px;
    height: 35px;
    background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -123px -35px;
	}
	.subnav-print-click {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -123px -70px;
	}





    .subnav .web a:link, .subnav .web a:visited {
	left: 227px;
	width: 102px;
    }
    .subnav .web a:hover, .subnav .web a:focus {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -227px -35px;
    }
    .subnav .web a:active {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -227px -70px;
    }
    .current-web .web a:link, .current-web .web a:visited {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -227px -105px;
	cursor: default;
	}
	.subnav-web, .subnav-web-click {
    position: absolute;
    top: 0;
    left: 227px;
    width: 102px;
    height: 35px;
    background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -227px -35px;
	}
	.subnav-web-click {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -227px -70px;
	}
	
	
	
	
	
	
	
    .subnav .identity a:link, .subnav .identity a:visited {
    left: 330px;
    width: 136px;
    }
    .subnav .identity a:hover, .subnav .identity a:focus {
    background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -330px -35px;
    }
    .subnav .identity a:active {
    background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -330px -70px;
    }
    .current-identity .identity a:link, .current-identity .identity a:visited {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -330px -105px;
	cursor: default;
	}
  	.subnav-identity, .subnav-identity-click {
    position: absolute;
    top: 0;
    left: 330px;
    width: 136px;
    height: 35px;
    background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -330px -35px;
	}
	.subnav-identity-click {
	background: url(http://periscopecreative.com/assets/images/subnav.png) no-repeat -330px -70px;
	}
	
/* LINKS */

h1 a:link, h1 a:visited {
background: url(http://periscopecreative.com/assets/images/periscope.png) no-repeat;
height:110px;
display:block;
width:276px;
}

h1 a:hover, body.home h1 a {
height:110px;
}

#footer a {
color: #121212;
margin:0;
padding: 0 5px 0;
font-weight: normal;
text-decoration: none;
}

#footer a:hover, 
#footer a:active, #footer a:focus {
color: #405a84;
}



/* TYPE */

h1 span, h2 span {
display: none;
}

h2.greeting {
margin: 40px 0 60px 15px;
position:relative;
}
	.home h2 {
	background: url(http://periscopecreative.com/assets/images/hello.png) no-repeat;
	height: 64px;
	width: 940px;
	}
	.services h2 {
	background: url(http://periscopecreative.com/assets/images/services.png) no-repeat;
	height: 72px;
	width: 901px;
	}
	.projects h2 {
	background: url(http://periscopecreative.com/assets/images/projects.png) no-repeat;
	height: 66px;
	width: 789px;
	}	
	.bio h2 {
	background: url(http://periscopecreative.com/assets/images/about.png) no-repeat;
	height: 64px;
	width: 856px;
	}
#footer p.left {
float:left;
margin: 10px 0 0 15px;
}
#footer p.right {
float:right;
margin: 10px 15px 0 0;
}
#footer p {
color: #121212;
}

.col_description {
position:absolute;
top:170px;
padding-right: 10px;
}

.col_discription p {
line-height: 1.3em;
}

.link_column h5 {
margin-top:18px;
padding:0;
}


/* HOME */

.home div.links {
background: transparent url(http://periscopecreative.com/assets/images/link-bg.png) top left repeat-x;
height: 246px;
}

.link_column {
border-right: 1px solid #e6eaf0;
border-bottom: 3px solid #909090;
border-left: 1px solid #e6eaf0;
float: left;
height: 242px;
margin-top: 3px;
padding: 0px 10px 0;
position: relative;
width: 220.5px;
font-size: .85em;
}
	.link_column p a {
	color:#8f8007;
	font-weight: normal;
	}
		.link_column p a:hover {
		color:#000;
		text-decoration: none;
		}
			.link_column .services {
			display: block;
			background: url(http://periscopecreative.com/assets/images/icon_services.gif) no-repeat;
			height: 117px;
			width: 148px;
			margin: 0 auto;
			}
				.home .over .services {
				background: url(http://periscopecreative.com/assets/images/icon_services_over.gif) no-repeat;
				}
			
			.link_column .work {
			display: block;
			background: url(http://periscopecreative.com/assets/images/icon_work.png) no-repeat;
			height: 112px;
			width: 173px;
			margin: 25px auto;
			}
				.home .over .work {
				background: url(http://periscopecreative.com/assets/images/icon_work_over.png) no-repeat;
				}
				
			.link_column .about {
			display: block;
			background: url(http://periscopecreative.com/assets/images/icon_process.png) no-repeat;
			height: 105px;
			width: 156px;
			margin: 30px 0 0 20px;
			}
				.home .over .about {
				background: url(http://periscopecreative.com/assets/images/icon_process_over.png) no-repeat;
				}
		
		.home .over {
		cursor: pointer;
		background-color: #FAFAFA;
		border-bottom: 3px solid #000;
		}
		.home h5 a:hover {
		text-decoration: none;
		}	
		.home .over h5 a {
		color: #000;
		}

/* SERVICES */

.content {
background: white url(http://periscopecreative.com/assets/images/link-bg.png) repeat-x;
padding: 0 27px 20px;
}

.services_col {
float: left;
margin: 0 27.25px 0 0;
position: relative;
width: 287px;
}
	.content .last {
	margin-right:0; padding-right:0; float: right !important;
	}
	
	
/* PROJECTS PAGE */	

.work_container {
height: 379px;
margin: 20px 0 30px ;
background: white;
border: 1px solid #f1f5fa;
}
.project_info {
float: left;
width: 400px;
padding: 2px 25px 1px;
font-size: .8em;
}
	.project_info blockquote{
	text-indent: 25px;
	background: url(http://periscopecreative.com/assets/images/quotes1.png);
	background-position: 0 2px;
	background-repeat: no-repeat;
	}
	.project_info blockquote p{
	font-family: Georgia, Times, serif;
	font-style: italic;
	font-weight: normal;
	font-size: 1.3em;
	display: inline;
	margin: 0;
	padding-right: 24px;
	background: url(http://periscopecreative.com/assets/images/quotes2.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	}
	.project_info p{
	font-weight: bold;
	color: #4a4545;
	}
	.project_info h3 {
	color: #121212;
	}
	
.project_photo {
float:right;
position:relative;
width:504px;
height: 378px;
top:0;
}


/* LISTS */
/* FORMS */
/* MISC */
.pad {
margin-top: 20px;
}

.three_column {
float: left;
margin-top: 3px;
padding: 0px 10px 0;
position: relative;
width: 661.5px;
}

.two_column {
float: left;
margin-top: 3px;
padding: 0px 10px 0;
position: relative;
width: 441px;
}

.one_column {
float: left;
margin-top: 3px;
padding: 0px 20px 0;
position: relative;
width: 200.5px;
}

/*slider*/

p#cross-links { text-align: center }

p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }

noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
noscript a { color: #a00; text-decoration: underline }
noscript ol { margin-left: 25px; }

.stripViewer .panelContainer .panel ul {
	text-align: left;
}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 378px; background: #fff; overflow: hidden;background: #fff}
.csw .loading {position: absolute; top:40%; left:30%; text-align: center;}

.stripViewer { /* This is the viewing window */
	overflow: hidden; 
	margin: auto;
	width: 504px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 378px;
	background: #fff;
	top:0;
	left:0;
	position:absolute;
	}

	.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
		position: relative;
		left: 0; top: 0;
		width: 100%;
		list-style-type: none;
		}
	
	.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
		float:left;
		height: 100%;
		width: 504px; /* Also specified in  .stripViewer  above */
		position: relative;
		}
				
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: 330px 0 0 10px;
	}
	.stripNav ul { /* The auto-generated set of links */
		list-style: none;
		position: relative;
		float: left;
		z-index: 9999;
		}
	.stripNav ul li {
		float: left;
		position: relative;
		font-size: 10px;
		margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
		}
	.stripNav a, .stripNav a:visited { /* The nav links */
		font-weight: bold;
		text-align: center;
		background: #000;
		color: #fff;
		text-decoration: none;
		display: block;
		padding: 5px 10px;
		}
	.stripNav a:hover {
		background: #c04e4e;
		color: #fff;
		text-decoration: none;
		}
	.stripNav a.current {
		background: #c04e4e;
		color: #fff;
		}
	.stripNavL, .stripNavR { /* The left and right arrows */
		position: relative;
		top: 0;
		text-indent: -9000em;
		}
	.stripNavL a, .stripNavR a {
		display: block;
		height: 40px;
		width: 40px;
		}
	
.stripNavL {
	left: 0;
	}
.stripNavR {
	right: 0;
	}
.stripNavL {
	}
.stripNavR {
	}


/*typography*/

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, arial, verdana, sans-serif;
	font-size: 13px;/* font sizing in ems, baby. if you want to change anything, just change this.*/
	/*funny thing happens at 75% and lower. opera goes to a nice small size, but moz and ie pc change almost not at all. seems 76% is as small as you can go and stay the same across browsers. poop.*/
	}
#content {
	margin: 0em;
	padding: 4em 6em 2em 6em;/* use padding instead of margin for multicolumn layouts because of a really odd ie5pc bug where it sometimes relates the width of an unrelated menu div to this div. i'll, uh, write about that somewhere. it was hard to figure out what was causing it, so i want this note here to remind me. */
	}
	
/*the following classes are to demonstrate better line heights for narrow columns*/	
.narrow1{
	width: 50%;
	line-height: 1.3em;
	}
.narrow2{
	width: 50%;
	line-height: 1.5em;
	}
		
/* TYPOGRAPHY */
a {
	text-decoration: none;
	font-weight: bold;
	color: #000;
	}
a:link {

	}
a:visited {
	color: #121212;
	}
a:active {
	color: #000;
	}
a:hover {
	color: #c04e4e;
	}
h1 {
	font-size: 2.0em;
	font-weight: normal;
	margin-top: 0em;
	margin-bottom: 0em;/*both set to zero and padding in header div is used intead to deal with compound ie pc problems that are beyound summary in a simple comment.*/
	}
h2 {
	font-size: 1.7em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: normal;
	}
h3 {
	font-size: 1.4em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	letter-spacing: -.5px;
	}
h4 {
	font-size: 1.2em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: normal;
	}
h5 {
	font-size: 1.0em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
h6 {
	font-size: 0.8em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
img {
	border: 0;
	}
ol, ul, li {/*
	list-style: none;*/
	font-size: 1.0em;
	line-height: 1.8em;
	margin-top: 0.2em;
	margin-bottom: 0.1em; 
	}
p {
	font-size: 1.0em;
	line-height: 1.5em;
	margin: 1.2em 0em .8em 0em;
	}
li > p {
	margin-top: 0.2em;
	}
pre {/*moz 1.0/1.1/1.2.1, net 7.0/7.01 make this way too small, but i'm not going to go larger because monospace tends to run you into overflow pretty quick. prior moz and net are okay.*/
	font-family: monospace;
	font-size: 1.0em;
	}
strong, b {
	font-weight: bold;
	}