/* - - - - - - - - - - - - - - - - - - - - -

Title		: JHedberg - Industrial Designer BFA
Autor		: Tobias Persson www.ramblin.se
URL 		: www.jhedberg.com

Description : Johan Hedbergs Portfolio

Created 		: January 20, 2010


- - - - - - - - - - - - - - - - - - - - - */

/*div {
	border: 1px solid black;
}*/


body {
	margin: 0;
	width:100%;
	height:100%;
	background: #e3e3e3 url('../background/images/top-back.jpg') no-repeat top center;
	font-size: 12px;
	line-height:1.5;
	}
body,td,th {
	font-family: "Helvetica Neue", Arial, sans-serif;
	color: #444751;
	font-size: 12px;
	}
.wrapper { 
	width: 930px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	}
#wrapper_footer {
	width: 930px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	}

/*****************************************************/
/* RESETTERS AND GLOBAL SETTINGS               		 */
/***************************************************/

h1, h2, h3, h4 { 
	margin-top: 0px;
	margin-bottom: 10px;
	color: #545454;
	font-weight: bold;
	text-transform:uppercase;
	}
h1 { 
	font-size: 18px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*	line-height: 110%;*/
	}
h2 { 
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;	
	color: #545454;
	text-decoration: none;
	text-transform: uppercase;		
	}
 h2 a { 
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;	
	color: #599FB4;
	text-decoration: none;
	text-transform: uppercase;		
	}
h3, h3 a { 
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;	
	color: #444751;
	text-decoration: none;
	text-transform: uppercase;
	}
p{
	font-family:"Helvetica Neue", georgia;
	}
small { 
	margin: 0;
	color: #444751;
	font-size: 11px;
	}
a  { 
	font-weight: bold;
	font-size: 12px;	
	color: #599FB4;
	text-decoration: none;
	list-style:none;
	}
a:hover  { 
	font-weight: bold;
	font-size: 12px;	
	color: #599FB4;
	text-decoration: underline;
	}
a img  { 
	border: none;
	}
p.bold { 
	font-weight: bold;
	}
img.left { 
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	}
img.right { 
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	}
img.margin_top { 
	float: left;
	margin-top: 30px;
	}
div.clear { 
	clear:both;
	}


/*****************************************************/
/* Header                                  		 */
/***************************************************/

#header { 
	float: left;
	width: 930px;
	padding-top: 34px;
	}
#logo { 
	float: left;
	width: 140px;
	margin-right: 450px;
	display:inline;
	}
#logo h1 a { 
	display: block;
	width: 260px;
	height: 61px;
	background: url('../images/logo/jhedberg_logo.png') no-repeat;
	}
#nav {
	margin: 0 auto;
	padding: 0px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 10px;
	text-align: center;
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;	
	display:inline;
	padding-top:15px;
	}
#nav li {
	float: left;
	}
#nav li a {
	float: left;
	width: 74px; 
	height: 37px; 
	background: url("../images/menu/off.png") top left no-repeat; 
	color: #585858; 
	text-decoration: none;
	vertical-align:baseline;
	font-size: 100%;
	border: 0;
	text-align: center;
	padding: 7px 0 0 0;
	margin: 0 5px;
	margin-bottom:10px;
	text-transform:uppercase;
	} 
#nav li.on a {
	background: url("../images/menu/active.png") top left no-repeat;
	color: #fff;
	}
#nav li.on a:hover {
	background: url("../images/menu/active.png") top left no-repeat;
	}
#nav li a:hover {
	background: url("../images/menu/on.png") top left no-repeat;
	color: #fff;
	}


/*****************************************************/
/* Intro                              		 */
/***************************************************/

#intro { 
	width: 930px;
	}
#intro h1#text_intro { 
	display: block;
	width: 930px;
	height: 115px;
	background: url('../images/intro/index_intro.png') no-repeat;	
	margin: auto;
	padding: 0px;
	margin-top:40px;
	float:left;
	}
#intro h1#finally_intro { 
	display: block;
	width: 157px;
	height: 86px;
	background: url('../images/intro/finally.png') no-repeat;	
	margin: auto;
	padding: 0px;
	margin-top:-20px;
	float:right;
	margin-right:-80px;
	}
