@charset "UTF-8";
/* CSS Document */

html {background-color:#2c2c2c;}
img {border: 0px;}
body {}



a:link {font-size: 15px; color: #c4c5c5; text-decoration: none;font-family:'Waukegan LDO Extended'; color: #D6D6D6;}
a:active {font-size: 15px; color: #c4c5c5; text-decoration: none;font-family:'Waukegan LDO Extended'; color: #D6D6D6;}
a:visited {font-size: 15px; color: #c4c5c5; text-decoration: none;font-family:'Waukegan LDO Extended'; color: #D6D6D6;}
a:hover {font-size: 15px; color: #c4c5c5; text-decoration: none;font-family:'Waukegan LDO Extended'; color: #D6D6D6;}

* {margin: 0 0 0 0; padding: 0;}

p {line-height: 28px;}

h1 {font-size: 35px;font-family: 'CapsuulaRegular'; text-transform: uppercase; color: #ffffff; position:relative; }
h2 {font-size: 40px;}
h3 {font-size: 24px;}
h4 {font-size: 21px;}


.fadeList {width:960px; height:135px; text-align:center;margin: 0px auto; list-style-type: none;  padding-top:20px;}
.waukeganLDO {font-family:'Waukegan LDO'; text-transform: uppercase; color: #ffffff; position:relative;}
.waukeganLDOcenter{font-family:'Waukegan LDO'; text-transform: uppercase; color: #9fb3b9; position:relative; text-align:center;}
.waukeganLDOright {font-family:'Waukegan LDO'; text-transform: uppercase; color: #9fb3b9; position:relative; text-align:right; padding-right:150px; }
.waukeganLDOExtended {font-family:'Waukegan LDO Extended'; color: #D6D6D6;}
.waukeganLDOExtendedFloat {font-family:'Waukegan LDO Extended'; color: #D6D6D6; text-align:right;}
.waukeganLDOExtendedFooter {font-family:'Waukegan LDO Extended'; font-size:16px; line-height:18px; color: #D6D6D6; font-weight:bold; }
.waukeganLDOExtendedEmail{font-family:'Waukegan LDO Extended'; font-size:18px; line-height:24px; color: #ffffff; font-weight:bold; letter-spacing:2px;}
.waukeganLDOExtendedGray {font-family:'Waukegan LDO Extended'; color: #A5A5A5; font-size: 12px; }
.waukeganLDOExtendedBlack{font-family:'Waukegan LDO'; color: #181818; font-size: 18px; font-weight:bold;}
.pageTitle {font-family: 'CapsuulaRegular'; text-transform: uppercase; color: #ffffff; position:relative;}

.CapsuulaRegular {font-family: 'CapsuulaRegular'; text-transform: uppercase; color: #ffffff; position:relative;}

.clearer {clear: both;}


/*position and hide the menu initially - leave room for menu items to expand...*/
#buffer {min-width:100px;}

#superWrapper {width: 1400px; margin: 0px auto;}
#wrapper {width: 1400px; margin: 0px auto;padding-top:65px;}
#wrapper2 {width: 1400px; margin: 0px auto; background: url('../images/bgtest.gif'); background-repeat:no-repeat;  background-attachment:fixed;background-position:center; }
#wrapper2b {width: 1400px; margin: 0px auto;  background: url('../images/bgtest2.gif'); background-repeat:no-repeat;  background-attachment:fixed;background-position:center; }
.dividerOne {background: url('../images/divider-one.png');height:7px;margin-top:8px;}
	#header {width: 100%; margin: 0px auto; background-color:black;position:fixed;z-index:999;height:65px;max-width:100%;min-width:1225px;}
		#logo {float: left; padding-top:13px; padding-bottom:5px; margin-left:300px;}
		#navigation {float: right; font-family: 'CapsuulaRegular'; text-transform: uppercase; height: 17px; padding: 27px 0 13px 0; margin-right:300px;}
			#navigation ul {list-style: none; padding: 0; margin: 0;}
			#navigation li {float: left; margin: 0 30px 0 0;}
	#banner {width: 960px; height: 100px; margin: 0px auto;
					border-radius: 15px;

	}
	#container {width: 1012px; margin: 0px auto; padding-left:50px;}
		#promo {width: 1100px; margin: 0px auto; margin-bottom:20px;}
			#promo ul {
				list-style: none;
				padding: 0;
				margin: 0 auto;
				width: 1100px;
				height: 375px;
			}
			#promo li {
				height: 323px;
				width: 537px;
				text-align: center;
				cursor: pointer;
			}
				#promo li img {
					width: 100%;

 border: 5px solid #121212;
 border-radius: 5px;				-webkit-transition: border 0.15s ease-in;
				-moz-transition: border 0.15s ease-in;
				-ms-transition: border 0.15s ease-in;
				transition: border 0.15s ease-in;

				}


				#promo li img:hover{
				border: 5px solid #ffffff;
				}


				li.roundabout-in-focus {
					cursor: default;
				}
			/* span {
				display: block;
				padding-top: 6em;
			} */

		#promoText {width: 960px;}
			#promoTextBox {
				margin-top:20px;
				margin: 0px auto;
				padding-left:25px;
				width: 920px;
				background-color:#454545;
				height:176px; -moz-border-radius: 15px;
				border-radius: 15px;

				}

				#ptLeft {width: 460px; float: left; padding-top:2px; margin-top:20px;}
				#ptRight {width: 440px; float: right; margin-top:20px; padding-right:20px;}


				.quote{width: 750px;margin: 0px auto; text-align:center; margin-top:15px;margin-bottom:15px;}





		#newClients {width: 960px;}
			#nc1 {width: 960px; margin-top:28px;}
			#nc2 {width: 960px;}
				.clients {height: 110px; margin: 0 0 10px 0; padding-left:10px;}
					.client {width: 100px; height: 100px; float: left;  margin: 0 17px; border-radius: 5px;}
						.client img {}
		#portfolio {}
			#portfolio h2 {text-align: center;}
			#televisionCommercials {}
			#marketingDocumentaries {}
			#graphicDesign {}
			#webDesign {}
			.thumbContainer {float:left;}
			.thumbnails {height: 120px; margin: 0 0 30px 0;}
			.thumbnailsSmall {height: 85px; margin: 0 0 20px 0;}
				.thumb {width: 200px; height: 115px; float: left; margin: 0 12px; background: #fff; border-radius: 5px; border: 5px solid #1f1f1f;				-webkit-transition: border 0.15s ease-in;
				-moz-transition: border 0.15s ease-in;
				-ms-transition: border 0.15s ease-in;
				transition: border 0.15s ease-in; }
				.thumb:hover{border: 5px solid #ffffff; }
				.thumb img {width: 200px; height: 115px;}
				.thumbBig {width: 200px; height: 115px; float: left; margin: 0 5px; background: #fff; border-radius: 5px; border: 5px solid #1f1f1f;}
				.thumbBig img {width: 200px; height: 115px;}
				.subSection {height: 875px; margin-top: 80px;}
				.subContainer {height: 500px; padding-top:10px; padding-left:10px;}
				.subContent {
				width:900px;

				margin-bottom:20px;
				padding-left:20px;
				padding-right:20px;
				padding-top:10px;}
		#footerText {width: 960px; height: 50px; margin-top:35px;}
		#footer {
				width: 1152px;
				height: 85px;
				padding: 10px 0 0 0;
				margin: 0px auto;
				margin-bottom:100px;
				margin-top:20px;
				background-color:#454545;
				border-radius: 15px;

				}
			#map {float: left; width: 250px; margin: 0 10px; padding-left:70px; padding-top:10px;}
			#social {float: left; width: 50px; margin: 0 10px;padding-top:13px;}
			#social2 {float: left; width: 130px; margin: 0 10px;padding-top:13px;}
			#social2b {float: left; width: 90px; margin: 0 10px;padding-top:13px;}
			#social3 {padding-top:10px;background-color:#808080;
				-moz-border-radius: 15px;
				border-radius: 15px;
				width:370px;float:right; margin-right:10px; margin-top:5px; padding-bottom:8px;padding-left:2px;text-align:center;}


/* CASEY STYLES */
#center{
margin-left:240px;
}

#center2{
margin-left:125px;
}




/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/*------------------------------------*\
	NAV
\*------------------------------------*/
#nav{
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
	/* Clear floats */
	float:left;
	width:100%;

	/* Bring the nav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
}
#nav a{
	display:block;
	padding:5px;

	text-decoration:none;-webkit-transition: all 0.15s ease-in;
				-moz-transition: all 0.15s ease-in;
				-ms-transition: all 0.15s ease-in;
				transition: all 0.15s ease-in;
}
#nav a:hover{
	color:#fff;
	background:#000000;
	text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */

}
#nav ul li{
	padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#000000;
	text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#ffffff;
	color:#000000
}