@charset "UTF-8";
/* 
	Project: Recidiv
	Date: February 2011
	Descrition: Layout and apperence.
	Language: CSS3
	Version: 2.1
	Author: Jacob Svensson
	Updated: 25 july
*/
@import url("reset.css");
a, img		{outline:none;}

html		{font-size:125%;}

body		{font-size:50%;
			background:#f2f2f2 url(../images/noise.png);
			font-family:"Century Gothic", "helvetica neue", helvetica, arial, CandelaBold, sans-serif;}
			
body, img, #skill #social	{	-moz-transition: all .3s ease-in-out;
				-webkit-transition: all .3s ease-in-out; 
				-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;}

#index		{width:100%;
			max-width:1250px; /*CHANGE WHEN ABLE TO VIEW ON LARGER SCREENS*/
			height:100%;
			margin:0 auto;}
			
header		{width:90%;
			height:30px;
			margin:auto;
			border-bottom:1px dotted #999;}
			
header h1	{font-family: Miso,"helvetica neue", helvetica, arial, sans-serif;
			text-shadow: 0 1px 0 #FFF;
			text-transform: uppercase;
			text-decoration:none;
			font-size:1.8em;
			letter-spacing:1px;
			color:#000;
			margin-top:10px;
			margin-left:1.052632%; /* 10px / 950px */
			display:inline;
			float:left;}

nav			{font-family: Miso,"helvetica neue", helvetica, arial, sans-serif;
			text-shadow: 0 1px 0 #FFF;
			text-transform: uppercase;
			text-decoration:none;
			font-size:1.8em;
			letter-spacing:1px;
			color:#000;
			margin-top:10px;			
			position:fixed;
			right:6.052632%; /* 10px / 950px + (100% - 90% / 2) */
			z-index:100;
			display:block;
			background:rgba(242, 242, 242, 0.5) url(../images/noise.png);}			

nav li			{display:inline;}
			
section		{padding-top:20px;
			width:95%;
			margin:auto;}
			
/*Default link appearance*/
a:link 			{text-decoration:none; color:#000;
					-moz-transition: color 0.25s ease-in-out;
					-webkit-transition: color 0.25s ease-in-out; 
					-o-transition: color 0.25s ease-in-out;
				transition: color 0.25s ease-in-out;}
a:visited 		{text-decoration:none; 
				color:#000;}
a:hover, a:active, a:focus	
				{text-decoration:none; 
				color:#7b154c;
					-webkit-text-shadow:0 0 20px rgba(123, 21, 76, 0.25);
					-moz-text-shadow:0 0 20px rgba(123, 21, 76, 0.25);
					-o-text-shadow:0 0 20px rgba(123, 21, 76, 0.25);
				text-shadow:0 0 20px rgba(123, 21, 76, 0.25);}
 		

ul			{list-style-type:none;
			padding:0;
			margin:0;}
#portfolio h1	{display:none;}
			
h1			{font-family: MisoLight,"helvetica neue", helvetica, arial, sans-serif;
			font-weight:lighter;
			text-transform: uppercase;
			text-decoration:none;
			font-size:5.8em;
			text-align:center;
			text-shadow: 0 1px 0 #FFF;}	
			
h2			{font-family: MisoLight,"helvetica neue", helvetica, arial, sans-serif;
			font-weight:lighter;
			text-decoration:none;
			font-size:3.6em;
			width:100%;		
			display:inline-block;
			letter-spacing:-2px;
			margin-top:5px;
			text-shadow: 0 1px 0 #FFF;}
			
h3			{font-family: MisoLight,"helvetica neue", helvetica, arial, sans-serif;
			letter-spacing:-2px;
			font-size:3.6em;
			text-shadow: 0 1px 0 #FFF;}
			
h4			{font-family: MisoLight,"helvetica neue", helvetica, arial, sans-serif;
			font-weight:lighter;
			text-decoration:none;
			font-size:1.8em;
			display:inline;
			cursor:pointer;}

h5			{font-family: MisoLight,"helvetica neue", helvetica, arial, sans-serif;
			font-weight:lighter;
			text-decoration:none;
			font-size:2.1em;
			display:inline-block;
			margin-top:12px;
			width:100%;
			border-top:1px dotted #999;
			padding-top:7px;
			text-shadow: 0 1px 0 #FFF;}
			
h6			{font-family: MisoLight,"helvetica neue", helvetica, arial, sans-serif;
			font-weight:lighter;
			text-decoration:none;
			font-size:2.1em;
			display:inline-block;
			width:100%;
			text-shadow: 0 1px 0 #FFF;}
			
p			{font-size:1.4em;
			text-shadow: 0 1px 0 #FFF;
			line-height:1.2em;}
			
p a			{border-bottom:1px dotted #999;
			padding-bottom:-1px;}
			
p.info		{width:100%;
			margin-top:5px;
			display:inline-block;}
p em		{font-size:0.8em; /*relativt värde från 1.3em*/
			font-style:none;}

/*thumbnails apperance*/
#thumb		{float:left;
			margin-top:5px;
			width:100%;}

#thumb li	{display:inline;}

#thumb img	{margin:0 1.894737% 25px 1.894737%; /* 18px / 950px */
			border:7px solid #fff;
			display:inline-block;
			width:40%;
			cursor:pointer;
				-webkit-transition-property: -webkit-transform, -webkit-box-shadow;
				-webkit-transition-duration: 0.18s, 0.5s;
				-webkit-transition-timing-function: ease-in-out, ease-in-out;
				-moz-transition-property: -moz-transform, -moz-box-shadow;
				-moz-transition-duration: 0.18s, 0.5s;
				-moz-transition-timing-function: ease-in-out, ease-in-out;
				-o-transition-property: -o-transform, box-shadow;
				-o-transition-duration: 0.18s, 0.5s;
				-o-transition-timing-function: ease-in-out, ease-in-out;
			transition-property: transform, box-shadow;
			transition-duration: 0.18s, 0.5s;
			transition-timing-function: ease-in-out, ease-in-out;}
		
#thumb img:hover, #thumb img:active
					{	-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
						-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
					box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
						-webkit-transform: scale(1.1);
        				-moz-transform: scale(1.1);
        				-o-transform: scale(1.1);
        			transform: scale(1.1);}
				
/*about layout*/
#about 			{clear:both;
				min-height:900px;}
				
#about h3		{margin:0;}

#about h3 .last-child	{font-size:0.7em;}

#about .profile			{display:none;}
				
.col-left		{width:100%;
				text-align:justify;
				display:block;}
				
.col-right		{width:100%;
				text-align:justify;
				display:block;
				margin:1.3em 0;}
			
/*skillmapp apperance*/	
#skill			{width:100%;
				height:100%;
				background:url(../images/skills320.png) no-repeat 50% 0;
				max-width:auto;
				min-height:200px;
				clear:both;
				margin:auto;
				display:block;}

/*contact*/
#contact		{clear:both;
				display:block;}

#contact article {margin:auto;}
				
form			{width:100%;
				margin-top:25px;
				border:none;
				display:inline-block;}
				
.head			{font-size:1.5em;
				text-shadow: 0 1px 0 #FFF;			
				display:block;
				margin-bottom:3px;}
			
form input[type="text"], form input[type="email"]
				{width:97%;
				height:25px;
				display:inline-block;
				font-size:1.3em;
				font-family:"Century Gothic", "helvetica neue", helvetica, arial, CandelaBold, sans-serif;
				background-color:rgba(255, 255, 255, 0.7);
				border:1px solid rgba(0, 0, 0, 0.15);
					-moz-border-radius:5px;	
					-webkit-border-radius:5px;
					-o-border-radius:5px;
				border-radius:5px;
					-moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
					-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
				box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
				margin:0 10px 10px 0;
				padding:1px 5px 0 5px;
					-moz-transition: all 0.4s ease-in-out; 
					-webkit-transition: all 0.4s ease-in-out; 
					-o-transition: all 0.4s ease-in-out;
				transition: all 0.4s ease-in-out;}
			
form textarea	{height:150px;
				width:97%;			
				font-size:1.3em;
				font-family:"Century Gothic", "helvetica neue", helvetica, arial, CandelaBold, sans-serif;
				background-color:rgba(255, 255, 255, 0.7);
				border:1px solid rgba(0, 0, 0, 0.15);
					-moz-border-radius:10px;	
					-webkit-border-radius:10px;
					-o-border-radius:10px;
				border-radius:10px;
					-moz-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
					-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
				box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
				margin-bottom:10px;
				padding:7px 5px;
				overflow:auto;
					-moz-transition: all 0.4s ease-in-out; 
					-webkit-transition: all 0.4s ease-in-out; 
					-o-transition: all 0.4s ease-in-out;
				transition: all 0.4s ease-in-out;
				resize:none;
				overflow:auto;}

form input[type="submit"]
				{width:100%;
				margin:auto;
				background-color:#e2e2e2;
				display:block;
				padding: 4px 15px 5px;
				color: #000;
				text-shadow: 0 1px 0 #FFF;
				font-size:1.5em;
				border:none;
				position:relative;
				cursor:pointer;
				border:none;
				background-image: 	-o-linear-gradient(#fff, #bbb);
				background-image: 	-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
				background-image:	-moz-linear-gradient(0 100% 90deg, #bbb, #fff);
					-moz-border-radius:23px;
					-webkit-border-radius:23px;
					-o-border-radius:23px;
				border-radius:23px;
					-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);
					-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);
				box-shadow:0 1px 2px rgba(0,0,0,0.5);
					-moz-transition: all 0.25s ease-in-out; 
					-webkit-transition: all 0.25s ease-in-out; 
					-o-transition: all 0.25s ease-in-out;
				transition: all 0.25s ease-in-out;}
				
@-webkit-keyframes pulse {
				0%	{-webkit-box-shadow:0 0 12px rgba(123, 21, 76, 0.2);}
				50% {-webkit-box-shadow:0 0 12px rgba(123, 21, 76, 0.8);}
				100% {-webkit-box-shadow:0 0 12px rgba(123, 21, 76, 0.2);}
				}
		
			
form input[type="submit"]:hover, form input[type="submit"]:focus, form input[type="submit"]:active
				{color:#7b154c;
				text-shadow:0 0 20px rgba(123, 21, 76, 0.3);
				-webkit-animation: pulse 2.5s infinite ease-in-out;
					-moz-box-shadow:0 0 12px rgba(123, 21, 76, 0.7);
					-webkit-box-shadow:0 0 12px rgba(123, 21, 76, 0.7);
				box-shadow:0 0 12px rgba(123, 21, 76, 0.7);}
				
.cssanimations form input[type="submit"]:hover, form input[type="submit"]:focus, form input[type="submit"]:active
				{-webkit-animation: pulse 2.5s infinite ease-in-out;}
				
form input[type="text"]:hover, form input[type="email"]:hover, form textarea:hover	
				{background-color:rgba(255, 255, 255, 0.9);}

form input[type="text"]:focus, form input[type="email"]:focus, form textarea:focus
				{	-moz-outline-style:solid;
				outline-color:#7b154c;}		

.validation		{color:#c01111; 
				display:block;
				margin:0 0 5px 0;}
				
fieldset em			{display:inline-block;
					margin:0 0 10px 0;}

/* Footer */
footer			{clear:both;
				margin:auto;
				margin-top:50px;
				height:70px;
				width:100%; /*100% av section:width */
				border-top:1px dotted #999;
				padding-top:7px;}
				
#social			{right:6.052632%; /* 10px / 950px + (100% - 90% / 2) */
				z-index:999;
				outline:none;
				display:inline;}
				
.twitter		{background:url(../images/icons/twitter.png) no-repeat;
				float:right;
				width:61px;
				height:14px;
				line-height:60px;
				margin: 1px 6px 0 0;
				overflow:hidden !important;
				text-indent:-9000px !important;
				text-decoration:none !important;
				display:inline-block;
				opacity:1;
					-moz-transition: all 0.4s ease-in-out;
					-webkit-transition: all 0.4s ease-in-out; 
					-o-transition: all 0.4s ease-in-out;
				transition: all 0.4s ease-in-out}
				
.twitter:hover, .twitter:active, twitter:focus
				{opacity:0.6;}
				
footer p		{font-size: 1.1em;
				line-height: 16px;
				text-shadow: 0 1px 0 #FFF;
				text-align:center;
				margin:auto;
				margin-bottom:7px;
				display:block;
				float:none;
				text-indent:61px;} /* .twitter-width to center text */
				
#html5			{background:url(../images/html5.png) no-repeat;
				height:32px;
				width:32px;
				margin:auto;
				padding-bottom:25px;}
				
/* Back and Top nav*/
.arrow			{display:inline-block;
				margin-top:10px;
				float:left;
					-moz-transition: 0.4s ease-in-out;
					-webkit-transition: 0.4s ease-in-out; 
					-o-transition: 0.4s ease-in-out;
				transition: 0.4s ease-in-out}
				
.back			{display:block;
				clear:both;
				margin-top:15px;
					-moz-transition: 0.4s ease-in-out;
					-webkit-transition: 0.4s ease-in-out; 
					-o-transition: 0.4s ease-in-out;
				transition: 0.4s ease-in-out}

.arrow:hover, .back:hover	
				{opacity:0.5;}
				
/*catalogue*/
						
.img-top		{border:15px solid #fff;
				margin:0 0 25px 0;
				float:left;
				padding:0;
				clear:both;
				width:92.8421052631579%;}
.img-right		{border:15px solid #fff;
				margin:0 0 25px 0;
				padding:0;
				width:92.8421052631579%;}
.img-left		{border:15px solid #fff;
				margin:0 0 25px 0;
				width:92.8421052631579%;}

video, .img-wide		{border:15px solid #fff;
				margin:0 0 25px 0;
				padding:0;
				width:92.8421052631579%;}
				
#description	{display:block;
				margin-bottom:25px;
				text-align:justify;}
				