#intro h1#mastermind_intro { 
	display: block;
	width: 157px;
	height: 86px;
	background: url('../images/intro/mastermind.png') no-repeat;	
	margin: auto;
	padding: 0px;
	margin-top:-20px;
	float:right;
	margin-right:100px;
	}
#intro h1#work_intro { 
	display: block;
	width: 157px;
	height: 86px;
	background: url('../images/intro/feedmyinbox.png') no-repeat;	
	margin: auto;
	padding: 0px;
	margin-top:-20px;
	float:right;
	margin-right:-100px;
	}
#intro h1#portfolio_intro { 
	display: block;
	width: 600px;
	height: 84px;
	background: url('../images/intro/portfolio_intro1.png') no-repeat;	
	margin: auto;
	padding: 0px;
	margin-top:30px;
	float:left;
	}
#intro h1#about_intro { 
	display: block;
	width: 368px;
	height: 84px;
	background: url('../images/intro/about_intro_large.png') no-repeat;	
	margin: auto;
	padding: 0px;
	margin-top:30px;
	float:left;
	}
#intro h1#contact_intro { 
	display: block;
	width: 631px;
	height: 84px;
	background: url('../images/intro/contact_intro.png') no-repeat;	
	margin: auto;
	padding: 0px;
	margin-top:30px;
	float:left;
	}
h1 span { 
	display: none;
	}
#start{
	margin: 0 auto;
	padding: 0px;
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;	
	display:inline;
	position:relative;
	left:800px;
	top:-27px;
	width:126px;
	height:18px;
	cursor: pointer;
	}
#start li a:active{
	background: url("../images/index/dropmealine.png") no-repeat bottom right;	
	}


/*****************************************************/
/*Index content                             		 */
/***************************************************/

div#content	{ 
	float: left;
	width: 100%;
	margin-bottom: 20px;
	line-height: 20px;	
	display:table;
	margin-top:10px;
	}
#left{
	width: 500px;
	height: 300px;
	margin:auto;
	padding: 0px;
	float:left;
	}
	
	
/*****************************************************/
/*Project Slider                           		 */
/***************************************************/

#projects{
	width:500px;
	height:400px;
	display:block;
	margin: 0 auto;
	position:relative;
	}
.project-dots {
	position:absolute;
	left:230px;
	bottom:80px;
	}
.project-dots a{
	width:12px;
	height:12px;
	display:block;
	background:url("../images/index/dott.png") no-repeat top left;
	text-indent:-99999em;
	margin-right:5px;
	float:left;
	}
.project-dots a.active{
	background:url("../images/index/dott.png") no-repeat bottom left;
	}
.project-dots a.active:hover{
	opacity:1;
	}
.button-next-project{
	position:absolute;
	left:300px;
	bottom:80px;
	width:52px;
	height:11px;
	background: url("../images/index/button-next.png") no-repeat top right;
	text-indent:-99999em;
	cursor: pointer;
	}
.button-next-project:active{
	background: url("../images/index/button-next.png") no-repeat bottom right;	
	}
.button-prev-project{
	position:absolute;
	left:150px;
	bottom:80px;
	width:52px;
	height:11px;
	background: url("../images/index/button-prev.png") no-repeat top right;
	text-indent:-99999em;
	cursor: pointer;
	}
.button-prev-project:active{
	background: url("../images/index/button-prev.png") no-repeat bottom right;	
	}
.project {
	width:600px;
	height:400px;
	position:relative;
	margin-right:20px;
	}
.project-image-wrap{
	padding:10px;
	padding-top:9px;
	padding-bottom:9px;
	position:relative;
	margin-bottom:15px;
	}
.project-image-wrap img{
	width:500px;	
	height:300px;
	display:block;
	}
.project-image-wrap a{
	position:absolute;
	left:-60px;
	top:9px;
	width:600px;	
	height:288px;
	background: url("../images/button-zoom.png") no-repeat bottom right;
	text-indent:-9999em;
	opacity:0;
	border:0;
	}
#scroller-window,
#scroller-web-window{
	height:400px;
	}
