/*----------------------------------------------------
Paula Kreuger Portfolio Styles
Updated: 2011.10.07
Author: Paula Kreuger
----------------------------------------------------*/
@charset "utf-8";

/* 
=GENERIC
=LINKS
=HEADER
=CONTENT
=SIDEBAR
=FORMS
=FOOTER
=QUERIES
*/

/* VARIABLES */
@the-border: 1px;
@base-color: #111;
@main-text:#777E77;
@red: #842210;
@pink: #FE658B;
@baby-blue: #3399CC;

/* MIXINS */

.border-radius (@radius) {
	border-radius: @radius;
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
}

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
	box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	-webkit-box-shadow: @arguments;
}
.img-replace(@width, @height){
	display:block;
	text-indent:-9000px;
	text-align:left;
	background-repeat: no-repeat;
	width: @width;
	height:@height;
}
.transition(@obj, @time, @type){ 
	-webkit-transition: @obj @time @type;
	-moz-transition:  @obj @time @type;
	-o-transition:  @obj @time @type;
	transition: @obj @time @type;
}
.bordered{
	border:1px solid #d1d1d1;
}
.grad-linear (@start:"", @end:"") {
	background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
	background: -moz-linear-gradient(-90deg,@start,@end);
}
/*	=GENERIC
----------------------------------------------------*/
body.paulaportfolio{
	font-family:Corbel,Helvetica,Arial,Geneva,sans-serif;
	color:@main-text;
	font-size:62.5%;
	line-height:190%;
	height:100%;
	width:100%;
	position:relative;
	text-align:center;
	background: #ccc url(bg2.png) fixed;
}

.skipit{display:none;}
.clear{clear:both;}
.important{color:@pink;font-weight:bold;}

#wrapper{
	font-size:1.3em;
	width:920px;
	margin:10px auto;
	text-align:left;
	background-color: #fff;
	background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 1);
	padding:20px;
	position:relative;
	padding-bottom:100px;
	p{
		margin-bottom:5px;
	}
	strong{
		font-weight:bold;
	}
	h2{
		font-family:"CantarellRegular", Helvetica,Arial,Geneva,sans-serif;
		font-weight:bold;
		text-align:right;
		border-bottom:1px solid #d1d1d1;
		margin-top:2em;
		margin-bottom:1em;
		font-size:1.5em;
		text-transform:lowercase;
		color:#999;
	}
}

/*	=LINKS
----------------------------------------------------*/
a:link,
a:visited {
	color:@pink; 
	.transition(all, 0.5s, ease-in-out);
}
a:hover{color:@baby-blue;}

/*	=HEADER
----------------------------------------------------*/
nav{
	font-family:Helvetica,Arial,Geneva,sans-serif;
	font-size:.9em;
	ul {
		display:block;
		margin:5px 0;
		clear:both;
		float:right;
		li{
			display:inline;
			float:left;
			font-size:1.4em;
			margin:0 10px;
			padding:5px;
			a{font-weight:bold;}
		}
	}
}
	.aboutme a, 
	.contactme a ,
	.myportfolio a{
		border-top:5px solid #fff;
		text-decoration:none;
	}
	
	#aboutme .aboutme a,
	#contactme .contactme a,
	#myportfolio .myportfolio a{
		color:@baby-blue; 
		border-top:5px solid @baby-blue;
		.transition(all, .5s, ease);
		&:hover{border-top-width:10px;}
	}
	
	header h1 a{
		.img-replace(300px, 60px);
		background: url(logo_kreuger.gif) no-repeat left top;
	}
	
/*	=CONTENT
----------------------------------------------------*/	
#underdevelop{
	dl{
		width:31%;
		float:left;
		padding:5px;
	}
	dt {
		font-weight:bold;
		color:@pink;
		.myrole{
			display:block;
			font-size:.9em;
			color:@base-color * 6;
			font-style:italic;
		}
	}
	dd img{
		padding:2px;
		.bordered;
	}
}
	#content{
		width:620px;
		float:left;
	}
	
	#myresume{
		li{margin-bottom:10px;}
		mark{
			font-weight:bold;
			color:@base-color * 3;
			font-size:1.2em;
		}
	}

	#portfolio{
		dt{
			font-weight:bold;
			font-size:1.3em;
			margin-top:60px;
			margin-bottom:5px;
			a.not-live{ text-decoration:line-through;}
			.myrole{font-size:.9em;color:@base-color * 6;}
		}
		dd {
			position:relative;
			a.website{display:block;}
			a.website:hover{
				border-color:@baby-blue;
				background-color:#f8f8f8;
				.seemore{visibility:visible;opacity: 1;}
			}
		}
		.seemore{
			background: url(view_complete.png) no-repeat top right;
			position:absolute;
			top:0;
			right:0;
			visibility: hidden;
			opacity: 0;
			width:150px;
			height:150px;

		}
		dd a.website,
		object{
			.bordered;
			margin:5px 0;
			padding:8px 3px;
			text-align:center;
			display:block;
			.transition(all, 1s, ease-in-out)
			}
		object{display:block;padding:8px;}
	}
	
	#letter h3{font-size:2.5em;color:@baby-blue;margin-bottom:5px;}

	span.not-live{ color:#F90; display:block;font-weight:normal; font-size:.9em;}
	
/*	=SIDEBAR
----------------------------------------------------*/

aside{
	margin-left:620px;
	padding-left:20px; 
	display:block;
}
#about{
	img{
		padding:2px;
		.bordered;
		float:left;
		margin-right:5px;
		margin-bottom:5px;
	}
}