.view-all		{text-align:center;
				width:100%;
				margin:auto;
				margin-bottom:45px;
				clear:both;}
	
.view-all a		{font-size:2.1em;
				border-bottom:1px dotted #999;
				font-family: Miso,"helvetica neue", helvetica, arial, sans-serif;}
				
/*Screen resolution fixes*/
@media screen and (max-width:320px) {
	header		{height:25px;}
	
	header h1	{display:none;}
				
	h1			{padding-top:10px;}
	
	nav			{text-align:center;
				position:relative;
				margin:10px 0 0 0 auto;
				right:0;}
	#thumb		{margin:auto;
				text-align:center;}
				
	#thumb img	{width:40%;
				border:6px solid #fff;}
	
	#about		{min-height:1080px;
				margin-top:50px;}
	#about h3	{margin-top:5px;}
	
	#about h3 .last-child	{font-size:0.6em;}
	
	#social		{display:none;}
	
	footer p	{text-indent:0;}
	
	.img-top	{border:10px solid #fff;
				clear:both;
				width:90.8421052631579%;}
				
	.img-right		{border:10px solid #fff;
					width:90.8421052631579%;}
	.img-left		{border:10px solid #fff;
					width:90.8421052631579%;}
	
	video, .img-wide		{border:10px solid #fff;
					width:90.8421052631579%;}
			
} /*/mediaquery*/
@media screen and (min-width:600px) {
	section		{width:90%;}
	
	h1			{font-size:7.8em;}
		
	#thumb img	{margin:0 3.15211% 25px 3.15211%; /* 30px / 950px */
				border:10px solid #fff;}
				
	
	#about		{min-height:1000px;}
			
	#skill			{background:url(../images/skills480.png) no-repeat 50% 0;}
	
	#contact article {width:60.105263%;}
				
	form			{width:100%;}
			
	form textarea	{height:300px;}
		
	form input[type="submit"]
				{margin-right:2%;
				float:right;
				width:auto;
				display:inline-block;}
					
	.img-right		{margin:0 0 25px 1.65%;	/*20 / 950 */
					border:12px #fff solid;
					width:44.2105263157895%;
					float:right;}
					
	.img-left		{margin:0 0 25px 0;	/*20 / 950 */
					border:12px #fff solid;
					width:44.2105263157895%;
					float:left;}
					
	video, .img-wide	{border:15px solid #fff;
				margin:auto;
				margin:0 0 25px 0;
				padding:0;
				width:94.8421052631579%;}
				

} /*/mediaquery*/
@media screen and (min-width:860px) {
	section			{width:90%;}
	
	h1			{font-size:7.8em;}
	
	#thumb		{float:left;
				margin-top:5px;
				width:100%;}
			
	#thumb img	{margin:0 3.15211% 25px 3.15211%; /* 30px / 950px */
				border:10px solid #fff;
				width:24.210526%;}
				
	#about		{min-height:1070px;}
	
	#about h3		{margin: 0 0 0 2.5%; /* 30px / 950px */}
	
	.col-left		{width:44.636842%; /*425px / 950px */
					margin: 2px 0 10px 2.5%; /* 30px / 950px */
					padding-right:4.2%; /* 20px / 425px*/
					text-align:justify;
					display:inline-block;
					float:left;
					border-right:1px dotted #999;}
				
	.col-right		{width:44.636842%; /*425px / 950px */
					margin: 2px 0 0 2.5%; /* 30px / 950px */
					text-align:justify;
					display:inline-block;
					float:right;}
				
	#skill			{background:url(../images/skills680.png) no-repeat 50% 0;}
	
	#contact article {width:42.105263%; /*400px / 950px */}
				
	form			{width:100%;}				
			
	form input[type="text"], form input[type="email"]
				{width:50%;}
			
	form textarea	{width:90%;
				height:300px;}

	form input[type="submit"]
				{margin-right:10%;
				float:right;
				width:auto;
				display:inline-block;}
	
	/*catalogue*/
	#description 	{width:42.105263%;
					display:inline-block;}
					
	.img-top		{width:52.6315789473682%;
					margin:0 1.65% 25px 0;}
					
	.img-right		{margin:0 0 25px 1.65%;	/*20 / 950 */
					width:44.2105263157895%;
					float:right;}
					
	.img-left		{margin:0 0 25px 0;	/*20 / 950 */
					width:44.2105263157895%;
					float:left;}
					
	video, .img-wide		{border:15px solid #fff;
				margin:0 0 25px 0;
				padding:0;
				width:96.8421052631579%;}
} /*/mediaquery*/
@media screen and (min-width:1200px) {
	section			{width:90%;}
				
	h1			{font-size:8.8em;}
	
	#thumb		{float:left;
				margin-top:5px;
				width:100%;}
				
	#thumb img	{margin:0 3.15211% 25px 3.15211%; /* 30px / 950px */
				border:12px solid #fff;
				width:24.210526%;
				max-width:450px;}
	#about		{min-height:1100px;}
	#about h3		{margin: 0; /* 30px / 950px */}
	
	.col-left		{width:31.052632%; /*295px / 950px */
					margin: 2px 0 10px 0; /* 30px / 950px */
					padding-right:0; /* 20px / 425px*/
					text-align:justify;
					display:inline-block;
					float:left;
					border:none;
					max-width:400px;}
				
	.col-right		{width:31.052632%; /*295px / 950px */
					margin: 2px 0 0 1.578947%; /* 30px / 950px */
					text-align:justify;
					display:inline-block;
					float:right;
					max-width:400px;}
	
	#about .profile	{width:31.052632%; /*295px / 950px */
					margin: 0 1.578947% 0 0;
					float:left;
					border:15px solid #fff;
					display:inline-block;
					max-width:400px;}
	
	#blockqoute		{background:url(../images/blockqoute.png) no-repeat 50% 0;
					width:31.052632%; /*295px / 950px */
					max-width:292px;
					height:100px;
					float:right;
					text-align:center;
					margin:22px 30px 0 0;}
					
	#knowledge 		{background:url(../images/knowledge.png) no-repeat 50% 0;
					width:33.75%; /*325px / 950px .profile + 30px*/
					clear:both;
					min-height:77px;
					margin-bottom:25px;
					max-width:400px;}
			
	#skill			{background:url(../images/skills.png) no-repeat 50% 0;
					display:block;
					z-index:0;
					margin-top:-70px;
					max-width:1090px;}

	#contact article {width:42.105263%; /*400px / 950px */}
				
	form			{width:100%;}				
			
	form input[type="text"], form input[type="email"]
				{width:50%;}
				
	form textarea	{width:90%;
					height:300px;}

	form input[type="submit"]
				{margin-right:10%;
				float:right;
				width:auto;
				display:inline-block;}
	
	/*catalogue*/
	#description 	{width:42.105263%;
					display:inline-block;
					max-width:650px;}
					
	.img-top		{width:52.6315789473682%;
					margin:0 2.105263% 25px 0; /*20 / 950 */
					max-width:750px;}
					
	.img-right		{margin:0 0 25px 2.105263%;	/*20 / 950 */
					width:44.2105263157895%;
					float:right;
					max-width:750px;}
	.img-left		{margin:0 0 25px 0;	/*20 / 950 */
					width:44.2105263157895%;
					float:left;
					max-width:750px;}
					
	video, .img-wide		{border:15px solid #fff;
				margin:0 0 25px 0;
				padding:0;
				width:96.8421052631579%;
				max-width:1200px;}

} /*/mediaquery*/

/*REMOVE AFTER BETA*/
.beta	{font-size:0.8em;
		text-transform:none;}