#scroller-window {
   	position:relative; 
   	overflow:hidden;          
   	width: 500px;     
   	float:left;
	}
#scroller-web-wrap{
	width:10000em;
	position:absolute;
	}
#scroller-window .project{
	float:left;
	}
#right{
	float:left;
	width:400px;
	height:300px;
	margin-left:30px;
	margin-top:11px;
	}
#contact{
	list-style:none;
	text-decoration: none;
	text-transform:uppercase;
	}



/*****************************************************/
/* Footer                               		 */
/***************************************************/

div#strip_footer {
	float: left;
	width: 100%;
	}
div#footer	{ 
	background: #3d3f48 url('../images/background/footer-back.jpg') repeat-x top;
	margin-top: 40px;
	float: left;
	width: 100%;
	height: 150px;
	padding-top: 23px;
	color: #fff;	
	}
#footer p { 
	margin: 0px;
	padding: 0px;
	font-size:10px;
	}
div#footer a	{ 
	text-decoration: none;
	color: #fff;	
	font-weight: bold;
	font-size:10px;
	}
div#footer a:hover	{ 
	text-decoration:underline;
	font-weight:bold;
	color: #fff;
	font-size:10px;
	}

.col_1	{ 
	width: 300px;
	float: left;
	}
.col_2	{ 
	width: 300px;
	float: right;
	margin-top:35px;
	}

div#footer h1.jhedberg a { 
	width: 138px;
	height: 26px;
	background:  url('../images/logo/jhedberg_small.png') no-repeat top;
	display: block;
	color: #ffffff;
	}
div#footer h1.jhedberg span	{ 
	display: none;
	}


/*****************************************************/
/* Portfolio Page                        		 */
/***************************************************/

ul{	
	list-style: none;
	}
.thumbs { 
	margin-left:-35px; 
	}
.thumbs:after { 
	content: "."; 
	clear: both; 
	display: block; 
	height: 0; 
	visibility: hidden;
	}

.thumbs li{
	float:left;
	margin:0 0 20px 40px;
	padding: 0;
	background: none;
	width:197px;
	}
.thumbs .row_leader {
	margin-left: 0;
	clear: left;
	}
.thumbs img {
	display: block;
	margin: 0 0 10px;
	border: 2px solid #dbdbdb;
	}
.thumbs h2 {
	font-weight: bold;
	font-size: 1em;
	margin: 0;
	color:#599fb4;
	}
.thumbs h3 {
	font-weight: bold;
	font-size: 1em;
	color: #999;
	margin: 0 0 5px;
	}
.download{
	float:right;
	margin-top:-50px;
	}
.download a{
	margin-left:10px;
	}


/*****************************************************/
/* About Page                        		 */
/***************************************************/

#about{
	width:930px;
	margin-top:30px;
	float:left;
	border-bottom:1px solid #BCBCBC;
	padding-bottom:20px;
	}
.about_text {
	font-family:"Helvetica Neue", Georgia;
	font-size:12px;
	line-height:26px;
	padding-bottom:12px;
	width:700px;
	float:left;
	}
#about-img {
	margin-left:20px;
	float:left;
	border-left:1px solid #BCBCBC;
	padding-left:20px;
	margin-top:40px;
	}
#testimonials{
	width:930px;
	margin-top:3px;
	float:left;
	border-top:1px solid #BCBCBC;
	padding-top:30px;
	padding-bottom:30px;
	border-bottom:5px solid #3E4D5C;
	}

#testimonials-img {
	margin-right:20px;
	float:left;
	border-right:1px solid #BCBCBC;
	padding-right:20px;
	}
.testimonials_text {
	font-family:"Helvetica Neue";
	font-size:12px;
	line-height:26px;
	padding-top:0px;
	width:650px;
	float:left;
	font-style:italic;
	}
.source {
	color:#599fb4;
	float:right;
	font-weight:bold;
	}
.source a{
	color:#599fb4;
	float:right;
	font-family:"Helvetica Neue";
	font-size:12px;
	line-height:26px;
	}
.r_design_text, .p_design_text {
	font-family:"Helvetica Neue";
	font-size:12px;
	}
#about_left{
	float:left;
	width:210px;
	}