#socialnetwork{
	background-color:#F2F2F2;
	float:left;
	left:0;
	margin:40px 0;
	padding:10px 20px 20px;
	position:relative;
	width:280px;
	h2{ 
		text-align:center;
		margin-top:0; 
		border:none; 
	}
	#flickr_badge_wrapper{
		height:90px;
		overflow:hidden;
		.transition(all, 1s, ease-in-out);
	}
	li{
		display:inline-block;
		width:90px;
		text-align:right;
	}
}

	#socialnetwork:hover #flickr_badge_wrapper{height:270px;}

#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:@base-color * 6;}
	#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
	#flickr_icon_td {padding:0 5px 0 0 !important;}
	.flickr_badge_image {text-align:center !important;
		img {border: 1px solid black !important;}
	}
	
	#flickr_www {font-family: Arial, Helvetica, Sans serif !important; color:#3993ff !important;
		strong {font-weight:normal;}
	}

	#flickr_badge_uber_wrapper a:hover,
	#flickr_badge_uber_wrapper a:link,
	#flickr_badge_uber_wrapper a:active,
	#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
	#flickr_badge_wrapper a img{padding:2px;.bordered;margin:2px 2px 2px 9px;}
	#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:@base-color * 6 !important;}

.internship {
	font-style: italic;
	span{ 
		font-size:1.3em; 
		font-weight:bold;
		font-style:normal;
		color:@baby-blue;
	}
}
.wallkit_form div.post_area .uiButton {
	display:block;
	float:right;
	margin:20px 0 0 10px;
}

/*	=FORMS
----------------------------------------------------*/
#contact{
	input.botao_enviar{
		width:auto;
		cursor:pointer;
		margin:10px 0 0;
		padding:16px;
		border:0;
		background-color:@baby-blue;
		color:#fff;			
		float:right;
		&:hover{
			width:auto;
			background-color:@pink;
			color:#fff;
		}
		&:focus{
			background-color:#d1d1d1;
			color:@base-color * 3;
		}
	}
	
	input,	
	select,
	textarea {padding:4px;.bordered;width:99%;}
	strong{color:@baby-blue;}
	fieldset {padding:10px 5px;}
}

.forminput{
	clear:both;
	display:block;
	margin:5px 0;
	}
#contact input,
#facebook textarea,
#contact textarea{
	background: url(darken_gradient.png) 0 -44px repeat-x; 
	.border-radius(3px);
	}
#contact input:focus,
#contact textarea:focus{
	background-color:#fff;
	border-color:#d1d1d1;
}

/*	=FOOTER
----------------------------------------------------*/
footer{
	background-color:@pink;
	color:#fff;
	padding:5px;
	clear:both;
	margin-top:100px;
	display:block; 
	position:absolute; 
	bottom:0; 
	height:60px; 
	left:0;
	right:0; 
	
	p{
		width:90%;
		float:left;
	}
	span a:link,
	a:link,
	span a:visited,
	a:visited{
		color:#fff;
		display:block;
	}
	span{
		display:block;
		float:right;
		padding:10px;
		font-size:1.2em;
	}
}
/*	=CURRICULUM
----------------------------------------------------*/

