@font-face {
	font-family: "Junction";
	src: url('../../fonts/Junction.ttf') format("truetype");
}


@font-face {
	font-family: "Officina Book";
	src: url('../../fonts/OfficinaSans-Book.otf') format("opentype");
}


 
 
 /* RESET */
html {background-color:#fff;color:#000000;}
body,div,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}

/* FONTS */
body {font:11px/1.231 Junction,arial,helvetica,clean,sans-serif;}
table {font-size:inherit;font:100%;}
th {font-style:normal;font-weight:normal;text-align:left;}
code {font-family:monospace;line-height:100%;}
input, textarea, select, option {font-family:arial,helvetica,clean,sans-serif;font-size:inherit;font-weight:inherit;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
em {font-style:italic;font-weight:normal;}
strong {font-style:normal;font-weight:bold;}
address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}

/* FLOATS */
.left {float:left;}
.right {float:right;}
.clearabove {line-height:0;height:0;font-size:0;clear:both;} /* Use on a clearing element following a float */

/* HIDE */
.none {display:none;}
.hidden {visibility:hidden;overflow:hidden;width:0;height:0;}

body {
	background: #f6f0f0 url('img/bodybg.jpg') repeat-x 0 0;
	}
a, a:visited {
	color:#003399;
	}
	
	


#wrapper {
     overflow-y: hidden;
     }




#header {
	position:relative;
	height: 225px;
	background: url('img/header_bg2.jpg') no-repeat 50% 0;
	}


#header h1 {
	display:block;
	width: 187px; height: 55px;
	position:absolute;
	left: 181px;
	left: 91px;
	top: 84px;
	text-indent: -5000px;
	background: url('img/kw-logo.png') no-repeat 0 0;
	}
	
	

#header h1 a {
	display:block;
	width: 298px; height: 90px;

	}


#globalnav {
	margin:0; padding:0;
	width: 295px;
	height: 34px;
	position:absolute;
	top: 95px;
	left: 712px;
	left: 582px;
	overflow: hidden;
	}


#globalnav li {
	float: left;
	position: relative;
	height: 34px;
	padding-right: 13px;
	text-indent: -5000px;
	list-style-type:none;
	}


#nav-liftoff a {
	background: url('img/nav-liftoff-off.png') no-repeat 0 0;
	width: 79px;
	height: 34px;
	display:block;
	}


#nav-liftoff a.current,
#nav-liftoff a:hover {
	background: url('img/nav-liftoff-on.png') no-repeat 0 0;
	}

#nav-traj a {
	background: url('img/nav-trajectory-off.png') no-repeat 0 0;
	width: 105px;
	height: 34px;
	display:block;
	}

#nav-traj a.current,
#nav-traj a:hover {
	background: url('img/nav-trajectory-on.png') no-repeat 0 0;
	}

#nav-orbit a {
	background: url('img/nav-orbit-off.png') no-repeat 0 0;
	width: 68px;
	height: 34px;
	display:block;
	}

#nav-orbit a.current,
#nav-orbit a:hover {
	background: url('img/nav-orbit-on.png') no-repeat 0 0;
	}

#content {
	min-height: 346px;
	width: 900px;
	position: relative;
	top: -37px;
	color: #aca499;
	font-family: Junction,Tahoma, Verdana, Sans;
	font-size: 11px;
	line-height: 16px;
	margin: 0 auto;
	padding-bottom: 35px;
	}
	
#liftoff-d {
	background: url('img/liftoff-fade.jpg') no-repeat 153px 287px;

	}
	
#trajectory-d {
	}
	
		
#orbit-d {

	}
	
.scrollable_items {
	width: 900px !important;
	height: 346px;
	position: relative;
	float:left;


	}

#liftoff-rocket {
	position:absolute;
	z-index: 1;
	left:180px;
	top: 0px;
	}


#traj-rocket {
	position:absolute;
	z-index: 1;
	left:320px;
	top: 18px;
	}



#orbit-satellite {
	position:absolute;
	z-index: 1;
	left:300px;
	top: -59px;
	}
	
	
.content-left {
	position:absolute;
	width: 260px;
	left:20px;
	top: 110px;
	z-index: 2;
	text-align:right;
	font-family: "Officina Book", Tahoma,Verdana,Sans;
	}


.content-left h2 {
	color: #eeae71;
	font-size: 21px;
	font-weight:bold;
	margin:0 0 10px 0;
	padding:0;
	line-height: 26px;
	width: 260px;
	letter-spacing: -1px;
	font-family: Junction, Tahoma, Verdana, Sans;
	}

