/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://creativecommons.org/licenses/MIT/	*/
	
	
/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {  
	display: block;
}

a img {border: 0;}

a {
    text-decoration: none;
	color:rgb(0,0,168); 
}

/*	Typography presets
	------------------	*/

.gigantic {
	font-size: 110px;
	line-height: 120px;
	letter-spacing: -2px;
}

.huge, h1 {
	font-size: 68px;
	line-height: 72px;
	letter-spacing: -1px;
	font-family:'Orbitron', serif;
}

.large, h2 {
	font-size: 42px;
	line-height: 48px;
	font-family:'Orbitron', serif;
}

.bigger, h3 {
	font-size: 30px;
	line-height: 36px;
	font-weight: 400;
	font-family: 'Roboto', arial, serif;
}

.big, h4 {
	font-size: 22px;
	line-height: 30px;
	font-family: 'Roboto', arial, serif;
}

body {
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
	font-family: 'Roboto', arial, serif;
}

.small, small {
	font-size: 13px;
	line-height: 20px;
	font-family: 'Roboto', arial, serif;
}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	width: 100%;
	padding: 0px 0px 84px;
	/*background: #F2F2F2;*/
	/*color: rgb(60,60,60);*/
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

nav {  5cols 
  width: 436px;
  margin-bottom: 24px;
}

nav li {
	/*float: left;
	list-style: none outside none;
	margin-right: 12px;
	border: 1px solid #C3C3C3;
	padding: 2px 10px;*/
}

/*nav .active {
	border: 1px solid #000;
	-moz-box-shadow:inset 0 0 3px #000000;
    -webkit-box-shadow:inset 0 0 3px #000000;
    box-shadow:inset 0 0 3px #000000;
}*/

header { /*6 cols*/	
	width: 528px;
	float: none;
	margin-left: 10px;	
	/*margin-top:54px;	*/
	margin-bottom:24px;
}

.main { /* 6 cols */
  /*float: left;  */
  width: 480px;  
  margin-right: 24px;  
  margin-bottom: 24px;  
  padding: 24px; 
}

.rightside {
  /*  3cols */
  float: right;  
  width: 228px;
  margin-bottom: 24px;
  margin-top: 24px;
}

.img {
  width:890px;  
  padding: 3px;
  background: #c3c3c3;
  border: 1px solid #fff;
}
.description {
  position:absolute;top: 230px;left:41px;
  float: left;  
  width: 480px;
  z-index:50;
}


#tweets li {    
  background:url("../img/twitter_newbird_blue_icon.png") no-repeat left 4px;
  list-style: none outside none;
  padding-left: 24px;
}

#blogs li {
  background:url("../img/blogger-logo-icon.png") no-repeat left 4px;
  list-style: none outside none;
  padding-left: 24px;
}

#books li
{
  background:url("../img/amazon-logo.png") no-repeat left 4px;
  list-style: none outside none;
  padding-left: 24px;
}

#projects li
{
  background:url("../img/google_code_project_hosting.png") no-repeat left 4px;
  list-style: none outside none;
  padding-left: 24px;
}

#music li
{
  background:url("../img/play.png") no-repeat left 4px;
  list-style: none outside none;
  padding-left: 24px;
}

#conferences li
{
  background:url("../img/chat.png") no-repeat left 4px;
  list-style: none outside none;
  padding-left: 26px;
}

#git li
{
  background:url("http://assets1.github.com/images/modules/dashboard/news/push.png") no-repeat left 4px;
  list-style: none outside none;
  padding-left: 24px;
}

#photonav li
{
	float: right;	
}

.rightside li {
	margin-bottom: 10px;
}

hr {
	clear: both;
	background: none repeat scroll 0 0 #33B5E5;    
	height: 2px;
}

footer {
   clear: both;
   float: none;
   margin-bottom: 24px;
   margin-top: 24px;
   width: 100%;
   
}
.leftFooter { /* 4cols */
   margin-left:24px;
   width: 320px;
   float: left;   
   margin-bottom: 24px;
}

.rightFooter { /* 4cols */
   width: 344px;
   float: right;
   margin-bottom: 24px;
}


/* The picture album stuff */

.protzero {
	-moz-transition-property: -moz-transform;
	-moz-transition-duration: 0.4s;
	-moz-transform:  rotate(0deg);
	
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 0.4s;
	-webkit-transform:  rotate(0deg);
	
	-o-transition-property: transform;
	-o-transition-duration: 0.4s;
	-o-transform:  rotate(0deg);
}


.pabs {
	position:absolute;top:230px;
	display:block;
}

.pinvisible {
	-moz-transition-property: opacity;
	-moz-transition-duration: 0.6s;
	
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 0.6s; /* needs to take  longer then the protzero animantion */

	-o-transition-property: opacity;
	-o-transition-duration: 0.6s; /* needs to take  longer then the protzero animantion */
	
	opacity: 0.0;
}