#curriculum {
	h3{
		color:@baby-blue;
		font-size:2em;
		font-weight:bold;
		margin-bottom:.5em;
	}
	ul,
	dl{margin-bottom:30px;}
	dt{font-size:1.3em;text-transform:lowercase;}
	.duration{
		background:none;
		padding-left:0;
		float:right;
		padding:4px;
		font-size:0.9em;
		text-align:right;
	}
	.ocupation{
		background:none;
		padding-left:0;
		border-top:1px solid #eee;
		border-bottom:1px solid #eee;
		margin:3px 0;
		padding:0;
		font-size:0.9em;
	}
	.business{
		background:none;
		padding-left:0;
		font-size:.8em;
		font-style:italic;
		color:#999;
	}
	.more_info{
		background: transparent url(information.png) no-repeat left center;
		padding-left:20px;
		margin:3px 0 6px;
		}
	.activities{
		background:none;
		padding-left:0;
	}
	.website a{
		font-size:0.9em;
		color:@pink;
		float:right;
	}
	li,
	dd{
		background: transparent url(bullet_star.png) no-repeat left center;
		padding-left:20px;
	}
	dd{
		.award{
			background: transparent url(award_star_gold_3.png) no-repeat left center;
			padding-left:20px;
		}
		.showcase {
			background:none;
			padding:15px 0 0;
			float:left;
			ul{
				margin:0 0 0 -5px;
				li{
					display:block; 
					float:left; 
					list-style:none; 
					background:none; 
					padding:0;
					img{
						background-color:#fff;
						padding:2px;
						.bordered;
						margin-left:5px;
						&:hover {border-color:@baby-blue;}
					}
				}
			}
		}
	}
	span.download{
		display:inline-block;
		margin-bottom:30px; 
		padding:5px 5px 5px 30px; 
		border:1px dotted #d1d1d1;
		background:#f8f8f8 url(disk.png) no-repeat 5px center;
	}
}
	
/*	=Contact Form
----------------------------------------------------*/ 
#contact-form{
	background-color:#FFFFFF;
	display:none;
	font-size:1.3em;
	margin:0 auto;
	padding:20px;
	text-align:left;
	width:920px;
	
	.close-panel{
		float:right;
		font-size:1.2em;
		padding:40px 0 0;
		cursor:pointer;
		clear:both;
		&:hover{ color:@baby-blue;}
	}
	.error{
		display:none;
		color: #F30;
		clear:both;
	}
}

/*	=CSS3
----------------------------------------------------*/ 

/*add a 5px border radius bottom left and right*/
.borderradius footer,
#contact-form{
	-moz-border-radius-bottomleft:5px; 
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-left-radius:5px; 
	-webkit-border-bottom-right-radius:5px;	
	border-radius-bottomleft:5px;
	border-radius-bottomright:5px;
}
/*add a 5px border radius*/
.borderradius #wrapper,	
.borderradius #contact input.botao_enviar,
#socialnetwork{
	.border-radius(5px);
}
/*drop shadow, light from above*/
.boxshadow  #wrapper, 
#contact-form,
#socialnetwork{
	.box-shadow(4px, 4px, 8px, rgba(0,0,0,0.2));
}
.boxshadow  #contact input.botao_enviar    {
	.box-shadow(3px, 3px, 6px, rgba(0,0,0,0.3));
}

/*drop shadow*/
.boxshadow footer{
	.box-shadow(0px, -1px, 10px, rgba(0,0,0,0.4));
} 
	

/*	=MEDIA QUERIES
----------------------------------------------------*/
@media screen and (min-width: 480px) and (max-width: 680px) {
	aside{clear:both;margin:0;float:none; padding:0;}
	#wrapper{width:90%;}
	#content{width:100%;float:none;}
	#portfolio dd img{width:100%;height:auto;}
	#socialnetwork{float: none;margin: 20px auto;}
	#underdevelop img{width:100%;height:auto;}
	footer p{width:80%;}
}
/*	=IPHONE
----------------------------------------------------*/
@media screen and (max-device-width: 480px){
	body.paulaportfolio{background:none;-webkit-text-size-adjust:none;}
	header h1,
	header h1 a{clear:both; float:none;}
	header h1 a{margin:10px;background-position: left center; width:90%;}
	
	nav {
	margin-top:100px;
		ul{
			float:none;
			clear:both;
			font-size:1.2em;
			li{font-size:1em; padding:5px;}
		}
	}
	#wrapper{width:90%;margin:0;}
	#content{width:100%; float:none;}
	aside{margin:0;padding:0; width:100%;}
	footer{width:100%;}
	#underdevelop,
	#portfolio object {display:none;} 
	#underdevelop dd img {width:30%;height:auto;}
	#portfolio dd a.website img{width:100%;height:auto;}

	#portfolio dt details,
	#portfolio dt a{display:block;}
	#about img{float:none;margin:0 0 10px; width:90%; height:auto;}
	#contact-form{width:90%;}
}