* {margin: 0; padding: 0;}
body {font-family: "Helvetica", Arial, Courier, sans-serif;}
a {outline: none; text-decoration: none; color: #c9e5e5; outline: none; text-shadow: 1px 1px 2px #333;}
	a:hover {text-shadow: 2px 2px 1px #333; position: relative;}
a img {border: 0;}

#navWrapper {background:#2e2e2e; height:40px;}
#nav {list-style-type: none; margin-left:140px;}
	#nav li {display: inline;}
	#nav li a {min-height: 40px; float: left; margin-right:30px; margin-top:10px; font-size: 1.3em;}
	#nav a {color:#ccc;}
		#nav a:hover {color:#fff;}

#topWrapper {background:url(images/paperback.jpg); height:425px; padding-top:25px;}
	#shadow {background:url(images/topshadow.jpg) #f0f0f0; width:800px; height:377px; left:145px; position: relative; }
#surfaceWrapper {background:url(images/surface.jpg); height:376px; padding: 155px 0 0 84px; position: relative;}
	#insetWrapper {width:920px;}
		.surfaceInset {background:url(images/surface-inset.jpg); color:#fafafa; float:left; height: 319px; width:220px; padding:10px; margin-right:80px;}
			.surfaceInset a:hover {bottom:1px;}
		#twitter-link {margin-left: 10px;display:block;padding-bottom:10px;color:#002C4E;}
		#twitter_update_list {list-style-type:none;}
			#twitter_update_list li {background:rgba(201, 229, 229, 0.2); margin:5px 0; font-size:14px; padding: 5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
		
		#insetWrapper .last {margin-right:0; overflow: hidden;}


#logo {background:url(images/logo.jpg); min-height: 56px; width:351px; display: block; text-indent: -9999px; float:left;}
#tagline {background:url(images/videowebdesign.jpg); min-height: 44px; width:329px; text-indent:-9999px; float: right; margin-top:10px;}
#frontVideo {width:388px; float: right; border: 5px solid #fff; position: relative; z-index: 20}
#frontLabel {color:#555; font-size:1em; font-style:italic; left:250px; position:relative; top:30px; float:right;}

#laptop {position:absolute; background:url(images/laptop.png); width:405px; height:259px; top:-155px; left:40px; z-index: 11;}
#resume {position: absolute; background:url(images/resume.png); width:159px; height:225px; text-indent: -9999px; display: block; top:-100px; left:900px; z-index: 11;}

#contactSub {background:rgba(201, 229, 229, 0.2); margin:5px 0; font-size:14px; padding: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; line-height: 18px;}


#videoList {width: 884px;}
#videoPageList, #webPageList {width: 784px; margin-top: 3px;}
#videoList li, #videoPageList li, #webPageList li {list-style-type: none; display: inline; margin: 0 20px;}
#videoList img, #videoPageList img, #webPageList img {border: 4px solid #fafafa;}
.title {margin-left:20px;}

.webFull {width:535px; background: #f0f0f0; padding: 10px; border: 1px solid #ccc;}
.webFull p {font-size:12px; line-height:18px;}
.webFull img {border: 1px solid #ccc;}
.webFull .detailtitle {color:#888; font-style: italic;}
.webFull a {text-shadow: none; color: #7a8686;}
.webFull a:hover {text-decoration: underline;}

.feature {min-height:55px; margin: 7px 0 0; background:rgba(201, 229, 229, 0.2); padding: 5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.feature img {float: left; display: block; width:50px; height:50px; border: 2px solid #f0f0f0; margin-right:10px}

#services {list-style-type: none; font-size: 14px; font-weight: bold; float:left;}
#contactList {list-style-type: none; font-size: 14px; font-weight: bold;}
#services li {color:#444; background: url(images/check.png) no-repeat -1px -2px; padding-left: 35px; margin: 10px 0; min-height: 28px; line-height:27px;}

#contactList #email {background: url(images/mail.png) no-repeat 0 -3px; padding-left: 30px; margin: 10px 0; min-height: 20px;}
#phone {background: url(images/phone.png) no-repeat 0 -3px; padding-left: 30px; margin: 10px 0; min-height: 20px;}
#twitter {background: url(images/twitter.png) no-repeat 0 -3px; padding-left: 30px; margin: 10px 0; min-height: 20px;}
#facebook {background: url(images/facebook.png) no-repeat 0 -3px; padding-left: 30px; margin: 10px 0; min-height: 20px;}


#footerWrapper {background:#333; height:100px; border-top:3px solid #666;}

#wedding {width:500px; height:400px;}

#contactWrapper {width:600px; padding:20px; background: url(images/slider_back.jpg); color:#333; overflow: hidden;}
#contactWrapper a {text-shadow: none; color: #666;}
#contactWrapper a:hover {text-decoration: underline;}
#contactWrapper p {padding: 10px 0;}

#contactForm label {width:95px; float: left;}
#contactForm p {width:315px; padding-left:10px}
#submit {background: url(images/send.jpg);cursor:pointer;top:10px;min-height:50px;position:relative;width:100px; background-color:none; border:none;text-indent: -9999px;}
#comments {width:200px;}
input {width:196px;}

#contactForm, #response {width:300px; float: left;}
#contactInfo {width:260px; float: right;}





/*CODA SLIDER*/

.coda-slider-wrapper {position: absolute; top:70px; left:150px;}
	.coda-slider {}
	
	/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
	.coda-slider-no-js .coda-slider { height: 377px; overflow: auto !important; padding-right: 20px }
	
	/* Change the width of the entire slider (without dynamic arrows) */
	.coda-slider, .coda-slider .panel { width: 790px; height:367px;} 
	
	/* Change margin and width of the slider (with dynamic arrows) */
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 790px }
	.coda-slider-wrapper.arrows .coda-slider {}
	
	/* Arrow styling */
	.coda-nav-left a {background:url(images/arrow_left.png); width:48px; height:48px; text-indent:-9999px;}
	.coda-nav-right a {background:url(images/arrow_right.png); width:48px; height:48px; text-indent:-9999px;}
	
	/* Tab nav */
	.coda-nav ul li a.current { background: #39c }
	
	/* Panel padding */
	.coda-slider .panel-wrapper { padding: 20px }
	
	/* Preloader */
	.coda-slider p.loading { padding: 20px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

	/* Tabbed nav */
	.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
	.coda-nav ul li { display: inline }
	.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }
	
	/* Miscellaneous */
	.coda-slider-wrapper { clear: both;}
	.coda-slider { float: left; overflow: hidden; position: relative; z-index: 1; }
	.coda-slider .panel { display: block; float: left; background: url(images/slider_back.jpg);}
	.coda-slider .panel-container { position: relative }
	.coda-nav-left, .coda-nav-right {position: absolute; }
	.coda-nav-left {left:-70px; top:135px;}
	.coda-nav-right {right: -70px; top:135px;}
	.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
	
	
@media screen and (max-width: 960px) {
	#topWrapper {background: url("images/slider_back.jpg"); position:relative;}
	#navWrapper {height: auto;}
	#nav {margin-left: 0px; padding-left:50px; width:100%;}
	#nav li {display:block; height:2em; font-size:2em;}
	#nav li a {float:none;}
	.coda-nav-left, .coda-nav-right, #shadow {display:none;}
	.coda-slider-wrapper {left:0; top:0px;}
	#surfaceWrapper {padding: 155px 0 0 1em;}
	.surfaceInset {margin-right: 1em;}
}