.p1 {	
	z-index:10;	
}
.p2 {
	z-index:9;	
}
.p3 {
	z-index:8;
}
.p4 {
	z-index:7;
}
.p5 {
	z-index:6;
}
.p6 {
	z-index:5;
}
.p7 {
	z-index:4;
}

.p1rot {
	-moz-transform:  rotate(-2.5deg);
	-webkit-transform:  rotate(-2.5deg);
	-o-transform:  rotate(-2.5deg);
}

.p2rot {
	-moz-transform:  rotate(2deg);
	-webkit-transform:  rotate(2deg);
	-o-transform:  rotate(2deg);
}

.p3rot {
	-moz-transform:  rotate(-1.5deg);
	-webkit-transform:  rotate(-1.5deg);
}

.p4rot {
	-moz-transform:  rotate(-2.5deg);
	-webkit-transform:  rotate(-2.5deg);
}
.p5rot {
	-moz-transform:  rotate(4.5deg);
	-webkit-transform:  rotate(4.5deg);
}
.p6rot {
	-moz-transform:  rotate(-1.0deg);
	-webkit-transform:  rotate(-1.0deg);
}
.p7rot {
	-moz-transform:  rotate(3.5deg);
	-webkit-transform:  rotate(3.5deg);
}



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	body {
		width: 100%;
		padding: 0px 0px 0px;
	}
	
	.main { /* 5 cols */
	  float: left;  
	  width: 412px;  
	  margin-right: 24px;  
	  margin-bottom: 24px;  
	  padding: 24px;  
	}
	.description {
	  position:absolute;top: 240px;left:21px;
	  float: left;  
	  width: 412px;
	}
	.img {
		width:705px; 
	}
	.pabs {
		position:absolute;top:210px;	
	}

}


/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
	
	body {
		width: 100%;
		padding: 0px 0px 0px;
	}

	header { /*3 cols*/		
		width: 252px;
	}
	
	.main { /* 5 cols */
	  float: left;  
	  width: 252px;	  
	  margin-bottom: 24px; 
	  padding: 0px;
	}
	
	nav { /* 3cols */  
	  width: 252px;
      float: left;  
	  margin: 0px;
	  margin-bottom: 24px;
    }

	nav li {
		float: left;
		border: none;
		margin: 0px;
		max-width: 70px;
		min-width: 70px !important;
		/*padding: 0px 5px;*/
		font-size: 12px;
	}
	a{
		max-width: 70px;
		min-width: 0px !important;	
	}

	nav .active {
		border: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
        box-shadow: none;
		text-decoration:underline;
	}
	
	.leftFooter { /* 3cols */
	   margin-left:0px;
	   width: 252px;
	   float: left;
	   margin-bottom:24px;
	}

	.rightFooter { /* 3cols */
	   width: 252px;
	   float: left;   
	}
	.rightside {
	  /*  3cols */
	  float: left;  
	  width: 252px;
	  margin-bottom: 14px;
	  margin-top: 14px;
	}
	footer object {
		width: 60px;
		height: 60px;
	}
	footer img {
		width: 60px;
		height: 60px;
	}
	.description {
	  position:absolute;top: 230px;left:20px;
	  float: left;  
	  width: 252px;
	}
	
	.img {
		width:246px; 
	}

	h2 {
		font-size: 30px;
		line-height: 32px;	
	}
	
	h3 {
		font-size: 20px;
		line-height: 20px;	
	}
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
		width: 100%;
		padding: 0px 0px 0px;
	}
	
	header { /*5 cols*/		
		width: 436px;
	}
	
	
	nav { /* 3cols */  
	  width: 436px;
      float: left;  
	  margin: 0px;
	  margin-bottom: 24px;	
    }
    nav li {
		float: left;
		border: none;
		margin: 0px;
		max-width: 85px;
		min-width: 85px !important;
		/*padding: 0px 5px;*/
		font-size: 14px;
	}
	a{
		max-width: 85px;
		min-width: 0px !important;	
	}
	
	/*nav .active {
		border: 1px solid #000;
		-moz-box-shadow:inset 0 0 3px #000000;
		-webkit-box-shadow:inset 0 0 3px #000000;
		box-shadow:inset 0 0 3px #000000;
		text-decoration: none;
	}*/

	/*nav li {
		float: left;
		border: none;
		margin: 0px;		
		font-size: 14px;
		min-width: 80px !important;
		
	}*/
	
	.main { /* 5 cols */
	  float: left;  
	  width: 436px;	  
	  margin-bottom: 24px; 
	  padding: 24px;
	}
	
	.rightside {
	  /*  5cols */
	  float: left;  
	  width: 436px;
	  margin-bottom: 8px;
	  padding-left: 24px;
	  margin-top: 0px;
	}
	.leftFooter { /* 5cols */
	   width: 436px;
	}

	.rightFooter { /* 5	cols */
	   width: 436px;
	}
	
	.img {
		width:430px; 
	}
	
	.pabs {
		position:absolute;top:220px;	
	}
}