@charset "UTF-8";

<!--

/* FOR Hans Design update 5.7.09
------------------------------------------------------------------*/ 

/* WHOLE SITE, including browser CSS reset 
------------------------------------------------------------------*/ 

body {background-color:#FFFFFF;padding:0;text-align:center;}

p {font-weight: normal;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
hr{width: 80%}
q:before,q:after{content:'';}
:focus {outline: 0;}
* { margin: 0; padding: 0;}


/* TEXT ELEMENTS
------------------------------------------------------------------*/ 

body {font-family: Verdana, Tahoma, Arial, sans serif;font-size:11px;line-height:130%;}

a, a:link {color: #666666;text-decoration: none;}  
a:visited {color: #666666;text-decoration: none;}  
a:hover {color: #ed1c24;text-decoration: none;}  
a:active {color: #ed1c24;text-decoration: none;}
em {font-style:italic;}
.visible {visibility:visible;}

#header h2 {color:#666666;float:left;font-size:10px;line-height:130%;margin:28px 0 0 0;}
#address {color:#666666;float:left;font-size:10px;line-height:130%;margin:28px 0 0 0;}
#hanstagline {float:left;height:94px;width:600px;margin-left:35px;}
	#hanstagline h3, #designservices h3 {position:absolute;text-transform: uppercase;visibility:hidden;}
	#hanstagline p {color:#666666;font-size:11px;font-style:italic;line-height:130%;}

#maincontent p, #maincontenthistory p, #maincontentphilosophy p {clear:left;color:#666666;line-height:150%;margin-left:28px;width:814px;}
#maincontent h2, #maincontenthistory h2, #maincontentphilosophy h2 {visibility:hidden;}
#largerp, #largerp2 {clear:left;color:#666666;font-size:12px;line-height:150%;margin:0 0 20px 28px;}
	#largerp {width:640px;}
	#largerp2 {width:712px;}
#process1 b, #process2 b, #process3 b, #process4 b, #process5 b {clear:left;color:#FFFFFF;float:left;font-size:21px;font-weight:normal;height:50px;margin:45px 50px 0 18px;width:100px;z-index:0;}
#process1 p, #process2 p, #process3 p, #process4 p, #process5 p {clear:none;color:#FFFFFF;float:left;font-size:12px;font-weight:normal;line-height:130%;margin:45px 0 0 0;width:490px;}
#whyhans1 p, #whyhans2 p, #whyhans3 p, #whyhans4 p, #whyhans5 p, #history1 p, #history2 p, #history3 p, #history4 p, #history5 p, #history6 p {color:#FFFFFF;font-size:12px;font-weight:normal;line-height:135%;width:480px;margin-top:46px;}
	#whyhans2 p {margin-left:58px;}
	#whyhans3 p {margin-left:93px;}
	#whyhans4 p {margin-left:143px;}
	#whyhans5 p {margin-left:190px;}
#history1 p, #history2 p, #history3 p, #history4 p, #history5 p, #history6 p {clear:none;float:left;width:365px;margin:28px 0 0 23px;}
#history1 b, #history2 b, #history3 b, #history4 b, #history5 b, #history6 b {font-size:21px;line-height:150%;}	
	
#leftcolumn h3 {clear:left;color:#666666;font-size:11px;line-height:100%;margin:20px 0 0 28px;text-transform: uppercase;}
#leftcolumn h4 {color:#666666;font-size:9px;margin:0 0 28px 28px;text-transform: uppercase;}
#leftcolumn p, #leftcolumn b, #leftcolumnportfolio p, #leftcolumn b {color:#666666;font-size:9px;margin:0 0 15px 28px;width:330px;}
	#leftcolumn p, #leftcolumnportfolio p {line-height:150%;}
	#leftcolumn b, #leftcolumnportfolio b {font-weight:normal;line-height:180%;}	
.caption {color:#666666;display:block;font-size:9px;font-style:italic;line-height:140%;margin:15px 0 0 0;align:left;padding-top:4px;width:465px;}
#rightcolumnwide h2 {clear:left;color:#ed1c24;font-size:9px;line-height:200%;visibility:visible;}
	#rightcolumnwide h3 {color:#666666;font-size:9px;font-style:italic;line-height:150%;width:415px;}
	#rightcolumnwide p {color:#666666;font-size:9px;line-height:150%;margin:0 0 14px 0;width:475px;}

#threecolleft p, #threecolmid p, #threecolright p {color:#666666;font-size:11px;line-height:19px;}

#portfoliotext {display:block;font-style:italic;position:relative;top:290px;width:290px;}
	#portfoliotextIE {clear:both;color:#666666;display:block;font-style:italic;margin-top:250px;padding-top:130px;width:260px;}

#citemain {clear:both;color:#FFFFFF;display:block;font-size:9px;margin:12px 0 0 45px;padding:24px 0 12px 0;}
#frontcite {color:#FFFFFF;font-size:9px;margin-left:45px;position:absolute;top:725px;}
#bottomAIGA {margin-left:55px;}
	#bottomAIGA a {color:#FFFFFF;}


/* LAYOUT ELEMENTS
------------------------------------------------------------------*/

#header {background-color:#FFFFFF;display:block;height:206px;width:870px;margin:0 0 6px 17px;text-align:left;}
.headergrayvert {background-color:#e5e5e5;display:block;float:left;height:34px;width:1px;margin:25px 17px 0 23px;}
.graybar {float:left;height:1px;width:814px;margin:12px 0 12px 28px;}
.maingraybar {clear:both;display:block;height:1px;width:814px;margin:12px 0 0 28px;}

#topnav, #thirdnav, #peoplenav {clear:both;float:left;}
	#topnav li, #thirdnav li, #peoplenav {clear:left;display:block;font-size:9px;height:14px;width:127px;list-style-type:none;}
	#topnav li {left:26px;position:relative;margin: 0 14px 6px 0;}	
	
	#topnav a:hover, #activelink, #thirdnav a:hover {background-color:#ebebeb;color: #ed1c24;display:block;height:14px;width:127px;}
	#peoplenav a, #peopleactivelink {padding:0 0 0 3px;height:14px;width:175px;}
	#peoplenav a:hover, #peopleactivelink {background-color:#ebebeb;color: #ed1c24;display:block;height:14px;width:175px;}
	#thirdnav {margin-bottom:20px;width:150px;}
	#thirdnav li {left:26px;margin:0 0 3px 0;position:relative;width:150px;}
	#thirdnav a:hover, #thirdactivelink {background-color:#ebebeb;color: #ed1c24;display:block;height:14px;width:150px;}
	#peoplenav li {left:26px;margin:0 0 3px 0;position:relative;width:175px;}

#maincontent, #maincontenthistory, #maincontentphilosophy {background-color:#FFFFFF;display:block;width:870px;margin:6px 0 0 17px;padding:6px 0 0 0;text-align:left;}
	#maincontent {min-height:437px;height:auto !important;height:437px;}
	#maincontenthistory {min-height:617px;height:auto !important;height:617px;}
	#maincontentphilosophy {min-height:377px;height:auto !important;height:377px;}	

#left-sidebar {float:left;}
.leftnav a{float:left;}
.leftnav li{float:left;}

#secondnav {margin:12px 0 12px 0;float:left;left:28px;position:relative;}
	#secondnav li {float:left;font-size:9px;list-style-type:none;margin:0 8px 0 0;text-transform: uppercase;}
#activelinksecond {color: #ed1c24;}

#process1, #process2, #process3, #process4, #process5, #whyhans1, #whyhans2, #whyhans3, #whyhans4, #whyhans5, #history1, #history2, #history3, #history4, #history5, #history6 {display:none;}

#leftcolumn, #rightcolumn, #leftcolumnslim, #rightcolumnwide, #leftcolumnportfolio {background-color:#FFFFFF;float:left;padding-bottom:50px;}
	#leftcolumn, #leftcolumnportfolio {width:374px;}
	#leftcolumnportfolio {height:auto !important;min-height:426px;}
	#rightcolumn {width:496px;}
	#leftcolumnslim {width:240px;}
	#rightcolumnwide {width:630px;}
	#threecolleft, #threecolmid, #threecolright {background-color:#FFFFFF;color:#666666;float:left;line-height:180%;padding-top:15px;width:277px;}
	#threecolleft {padding-left:28px;}
	#rightcolumnportfolio {background-color:#FFFFFF;float:left;height:456px;overflow:hidden;padding-bottom:20px;width:496px;}
		
.maingrayhorsmall {background-color:#e5e5e5;clear:left;display:block;float:left;height:1px;width:590px;margin:12px 0 12px 0;}	

#dropshadow1, #dropshadow2, #dropshadow3, #dropshadow4, #dropshadow5, #dropshadow6  {background-image: url('http://hansdesign.com/imx/portfolio-print-design-advertising.jpg');background-repeat: no-repeat;display:inline;float:left;height:190px;width:266px;margin:12px 0 0 16px;padding:7px;}
	#dropshadow1 {background-position: 0 0;}
	#dropshadow2 {background-position: -280px 0;}
	#dropshadow3 {background-position: -560px 0;}
	#dropshadow4 {background-position: -840px 0;}
	#dropshadow5 {background-position: -1120px 0;}
	#dropshadow6 {background-position: -1400px 0;} 
	#dropshadow1:hover {background-position: 0 -204px;}
	#dropshadow2:hover {background-position: -280px -204px;}
	#dropshadow3:hover {background-position: -560px -204px;}
	#dropshadow4:hover {background-position: -840px -204px;}
	#dropshadow5:hover {background-position: -1120px -204px;}
	#dropshadow6:hover {background-position: -1400px -204px;} 
	


/* IMAGE ELEMENTS
------------------------------------------------------------------*/ 

#hansdesignlogo {background-image: url('http://hansdesign.com/imx/hans_design_elements.png');background-position: 28px 0;background-repeat: no-repeat;float:left;height: 34px;width: 108px;margin-top:25px;padding-left:28px;}

#process1, #process2, #process3, #process4, #process5, #whyhans1, #whyhans2, #whyhans3, #whyhans4, #whyhans5, #history1, #history2, #history3, #history4, #history5, #history6 {background-image: url('http://hansdesign.com/imx/hans_design_elements.png');background-repeat: no-repeat;width: 800px;margin:10px 0 0 28px;}
#process1, #process2, #process3, #process4, #process5, #whyhans1, #whyhans2, #whyhans3, #whyhans4, #whyhans5 {height:210px;}
#history1, #history2, #history3, #history4, #history5, #history6 {height:213px;}
	#process1 {background-position: 0 -120px;}
	#process2 {background-position: 0 -330px;}
	#process3 {background-position: 0 -540px;}
	#process4 {background-position: 0 -750px;}
	#process5 {background-position: 0 -960px;}
	#whyhans1 {border:1px #FFFFFF solid;background-position: 0 -1185px;}
	#whyhans2 {border:1px #FFFFFF solid;background-position: 0 -1398px;}
	#whyhans3 {border:1px #FFFFFF solid;background-position: 0 -1611px;}
	#whyhans4 {border:1px #FFFFFF solid;background-position: 0 -1824px;}
	#whyhans5 {border:1px #FFFFFF solid;background-position: 0 -2037px;}
	#history1 {background-position: 0 -1185px;}
	#history2 {background-position: 0 -1398px;}
	#history3 {background-position: 0 -1611px;}
	#history4 {background-position: 0 -1824px;}
	#history5 {background-position: 0 -2037px;}	
	#history6 {background-position: 0 -2250px;}		

#aboutusideas {float:right;margin-left:200px;}

#designservices {background-image: url('http://hansdesign.com/imx/hans-design-services.png');display:block;height:117px;width:731px;margin:30px 0 30px 28px;}

.peoplepic {margin:10px 0 10px 0;}

.logopic {clear:both;float:left;}
	#logopic1 {margin:30px 0 0 15px;}
	#logopic2 {margin:30px 0 0 40px;}
	#logopic3 {margin:30px 0 0 80px;}
	#logopic4 {margin:30px 0 0 130px;}
	#logopic5 {margin:30px 0 0 178px;}
	#logopic6 {margin:30px 0 0 215px;}	

#rightcolumn img {margin-bottom:18px;}

#whyhansimg, #historyimg {margin:6px 0 0 28px;}
#processimg {margin:16px 0 0 60px;}

#mapimg {float:right;margin-right:28px;}

#outsidewrapperhomepage, #outsidewrapperaboutus, #outsidewrapperclients, #outsidewrapperportfolio, #outsidewrappercontact, #outsidewrapperservices {background-color:#181818;background-repeat: no-repeat;border-left:1px solid #f3f3f3;border-right:1px solid #f3f3f3;height:auto !important;height:768px;margin:0 auto;min-height:768px;text-align:left;width:1024px;}
	#outsidewrapperhomepage {background-image: url('http://hansdesign.com/imx/backgrounds/hans_design_home.jpg');}
	#outsidewrapperaboutus {background-image: url('http://hansdesign.com/imx/backgrounds/hans_design_about.jpg');}
	#outsidewrapperclients {background-image: url('http://hansdesign.com/imx/backgrounds/hans_design_clients.jpg');}	
	#outsidewrapperportfolio {background-image: url('http://hansdesign.com/imx/backgrounds/hans_design_portfolio.jpg');}
	#outsidewrappercontact {background-image: url('http://hansdesign.com/imx/backgrounds/hans_design_contact.jpg');}
	#outsidewrapperservices {background-image: url('http://hansdesign.com/imx/backgrounds/hans_design_services.jpg');}

#taglinehomepage, #taglineaboutus, #taglineaboutprocess, #taglinewhyhans, #taglinecases, #taglinehistory, #taglinepeople, #taglineservices, #taglinecontact, #taglineportfolio, #taglineclients {background-repeat: no-repeat;width:600px;margin:6px 0 8px 0;}
	#taglinehomepage {background-image: url('http://hansdesign.com/imx/taglines/homepage.png');height:20px;}
	#taglineaboutus {background-image: url('http://hansdesign.com/imx/taglines/aboutus.png');height:20px;}
	#taglineaboutprocess {background-image: url('http://hansdesign.com/imx/taglines/aboutus.png');height:20px;}
	#taglinewhyhans {background-image: url('http://hansdesign.com/imx/taglines/whyhans.png');height:20px;}
	#taglinecases {background-image: url('http://hansdesign.com/imx/taglines/casestudies.png');height:20px;}	
	#taglinehistory {background-image: url('http://hansdesign.com/imx/taglines/history.png');height:40px;}
	#taglinepeople {background-image: url('http://hansdesign.com/imx/taglines/people.png');height:20px;}	
	#taglineservices {background-image: url('http://hansdesign.com/imx/taglines/services.png');height:20px;}		
	#taglinecontact {background-image: url('http://hansdesign.com/imx/taglines/contactus.png');height:20px;}
	#taglineportfolio {background-image: url('http://hansdesign.com/imx/taglines/portfolio.png');height:20px;}		
	#taglineclients {background-image: url('http://hansdesign.com/imx/taglines/clients.png');height:40px;}			
	
#headlineaboutus, #headlineaboutusprocess, #headlinewhyhans, #headlinehistory, #headlineservices {background-repeat: no-repeat;display:block;width:700px;margin:0 0 15px 28px;}
	#headlinemanaging {background-image: url('http://hansdesign.com/imx/headlines/managing.png');height:30px;}
	#headlineaboutus {background-image: url('http://hansdesign.com/imx/headlines/aboutus.png');height:30px;}
	#headlineaboutusprocess {background-image: url('http://hansdesign.com/imx/headlines/aboutusp.png');height:30px;}
	#headlinewhyhans {background-image: url('http://hansdesign.com/imx/headlines/whyhans.png');height:30px;}
	#headlinehistory {background-image: url('http://hansdesign.com/imx/headlines/history.png');height:30px;}
	#headlineservices {background-image: url('http://hansdesign.com/imx/headlines/services.png');height:60px;}

.bigobjectspacer {display:block;margin-bottom:5px;}

#services-options {display:block;height:117px;width:728px;margin:0 0 28px 28px;}

	#services-brand-strategy a {background-image: url('http://hansdesign.com/imx/services-brand-strategy.png');background-repeat: no-repeat;display:block;float:left;height:117px;width:110px;text-indent:-9999px;}
	#services-brand-strategy a:hover {background-image: url('http://hansdesign.com/imx/services-brand-strategy2.png');}	

	#services-web-design a {background-image: url('http://hansdesign.com/imx/services-web-design.png');background-repeat: no-repeat;display:block;float:left;height:117px;width:150px;text-indent:-9999px;}
	#services-web-design a:hover {background-image: url('http://hansdesign.com/imx/services-web-design2.png');}	

	#services-advertising a {background-image: url('http://hansdesign.com/imx/services-advertising.png');background-repeat: no-repeat;display:block;float:left;height:117px;width:190px;text-indent:-9999px;}
	#services-advertising a:hover {background-image: url('http://hansdesign.com/imx/services-advertising2.png');}

	#services-packaging-design a {background-image: url('http://hansdesign.com/imx/services-packaging-design.png');background-repeat: no-repeat;display:block;float:left;height:117px;width:150px;text-indent:-9999px;}
	#services-packaging-design a:hover {background-image: url('http://hansdesign.com/imx/services-packaging-design2.png');}

	#services-motion-design a {background-image: url('http://hansdesign.com/imx/services-motion-design.png');background-repeat: no-repeat;display:block;float:left;height:117px;width:128px;text-indent:-9999px;}
	#services-motion-design a:hover {background-image: url('http://hansdesign.com/imx/services-motion-design2.png');}


/* FORM INPUT ELEMENTS
------------------------------------------------------------------*/ 

#form1 {color:#666666;font-size:10px;}
#contactbox {padding:12px;width:900px;margin-left:28px;}
.contactdefault {clear:both;color:#666666;font-size:10px;display:block;margin-bottom:20px;}
.formlabel, .formlabel2 {float:left;;padding-top:5px;}
.formlabel {width:100px;}
.formlabel2 {width:33px;}
.forminput {color:#666666;margin:12px 0 8px 0;}
	.input1 {background-color:#EAEAEA;width:300px;border:0px #666666 solid;}
	.input2 {background-color:#EAEAEA;width:118px;border:0px #666666 solid;margin-top:3px;}
.formright {float:left;display:block;padding-top:3px;}
.marginleft {clear:both;font-weight:normal;margin-left:100px;}
#textarea {background-color:#EEEEEE;border:0px #666666 solid;margin-top:9px;width:300px;}
.checkboxes {margin:2px 0 0 100px;}
label.error { width: 400px; display: block; float: left; color: red; padding-left: 10px; }
.form-row1 { padding: 5px 0; clear: both; width: 700px; }
.form-row2 { padding: 5px 0; width: 250px;float:left;clear:left;}
.formsection {margin-top:12px;}
#submitbutton {width:100px;margin:8px 0 20px 303px;}


/* PIKAME SLIDESHOW ELEMENTS
------------------------------------------------------------------*/ 

ul#pikame{
	padding-left:0;
	width:500px;
	margin:0 auto;}
.pika_main{
	width:470px;
	padding-right:20px;
	margin:0 auto;}
#pikame li{
	list-style:none;
	margin: 8px 3px 0 ;
	float: left;}

ul#pikame li img{position:relative;cursor:pointer;}
.pika_main img{border:0px solid #222;}
.pika_main{position: relative;margin:0 auto;}
.pikachoose li{float:left;position:relative;overflow:hidden;list-style:none;}
.pika_play{position:absolute;top:326px;right:34px;z-index:1;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;}
.pika_play img{border:none !important;visible:none;}
.pika_caption{width:100%;height:30px;text-align:center;}
.pika_navigation a{font-size: 12px;color:white;text-decoration: none;border:2px solid #FFFFFF;}
.pika_navigation a:hover{text-decoration: underline;border:2px solid #FF0000;}
.pika_navigation{padding-top:10px;clear:both;text-align:left;}


/* LIGHTBOX SLIDESHOW ELEMENTS
------------------------------------------------------------------*/

#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}
#gallery {
		background-color: #FFFFFF;
		padding: 10px 0 0 0;
		width: 520px;
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display: inline; }
	#gallery ul img {
	border: 2px solid #FFFFFF;	
	}
	#gallery ul a:hover img {
		border: 2px solid #FF0000;
		}
	#gallery ul a:hover { color: #FF0000; }

-->