.content-left p {
	margin:0;
	padding:0 0 0 40px;
	width: 220px;
	font-size: 12px;
	line-height: 18px;
	font-family: "Officina Book", Tahoma,Verdana,Sans;

	}
#orbit-d .content-left p {
	width: 220px;
	}
.content-right {
	position:absolute;
	width: 300px;
	left: 575px;
	top: 80px;
	z-index: 2;
	color: #aca499;
	font-size: 11.5px;
	line-height: 19px;
	}

#liftoff-d .content-right {
	top: 100px;
	}


#trajectory-d .content-left {
	top: 80px;
	}
	
	
#trajectory-d .content-left p {
	top: 80px;
	font-size: 12.5px;
	}
	
	
#gonogo {
	position:absolute;
	width: 137px;
	height: 100px;
	left: 310px;
	top: 97px;
	z-index: 2;
	}


#patches {
	min-height: 287px;
	width: 832px;
	top:-130px;
	margin:0 auto;
	position:relative;
	}


#patches p {
	z-index: 25;
	width: 100px;
	position:absolute;
	top: 50px;
	left: 20px;
	color: #01419f;
	margin:0;
	padding:0;
	}

ul.missionbadges {
	list-style-type: none;
	display:block;
	width: 742px;
	height: 287px;
	position:absolute;
	top: 0px;
	left: 40px;
	margin:0 auto;
	padding:0;
	}

ul.missionbadges li {
	text-indent: -5000px;
	}

li#badge_email {
	display:block;
	width: 236px;
	height: 221px;
	position:absolute;
	top:73px;
	left:0;
	background: url('img/badges/badge_email.png') no-repeat 0 0;
	z-index: 10;
	}

li#badge_tradeshow {
	display:block;
	width: 249px;
	height: 263px;
	position:absolute;
	top:0px;
	left:134px;
	background: url('img/badges/badge_tradeshow.png') no-repeat 0 0;
	z-index: 5;
	}

li#badge_website {
	display:block;
	width: 223px;
	height: 216px;
	position:absolute;
	top:71px;
	left:297px;
	background: url('img/badges/badge_website.png') no-repeat 0 0;
	z-index: 10;
	}

li#badge_print {
	display:block;
	width: 192px;
	height: 199px;
	position:absolute;
	top:18px;
	left:426px;
	background: url('img/badges/badge_print.png') no-repeat 0 0;
	z-index: 15;
	}


li#badge_anim {
	display:block;
	width: 203px;
	height: 158px;
	position:absolute;
	top:98px;
	left:538px;
	background: url('img/badges/badge_anim.png') no-repeat 0 0;
	z-index: 5;
	}

li#badge_email a {
	display:block;
	width: 236px;
	height: 221px;
	}

li#badge_tradeshow a {
	display:block;
	width: 249px;
	height: 263px;
	}

li#badge_website a {
	display:block;
	width: 223px;
	height: 216px;

	}

li#badge_print a {
	display:block;
	width: 192px;
	height: 199px;
	}


li#badge_anim a {
	display:block;
	width: 203px;
	height: 158px;
	}



#content {
	height: 346px;
	width: 900px;
	position: relative;
	top: -37px;
	color: #aca499;
	font-family: Junction,Tahoma, Verdana, Sans;
	font-size: 11px;
	line-height: 16px;
	margin: 0 auto;
	}








.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	height: 346px;
	width: 768px;
}


/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
		margin:0;
		padding:0;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.scrollable_items {
		float:left;
		cursor:pointer;
		width:768px ;
		height:346px;
		overflow:hidden;
		background-attachment:fixed;

	}








.miniscrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	height: 100px;
	width: 346px;
}


/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.miniscrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
		margin:0;
		padding:0;
}








.smallscroll {

	/* required settings */
	position:relative;
	overflow:hidden;
	height: 100px;
	width: 346px;
}





	
.trajects {
	float:left;
	width: 346px;
	color: #aca499;
	font-family: Junction, Tahoma, Verdana, Sans;
	font-size: 11px;
	line-height: 16px;
	overflow:hidden;
	}
	
.trajects p {
	width: 300px;
	}

.trajects h3 {
	margin:0;
	padding:0;
	color: #ff9933;
	font-family: Junction, Verdana, Sans;
	font-size: 14px;
	font-weight:bold;
	line-height: 18px;
	width: 300px;
	letter-spacing: -1px;
	}