#cv{
	width:460px;
	float:left;
	margin-right:30px;
	}

#cv-img{
	border-bottom:1px solid #BCBCBC;
	padding-bottom:10px;
	}
.prev_work{
	float:left;
	width:230px;
	padding-top:10px;
	border-top:1px solid #BCBCBC;
	margin-top:3px;
	font-family:"Helvetica Neue";
	}
.edu{
	float:left;
	width:210px;
	margin-left:20px;
	padding-top:10px;
	border-top:1px solid #BCBCBC;
	margin-top:3px;
	font-family:"Helvetica Neue";
	}

#about_right{
	float:left;
	width:210px;
	margin-left:20px;
	}
#services{
	width:930px;
	margin-top:30px;
	float:left;
	}
#p_design-img{
	border-bottom:1px solid #BCBCBC;
	padding-bottom:10px;
	}
.p_design_text{
	padding-top:10px;
	border-top:1px solid #BCBCBC;
	margin-top:3px;
	}
#r_design-img{
	border-bottom:1px solid #BCBCBC;
	padding-bottom:10px;
	}
.r_design_text{
	padding-top:10px;
	border-top:1px solid #BCBCBC;
	margin-top:3px;
	}
	
/*****************************************************/
/* Contact Page                        		 */
/***************************************************/
	
.contact_left	{ 
	width: 310px;
	margin-right:20px;
	float: left;
	padding-top:30px;
	}
.contact_left a {
	color:#599FB4;
	font-weight:bold;
	}
.contact_left a:hover{
	color:#599FB4;
	text-decoration:underline;
	font-weight:bold;
	}
#contact-wrapper {
	width:400px;
	padding-top:30px;
	border-left:1px solid #BCBCBC;
	float:left;
	padding-left:30px;
	padding-bottom:30px;
	}
#contact-wrapper div {
	clear:both;
	margin:1em 0;
	}
#contact-wrapper label {
	color:#545454;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:10px;
	font-weight:bold;
	text-decoration:none;
	text-transform:uppercase;
	display:block;
	float:none;
	width:auto;
	}
form#contactform input {
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
	padding:5px;
	font-size:16px;
	color:#333;
	}
form#contactform textarea {
	font-family:"Helvetica Neue", Arial, Tahoma, Helvetica, sans-serif;
	font-size:100%;
	padding:0.6em 0.5em 0.7em;
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
	}
.contact_right{
	float:left;
	}

/*****************************************************/
/* Work Pages                        		 */
/***************************************************/

#content_main {
	float:left;
	width:540px;
	}
	
p.intro {
	font-family:"Helvetica Neue";
	color:#545454;
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
	}
p.intro a{
	color:#599FB4;
	}
.aspect {
	border-bottom:1px solid #BCBCBC;
	margin-bottom:20px;
	font-family:"Helvetica Neue", Georgia,sans-serif;
	font-size:12px;
	}
#gallery .thumb {
	border:14px solid #BCBCBC;
	display:block;
	margin:0 0 15px;
	}
ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin-left:-40px;
	}
p.web_link {
	font-weight:bold;
	}
#content_sub {
	float:right;
	width:280px;
	}
#content_sub p {
	margin-bottom:10px;
	}
#content_sub li {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:transparent none repeat scroll 0 0;
	border-bottom:1px solid #BCBCBC;
	padding:10px 0 0;
	}
#content_sub h2 {
	font-size:1em;
	font-weight:bold;
	margin:0;
	}
#content_sub a {
	color:#599FB4;
	}
p.tags {
	-x-system-font:none;
	font-family:"Helvetica Neue", Georgia,sans-serif;
	font-size:12px;
	font-size-adjust:none;
	font-stretch:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:1.55;
	margin:0 0 10px;
	}
#gallery_changer li {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:transparent url("../images/bg_gallery_changer.png") no-repeat scroll left center;
	display:inline;
	margin:0 0 0 7px;
	padding:0 0 0 8px;
	}
#gallery_changer li a{
	color:#545454
	}
#gallery_changer li a:hover{
	color:#545454
	}
#gallery_changer li a:active{
	color:#599FB4;
	}