@charset "utf-8";
/* CSS Document */
body{background-color:#920404; margin:0; padding:0; font-size:62.5%;}
a {outline: none;}
hr {background-image: url("images/nav_bottom_border.png"); background-position: center bottom; background-repeat: repeat-x; height:3px; border:0;}
.clear{clear:both;}
.wrapper{width:925px; height:100%; margin:auto; background-repeat:no-repeat; min-height:600px;}
.toplogo{width:295px; height:286px; background-image:url(images/top_logo.jpg); margin-left:-13px; margin-top: -35px;}
.leftbkg{background-image:url(images/redtopleft.jpg);width:498px;height:307px;margin-left:-20px;position: absolute;left: -30px;top: 10px;}
.left{width:219px; float:left; margin:0 0 0 0px;}
.links{margin:20px 0 0 67px;}
.links a{margin-top:50px;}
.right{width:627px; margin-top:52px;float:right;margin-right:20px;}
ul#boxes{margin:0px; width:640px;}
#moreweb{}
#websiterecent{width:100%; margin:10px 0px 10px 5px;}
#homepage {width:627px; height:435px; position:relative;}
#homepage .homepage-left{width:350px; position:absolute; top:10px; left: 5px;}
#homepage .homepage-right{position:absolute; top:27px; left:360px;}
.homepage-right p, .homepage-right a {margin-left:14px;}
.homepage-right a {margin-left:8px;}

li {list-style:none;}
.container{background-image:url(images/container_06.png); width:175px; background-repeat:no-repeat; background-color:#920404; float:left; margin:0px 17px; padding:4px 0 0 4px;}
.container-border-none{background-image:url(images/container_06.png); background-repeat:no-repeat; width:175px; height:100%; background-color:#920404; float:left; margin:0px 13px; padding:4px 0 0 4px; border:medium none;}
.feature-text{margin:auto; width:520px;}
.feature-text p.font-face{padding:10px; font: 12px 'Verdana', Arial, sans-serif; background-color:#8a0204; border-left:1px #730302 solid; border-top:1px #730302 solid; border-right:1px #a60303 solid; border-bottom:1px #a60303 solid;}
h2.font-face {padding-top:20px; font: 32px 'UpperEastSideRegular', Arial, sans-serif; color:#FFFFFF;  background-image: url("images/nav_bottom_border.png");
    background-position: center bottom;
    background-repeat: repeat-x; text-shadow: 1px 1px 1px #000000; text-align:center;}
h3.font-face{padding-top:10px; font: 20px/27px 'UpperEastSideRegular', Arial, sans-serif; color:#FFF; text-shadow: 1px 1px 1px #201E1E; display:inline;}
h3 a{color:#FFF;}
p.font-face{padding-top:10px; font: 12px/20px 'Verdana', Arial, sans-serif; color:#FFF; text-shadow: 1px 1px 1px #201E1E; margin-bottom:25px; }
p.font-face a{color:#CCC; text-shadow: 2px 2px 2px; text-shadow: 1px 1px 1px #201E1E;}
p.nav-font-face{padding-top:10px; font: 20px 'Copasetic', Arial, sans-serif; color:#FFF; text-shadow: 1px 1px 1px #201E1E; display:inline; padding-bottom:7px;}
h1.about-me-font-face{font: 36px 'Copasetic', Arial, sans-serif; color:#FFF; text-shadow: 1px 1px 1px #201E1E; display:inline;}
p.home-name-font-face{padding-top:10px; font: 20px 'Copasetic', Arial, sans-serif; color:#FFF; font-size:28px; text-shadow: 2px 2px 1px #201E1E; display:inline; padding-bottom:7px;background-image:url(images/nav_bottom_border.png); background-repeat: repeat-x; background-position: bottom; padding-bottom:7px;}
p.nav-font-face a{color:#FFF; text-shadow: 1px 1px 1px #201E1E;}
p.nav-font-face a:hover{text-decoration:none; color:#F2EFEF; text-shadow: 1px 2px 2px #201E1E;}
.viewmore{float:left;margin:15px;}
.footer{background-image:url(images/bottom.png);background-repeat:no-repeat;float:right;margin:-20px -10px 50px 0px;width:823px;height:284px;}
/* FORM */
body#contact{background-color:#FFFFFF; margin:0; padding:10px;}
.form{width:285px;}
.form #phone, #name, #email, #comments, #submit{float:right;}
/* FORM */
body#sites{background-color:#FFFFFF; margin:0; padding:10px;}
body#sites p{margin:-35px 0 0 30px; padding:0; }
body#sites p a{ text-decoration:none; color:#920404; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;}
body#sites p a:hover{color:#710202;}
.about{width:530px; color:#171717; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:14px;}
.about p#aboutp{margin:10px; padding:0;}
.image-right{float:right; width:185px; margin:0px 10px 10px 10px; text-align:center;}
#slickbox{height:100%; float:left;}
#grapghicdesign{height:100%; float:left;}
.nav{width:605px; margin-left:7px; background-image:url(images/nav_bottom_border.png); background-repeat: repeat-x; background-position: bottom; padding-bottom:7px;}
.social{float:right; .margin-top:-20px; margin-top:0px;}
.twitter {
background-image:url("images/twitter_bkg2.png");
background-repeat:no-repeat;
color:#FFFFFF;
font:12px/20px 'Verdana',Arial,sans-serif;
height:167px;
margin:11px 0 0 16px;
padding:27px 0 0 22px;
text-align:justify;
text-shadow:1px 1px 1px #201E1E;
width:226px;
}
.twitter ul{width:215px;}
.twitter ul li{list-style-type: none; text-align:left;}
.twitter ul li a{color:#e7e7e7; text-decoration:none;}

#aboutme{width:625px; min-height:300px; height:100%;}
#aboutme ul{}
#aboutme ul li{list-style-type: none; text-align:left; float:left; margin-left:20px;}
#aboutme ul li a{color:#e7e7e7; text-decoration:none;}

#aboutme p.font-face#graphic{left: 5px;position: relative;top: -349px; display:block; margin:0; padding:0;}
#aboutme p.font-face#local{left: 5px;position: relative;top: -158px; display:block; margin:0; padding:0;}
#aboutme p.font-face#front{left: 464px;position: relative;top: -347px; width:155px; display:block; margin:0; padding:0;}
#aboutme p.font-face#pay{left: 464px;position: relative;top: -225px; width:155px; display:block; margin:0; padding:0;}

#browsercontainer { margin-left:224px; width:532px;}
.browser { display:block; float:left; margin-right:50px;}

@font-face {
    font-family: 'UpperEastSideRegular';
    src: url('fonts/UpperEastSide-webfont.eot');
    src: url('fonts/UpperEastSide-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/UpperEastSide-webfont.woff') format('woff'),
         url('fonts/UpperEastSide-webfont.ttf') format('truetype'),
         url('fonts/UpperEastSide-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Copasetic';
	src: url('fonts/Copasetic/copaseti-webfont.eot'); /* IE9 Compat Modes */
	src: url('fonts/Copasetic/copaseti-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('fonts/Copasetic/copaseti-webfont.woff') format('woff'), /* Modern Browsers */
	     url('fonts/Copasetic/copaseti-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('fonts/Copasetic/copaseti-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

/* ============================================ Homepage Easy Slider ============================================ */
	#homepage-slider-wrap {
		position: relative;
		width: 886px;
		height: 315px;
		margin-top: 25px;
		margin-bottom: 10px;
		padding-left: 29px;
		padding-top: 18px;
		background: url(../images/homepage-slider-bg.png) no-repeat 23px 12px;
		}
		
	#homepage-slider-wrap #slider ul, #homepage-slider-wrap #slider li,
	#homepage-slider-wrap #slider2 ul, #homepage-slider-wrap #slider2 li{
		margin: 0;
		padding:0;
		list-style:none;
		background: none;
		}
	#homepage-slider-wrap #slider2{margin-top:1em;}
	#homepage-slider-wrap #slider li, #homepage-slider-wrap #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:874px;
		height:293px;
		overflow:hidden;
		text-align: center;
		}
		
	#homepage-slider-wrap #prevBtn, #homepage-slider-wrap #nextBtn,
	#homepage-slider-wrap #slider1next, #homepage-slider-wrap #slider1prev{ 
		display:block;
		width:10px;
		height:31px;
		position:absolute;
		left:8px;
		top:150px;
		z-index:1000;
		}	
	#homepage-slider-wrap #nextBtn, #homepage-slider-wrap #slider1next{
		left:912px;
		}														
	

	/*
	#homepage-slider-wrap #prevBtn a, #homepage-slider-wrap #nextBtn a,
	#homepage-slider-wrap #slider1next a, #homepage-slider-wrap #slider1prev a{  
		display:block;
		position:relative;
		width:10px;
		height:31px;
		background-image: url(images/home-arrows-sprite.png);
		background-position: 0px 0px;
		}
		
	#homepage-slider-wrap #nextBtn a, #homepage-slider-wrap #slider1next a{ 
		background-image: url(images/home-arrows-sprite.png);
		background-position: 0px -93px;	
		}
	
	#homepage-slider-wrap #nextBtn a:hover, #homepage-slider-wrap #slider1next a{ 
		background-image: url(images/home-arrows-sprite.png);
		background-position: 0px -124px;	
		}
		
	#homepage-slider-wrap #nextBtn a:active, #homepage-slider-wrap #slider1next a{ 
		background-image: url(images/home-arrows-sprite.png);
		background-position: 0px -155px;	
		}
		
	#homepage-slider-wrap #prevBtn a:hover, #homepage-slider-wrap #slider1prev a{
		background-image: url(images/home-arrows-sprite.png);
		background-position: 0px -31px;	
		}
	
	#homepage-slider-wrap #prevBtn a:active, #homepage-slider-wrap #slider1prev a{ 
		background-image: url(images/home-arrows-sprite.png);
		background-position: 0px -62px;	
		}
		*/	
	/* numeric controls */	

	#homepage-slider-wrap ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	#homepage-slider-wrap ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	#homepage-slider-wrap ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 10px;
		text-decoration:none;
		}
	#homepage-slider-wrap ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
		}
	#homepage-slider-wrap ol#controls li a:focus, #homepage-slider-wrap #prevBtn a:focus, #homepage-slider-wrap #nextBtn a:focus{outline:none;}
	
/* ==================================== END Homepage Easy Slider ====================================== */


/* ============================================ Portfolio Easy Slider ============================================ */
	.facebook-comment{
		width:375px;
		height:200px;
		background-color:#FFF;
		position:absolute;
		top:245px;
		padding:5px;
		border:solid 1px #999;
	}
	
	#slider-wrap {
		position: relative;
		background: transparent;
		overflow:hidden;
		}
		
		#slider-gradient-over {
			background-image:url(images/slider-gradient.png);
			background-position: -3px 0px;
			height:463px;
			width:491px;
			position:absolute;
			left:9px;
			top:5px;

		}
		
		
		.slider-right-section {
			position:absolute;
			top:4px;
			right:25px;
			width:370px;
		}
		
		.portfolio-item-description-wrap {
			position: absolute;
			width: 385px;
			height: 42px;
			bottom: 0px;
			left: 0px;
			border-top: 1px dotted #8A8848;
			background: url(images/fancybox/arrows-middle.gif) no-repeat 826px 14px;
			top:76px;
			}
		
		.project-title-wrap {
			width:368px;
			padding: 2px 12px 0px 5px;
			margin-top: 2px;
			border-bottom: 1px dotted #8A8848;
			}
			
			p.client-name {
			background-color:#8F0000;
			border:1px solid #000000;
			color:#FFFFFF;
			font:31px 'Copasetic',Arial,sans-serif;
			height:31px;
			letter-spacing:0;
			margin-top:5px;
			text-align:center;
			text-shadow:1px 1px 1px #000000;
			text-transform:uppercase;
			width:375px;				
				}
			
			p.project-title {
				font-family: Georgia, "Times New Roman", Times, serif;
				font-size: 1.05em;
				font-style: italic;
				color: #231f20;
				margin-top: -10px;
				}
			
		.project-description-wrap {
			float: left;
			padding: 4px 12px 0px 12px;
			margin-top: 3px;
			}
			
		.external-link-wrap {
			float: left;
			padding: 4px 50px 0px 12px;
			margin-top: 3px;
			border-left: 1px dotted #231f20;
			}
			
			
			a.project-type {
			background-color:#5972A7;
			background: -moz-linear-gradient(top, #7596D8, #5972A7);
			background: -webkit-gradient(linear, left top, left bottom, from(#7596D8), to(#5972A7));
			border:1px solid #000000;
			color:#FFFFFF;
			font:26px 'UpperEastSideRegular',Arial,sans-serif;
			font-size: 18px;
			text-transform: uppercase;
			color: #FFF;
			padding:4px 0px 4px 0px;
			letter-spacing:0;
			text-align:center;
			text-shadow:1px 1px 1px #000000;
			text-transform:uppercase;
			text-decoration:none;
			display:block;
			width:386px;				
			}
				
			a.project-type:hover {
			color: #E6EAF2;
			background: -moz-linear-gradient(top, #8BACEF, #5972A7);
			background: -webkit-gradient(linear, left top, left bottom, from(#8BACEF), to(#5972A7));
			box-shadow:inset 0 0 3px #405E9E;
			}
			
			p.project-description {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 1.125em;
				color: #231f20;
				}
				
			p.project-description a {
				font-family: Arial, Helvetica, sans-serif;
				color: #0290f4;
				}
		
	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		background: none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:490px;
		height:450px;
		overflow:hidden;
		text-align: center;
		}
		
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:19px;
		height:28px;
		position:absolute;
		left:16px;
		top:220px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{
		left:450px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:19px;
		height:28px;
		height:75px;
			width:43px;	
		background-position: 0px 0px;
		}
		
		#nextBtn a {
			background-image:url(images/next-button.png);
			height:25px;
			width:43px;
		
		}
		
		#prevBtn a {
			background-image:url(images/prev-button.png);
			height:25px;
			width:43px;
		
		}
	/*#nextBtn a, #slider1next a{ 
		background-image: url(images/fancybox/arrows-sprite.gif);
		background-position: 0px -84px;	
		} */
	
	#nextBtn a:hover, #slider1next a{ 
		background-image: url(images/next-button-hover.png);
		height:25px;
			width:43px;	
		}
		
		#prevBtn a:hover, #slider1prev a{ 
		background-image: url(images/prev-button-hover.png);
		height:25px;
			width:43px;	
		}
		
	/*#nextBtn a:active, #slider1next a{ 
		background-image: url(images/fancybox/arrows-sprite.gif);
		background-position: 0px -140px;	
		}*/
		
	/*#prevBtn a:hover, #slider1prev a{
		background-image: url(images/fancybox/arrows-sprite.gif);
		background-position: 0px -28px;	
		}
	
	#prevBtn a:active, #slider1prev a{ 
		background-image: url(images/fancybox/arrows-sprite.gif);
		background-position: 0px -56px;	
		}
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* ==================================== END Portfolio Easy Slider ====================================== */

/* ==================================== PORTFOLIO NO-SLIDER ============================================ */

div#no-slider-wrap div.portfolio-item-description-wrap {
			position: absolute;
			width: 900px;
			height: 42px;
			bottom: 0px;
			left: 0px;
			background: none;
			
			}

#no-slider ul, #no-slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		background: none;
		}
	#slider2{margin-top:1em;}
	#no-slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:900px;
		height:500px;
		overflow:hidden;
		text-align: center;
		}

/* ==================================== END NO-SLIDER ================================================== */




#slickbox, #graphcidesign, #animation {
	width: 640px;	
}