#trajnav {
	margin:0 0 10px 0;
	padding:0;
	display:block;
	height: 18px;
	width: 300px;
	overflow: hidden;
	}

#trajnav li {
	float: left;
	display:block;
	width: 18px;
	height: 18px;
	margin:0 18px 0 0;
	list-style-type: none;
	padding:0;
	text-indent: -5000px;
	}

#trajnav li a {
	display:block;
	width: 18px;
	height: 18px;
	}


#trajnav_1 a {
	background: url('img/trajnav-1-off.gif') no-repeat 0 0;
	}
#trajnav_2 a {
	background: url('img/trajnav-2-off.gif') no-repeat 0 0;
	}
#trajnav_3 a {
	background: url('img/trajnav-3-off.gif') no-repeat 0 0;
	}
#trajnav_4 a {
	background: url('img/trajnav-4-off.gif') no-repeat 0 0;
	}
#trajnav_5 a {
	background: url('img/trajnav-5-off.gif') no-repeat 0 0;
	}



#trajnav_1 a.current, #trajnav_1 a:hover {
	background: url('img/trajnav-1-on.gif') no-repeat 0 0;
	}
#trajnav_2 a.current, #trajnav_2 a:hover {
	background: url('img/trajnav-2-on.gif') no-repeat 0 0;
	}
#trajnav_3 a.current, #trajnav_3 a:hover {
	background: url('img/trajnav-3-on.gif') no-repeat 0 0;
	}
#trajnav_4 a.current, #trajnav_4 a:hover {
	background: url('img/trajnav-4-on.gif') no-repeat 0 0;
	}
#trajnav_5 a.current, #trajnav_5 a:hover {
	background: url('img/trajnav-5-on.gif') no-repeat 0 0;
	}



ul.social {
	margin:0;
	width: 200px;
	height: 40px;
	position: absolute;
	top: 50px;
	left: 0px;
	list-style-type: none;
}

ul.social li {
	float:left;
	width: 40px; height: 40px;
	margin:0;
	padding:0;
	}

ul.social li a {
	display:block;
	width: 40px; height: 40px;
	text-indent: -5000px;
	}


#social-fb a {
	background: url('img/social-fb.png') no-repeat 0 0;
	}
#social-rss a {
	background: url('img/social-rss.png') no-repeat 0 0;
	}
#social-youtube a {
	background: url('img/social-youtube.png') no-repeat 0 0;
	}

#social-twitter a {
	background: url('img/social-twitter.png') no-repeat 0 0;
	}
#social-linkedin a {
	background: url('img/social-kw.png') no-repeat 0 0;
	}



body.portfolio {
	background: #f6f0f0 url('img/bodybg.jpg') repeat-x 0 -184px;
	}
	
	
body.portfolio #header {
	height: 140px;
	background: url('img/portfolio-header2.jpg') no-repeat 50% 0;
	}

body.portfolio #header h1 {
	top: 40px;
	left: 120px;
	}

body.portfolio #globalnav {
	top: 55px;
	}

body.portfolio #content {
	top: 40px;
	height: auto;
	width: 900px;
	}


#portfolio-header {
	height: 119px;
	background: url('img/portfolio-badges.jpg') no-repeat 0 0;
	padding: 30px 0 0 380px;
	overflow: hidden;
	position: relative;
	}



#portfolio-header h2 {
	color: #af8053;
	font-size: 11px;
	font-weight:bold;
	margin:0 0 10px 0;
	font-weight: bold;
	padding:0;
	line-height: 16px;
	font-family: "Officiana Book", Tahoma, Verdana, Sans;
	width: 300px;
	}

#portfolio-header p {
	margin:0;
	padding:0 0 10px 0px;
	width: 480px;
	font-size: 10.5px;
	line-height: 16px;
	font-family: "Junction", Tahoma,Verdana,Sans;
	color: #aca499;
	}

#portfolio-header a {
	text-decoration:none;
	font-weight:bold;
	color: #b8b26e;
	}



#nav-column {
	float: left;
	width: 150px;
	padding: 75px 0 0 50px;
	font-size: 11px;
	font-weight:normal;
	line-height: 16px;
	font-family: "Junction", Tahoma, Verdana, Sans;
	}


#nav-column h3 {
	
	}

#nav-column ul {
	list-style-type:none;
	margin:0;
	padding:15px 0;
	}

#nav-column li {
	margin:0;
	padding:3px 0;
	}
	

#nav-column a {
	text-decoration: none;
	color: #003399;
	}


.portfolio_samples ul {
	margin:0;
	padding:0;
	
	}



.portfolio_samples li {
	width: 230px;
	height: 80px;
	overflow:hidden;
	display:block;
	border: 10px solid #000;
	}

.badges h3 {
	font-family:'Officiana Book', Tahoma, Verdana, Sans;
	font-weight:bold;
	font-size: 12px;
	color:#AF8053;
	
	}
	
div.sample {
	margin: 10px 0 0 0;
	padding: 0 0 15px 0;
	border-bottom: 1px solid #aca499;
	min-height: 107px;
	position: relative;
	width: 100%;
	}

.details {
	padding: 0 0 0 430px;
	min-height: 100px;
	}
	
.thumbnail {
	position: absolute;
	top:0;
	left: 150px;
	}


.badges {
	width: 120px;
	position: absolute;
	top:0;
	left:0;
	}

.badges ul {
	list-style-type: none;
	margin:0;
	padding:0;
	width: 160px;}

.details table th {
	padding-right: 10px;
	vertical-align: top;
	}
	
.details table td {
	color: #333;
	vertical-align: top;
	padding-bottom: 7px;
	}
	
	
#outerImageContainer {
	background: transparent;
	}
	
#imageContainer {
	padding:20px;
	}
	
body.sample {
	background-image: none;
	background: #fff;
	}
#lightbox {
	top: 0px !important;
	padding-top: 60px;
	}

#imageDataContainer {
	top: 0px !important;
	padding-top: 0px !important;
	height: 50px; 
	}
	
#imageData #numberDisplay {
	padding-bottom: 0 !important;
	}
	
	h4#caption {
		margin-bottom: 20p;
		margin-top:0;
		
		font-weight: bold;
		font-size: 18px;
		line-height: 24px;
		padding-left: 5px;
		}
		
#numberDisplay {
	color: #999 !important;
	background: #000;
	padding-bottom: 10px;
	}
#imageData {
	padding-left: 50px  !important;
	}
	
#bottomNav {
		top: -20px;
		}
		

#portfolio-samples {
	padding: 0 0 0 225px;
	}

#portfolio-samples2 {
	padding: 0 0 0 225px;
		display:block;

	}
#pagination {
	float:left;
	font-family:'Officiana Book', Tahoma, Verdana, Sans;
	}
		
#portfolio-samples2 {
	height: 25px;
	z-index: 100;
	}
	
#ditto_pages {
	float:right;
	font-family:'Officiana Book', Tahoma, Verdana, Sans;
	clear:right;
	}
	
#ditto_pages  a, .ditto_currentpage {
	padding: 0 3px;		
	text-decoration:none;
		}
		
		
#dyn_badge {
	position: relative;
	top:0px;
	left:0;
	display: block;
	width: 900px;
	height: 1px;
	margin: 0 auto;
	z-index: 10;
	clear: none;
	}
		
#dyn_badge img.email_badge {
	position: relative;
	top: -80px;
	left: 40px;
	width: 188px;
	height: 180px;
	}
	
		
#dyn_badge img.web_badge {
	position: relative;
	top: -80px;
	left: 40px;
	width: 188px;
	height: 180px;
	}
	
	

	
			
#dyn_badge img.anim_badge {
	position: relative;
	top: -60px;
	left: 40px;
	width: 203px;
	height: 158px;
	}
	
			
#dyn_badge img.print_badge {
	position: relative;
	top: -80px;
	left: 40px;
	width: 188px;
	height: 180px;
	}
	
	
				
#dyn_badge img.tradeshow_badge {
	position: relative;
	top: -110px;
	left: 0px;
	width: 209px;
	height: 223px;
	}
	
/* 	footer	*/

#footer {
	height: 98px;
	background: url('img/footer-bg.gif') repeat-x 0 0;
	position: relative;
	margin-bottom: 0px;
	}
	
body.portfolio #footer {
	margin-top: 80px;
	}
	
	
	
#footer-address {
	position:absolute;
	left:40px;
	top: 45px;
	line-height: 16px;
	color: #999;
	}

#footer-address img {
	padding-top: 0px;
	float:left;
	margin-right: 5px;
	}


#footer-social {
	position:absolute;
	top: 35px;
	right: 0px;
	}



#footer-social ul {
	margin:0;
	width: auto;
	height: 29px;
	list-style-type: none;
}

#footer-social ul li {
	float:left;
	width: 29px; height: 29px;
	margin:0;
	padding:0;
	}

#footer-social li a {
	display:block;
	width: 29px; height: 29px;
	text-indent: -5000px;
	}


#footer-social-facebook {
	background: url('img/social-facebook.gif') no-repeat 0 0;
	}

#footer-social-youtube {
	background: url('img/social-youtube.gif') no-repeat 0 0;
	}

#footer-social-twitter {
	background: url('img/social-twitter.gif') no-repeat 0 0;
	}
#footer-social-linkedin {
	background: url('img/social-linkedin.gif') no-repeat 0 0;
	}


#footer-cushion {
	width: 800px;
	height: 98px;
	margin: 0 auto;
	position:relative;
	}

body.portfolio.email #nav-column ul li {	
	
	line-height: 12px;
	}
	
	body.portfolio.email #nav-column ul li a {	
	padding: 4px 5px 2px 5px;
	margin: 0px 0 0 -2px;
	padding: 4px;
	}





body.portfolio.all #nav-column ul li a#all,
body.portfolio.email #nav-column ul li a#email,
body.portfolio.web #nav-column ul li a#web,
body.portfolio.anim #nav-column ul li a#anim,
body.portfolio.print #nav-column ul li a#print,
body.portfolio.tradeshow #nav-column ul li a#tradeshow{	
	color: #666;
	background: #fbfbfb;
	padding: 4px 5px 2px 5px;
	margin: 0 0 0 0px;
	display:inline-block;
	}




#orbit-d a {
	color:#fff;
	font-weight:bold;
	text-decoration: none;
	}

.thumbscontainer, .details {
	padding-top: 10px;
	}

.expander {
	display:block;
	height: 31px;
	width: 31px;
	position:absolute;
	top:4px;
	left:227px;
	background: url('img/expand.png') no-repeat 0 0;}





.livesite {
	display:block;
	height: 34px;
	width: 86px;
	position:absolute;
	top:70px;
	left:0px;
	}


.livesitea {
	display:block;
	height: 34px;
	width: 86px;
	background: url('img/livesite.png') no-repeat 0 0;
	text-indent:-5000px;
	}











	
@media all and (max-width: 768px) {
   #wrapper {
	min-height: 700px;
	margin: 0 auto;
	width: 768px;
	}
	#header {
     width: 768px;
     }
#content, body.portfolio #content, #dyn_badge
 {
     width: 768px;
     }
	#gonogo {
     display: none;
     }

	#liftoff-d .content-right {
			   left: 440px;
			   width: 255px;
}
#content {
     padding-bottom: 40px;
     }

#globalnav {
right: 20px;
left: auto !important;
     }
.scrollable {
     width: 768px;
     }
     
     .scrollable_items {
     width: 768px !important;
     }

#header h1 {
left: 40px;     
     }

#liftoff-rocket {
left: 40px;    
     }
ul.missionbadges {
     left: 0px;
     width: 768px;
     }
#patches {
     width: 768px;
     overflow-y: hidden;
     }
#patches p {
     position: absolute;
     width: 768px;
     height: 20px;
     top: 260px;
     left: 0px;
     text-align: center;
     }
   #footer-cushion {
     width: 768px;
     }
   #footer-address {
  left:20px; }
  
  #footer-social {
  right:10px;
}


#traj-rocket {
     left: 280px;
     }


#trajectory-d .content-left {
  top:80px;
  width: 240px;
}
#trajectory-d .content-right {
     left: 500px;
     }
.trajects p {
     width: 250px;
     }
#orbit-satellite {
     left: 220px;
     }
#orbit-d .content-left p, #orbit-d .content-left h2, #orbit-d .content-left {
     width: 200px;
     padding-left: 0;
     }

#orbit-d .content-right {
     left: 480px;
     }

li#badge_anim {
     left: 528px;
     }
     
     
   #portfolio-samples {
     width: 543px;
     }
 #portfolio-samples2 {
width: 533px;
     height: 25px;
     }
   
   
   
#portfolio-header {
     padding-left: 380px;
     }

#portfolio-header p {
 
  width:360px;
}


div.sample {

  min-height:177px;
  }
.details {
	padding: 30px 20px 0 280px;
	min-height: 100px;
	}
	
.thumbnail {
	position: absolute;
	top:20px;
	left: 0px;
	}


.badges {
	width: 220px;
	position: absolute;
	top:0;
	left:0;
	}


body.portfolio #header h1 {
top: 50px;
left: 80px;
}



}

@media all and (min-width: 769px) {
   #wrapper {
	min-height: 700px;
	margin: 0 auto;
	width: 900px;

	}
	.scrollable {
     width: 900px;
     }


}