@charset "utf-8";

/* Paula Kreuger Portfolio Styles
   Updated: Tue 2010.07.15
   Author:     Paula Kreuger
   ----------------------------------------------------*/
   
/* 
GENERIC
HEADER
CONTENT
SIDEBAR
LINKS
FORMS
FOOTER
CURRICULUM
*/    

/* COLORS
Main text #777E77
Links LOVE #FE658B #3399CC #FE658B  
*/  


/* =GENERIC
   ----------------------------------------------------*/
body.paulaportfolio{
	font-family:Corbel,Helvetica,Arial,Geneva,sans-serif;
	color:#777E77;
	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;}
.important {color:#FE658B;font-weight:bold;}
.clear{clear:both;}   

#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);
	/*background-image: -moz-linear-gradient(100% 100% 90deg,rgba(255, 255, 255, .8),  rgba(255, 255, 255, 1));
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 8)), to(rgba(255, 255, 255, 1)));*/
	padding:20px; 
	position:relative;
	padding-bottom:100px;	
	}

  #wrapper h2,
  #contact-form 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;
  }
  #contact-form h2{margin-top:0;}
  #wrapper p{margin-bottom:5px;}
  #wrapper strong{font-weight:bold;}


/* =HEADER
   ----------------------------------------------------*/							
nav{font-family:Helvetica,Arial,Geneva,sans-serif;font-size:.9em;}
	nav ul {display:block;margin:5px 0;clear:both;float:right;}
	nav li{
		display:inline;
		float:left;
		font-size:1.4em;
		margin:0 10px;
		padding:5px;
		}
	nav li 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:#3399CC; 
		border-top:5px solid #3399CC;		
		webkit-transition: all .5s ease;
		-moz-transition:  all .5s ease;
		-o-transition:  all .5s ease;
		transition: all  .5s ease;
		}
		#aboutme a:hover,
		#contactme a:hover, 
		#myportfolio a:hover{ border-top-width:10px;}
	header h1 a{text-indent:-9000px;display:block;width:300px;height:60px;background: url(logo_kreuger.gif) no-repeat left top;}
    
/* =CONTENT
   ----------------------------------------------------*/	
#underdevelop{}
	#underdevelop dl{width:31%;float:left;padding:5px;}
	#underdevelop dt {font-weight:bold;color:#FE658B;}
		 #underdevelop dt .myrole{display:block;font-size:.9em;color:#666;font-style:italic;}
	 #underdevelop dd img{padding:2px;border:1px solid #d1d1d1;}
#content{width:620px;float:left;}      

	
	#myresume{}
	#myresume li{margin-bottom:10px;}
	#myresume mark{font-weight:bold;color:#333;font-size:1.2em;}
	#portfolio{}
		#portfolio dl{}
		#portfolio dt{font-weight:bold;font-size:1.3em;margin-top:60px;margin-bottom:5px;}
		#portfolio dt a.not-live{ text-decoration:line-through;}
			#portfolio dt .myrole{font-size:.9em;color:#666;}
		#portfolio dd a.website{display:block;}
		#portfolio dd {position:relative;}
		#portfolio .seemore{
			background: url(view_complete.png) no-repeat top right;
			position:absolute;
			top:0;
			right:0;
			visibility: hidden;
			opacity: 0;
			width:150px;
			height:150px;
			-webkit-transition: all 1s ease-in-out;
			-moz-transition:  all 1s ease-in-out;
			-o-transition:  all 1s ease-in-out;
			transition: all  1s ease-in-out;
			}

		#portfolio dd a.website:hover .seemore{visibility:visible;opacity: 1; }

		#portfolio dd a.website,
		#portfolio object{
			border:1px solid #D1D1D1;
			margin:5px 0;
			padding:8px 3px;
			text-align:center;  			
			-webkit-transition: all 1s ease-in-out;
			-moz-transition:  all 1s ease-in-out;
			-o-transition:  all 1s ease-in-out;
			transition: all  1s ease-in-out;
			display:block;
			}
		#portfolio object{display:block;padding:8px; }
		 #portfolio dd a.website:hover{border-color:#3399CC;background-color:#f8f8f8;}
		 
		 #letter h3{font-size:2.5em;color:#3399CC;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{}
		#about img{padding:2px;border:1px solid #d1d1d1;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;
		}
		#wrapper #socialnetwork h2{ text-align:center;margin-top:0; border:none; }
		#socialnetwork #flickr_badge_wrapper{
			height:90px;
			overflow:hidden;
			-webkit-transition: all 1s ease-in-out;
			-moz-transition:  all 1s ease-in-out;
			-o-transition:  all 1s ease-in-out;
			transition: all  1s ease-in-out;
			}
		#socialnetwork:hover #flickr_badge_wrapper{height:270px;}
    #socialnetwork ul{}
    #socialnetwork li{display:inline-block;width:90px;text-align:right;}

#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
	#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;}
	.flickr_badge_image img {border: 1px solid black !important;}
	#flickr_www {font-family: Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
			#flickr_www 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;border:1px solid #d1d1d1;margin:2px 2px 2px 9px;}
	#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}

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

/* =LINKS
   ----------------------------------------------------*/
a:link {
	color:#FE658B; 
	}
a:visited{color:#FE658B;}
a:hover{color:#3399CC;}
a:link,
a:visited{
  	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition:  all 0.5s ease-in-out;
	-o-transition:  all 0.5s ease-in-out;
	transition: all  0.5s ease-in-out;
}
/* =FORMS
   ----------------------------------------------------*/
#contact form{}
	#contact input.botao_enviar{
		width:auto;
		cursor:pointer;
		border:1px solid #aaa;
		margin:10px 0 0;
		padding:16px;
		border:0px solid #fff;
		background-color:#3399CC;
		color:#fff;			
		float:right;
		}
	#contact input.botao_enviar:hover{width:auto;background-color:#FE658B;color:#fff;}
	#contact input.botao_enviar:focus{background-color:#d1d1d1 ; color:#333;}
	#contact input,	
	#contact  select,
	#contact textarea {padding:4px;border:1px solid #d1d1d1;width:99%;}
	#contact strong{color:#3399CC;}
	.forminput{
		clear:both;
		display:block;
		margin:5px 0;
		}
	#contact fieldset {padding:10px 5px;}
    #contact input,
	#facebook textarea,
	#contact textarea{
		background: url(darken_gradient.png) 0 -44px repeat-x; 
		-moz-border-radius:3px; 
		-webkit-border-radius:3px; 
		border-radius:3px;
		}
	#contact input:focus, #contact textarea:focus{background-color:#fff;border-color:#d1d1d1;}

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

#curriculum h3{
	color:#3399CC;
	font-size:2em;
	font-weight:bold;
	margin-bottom:.5em;
	}
#curriculum dl{margin-bottom:30px;}
	#curriculum dt{font-size:1.3em;text-transform:lowercase;}
	#curriculum .duration{background:none;padding-left:0;float:right;padding:4px;font-size:0.9em;text-align:right;}
	#curriculum .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;}
	#curriculum .business{background:none;padding-left:0;font-size:.8em;font-style:italic;color:#999;}
	#curriculum .more_info{background: transparent url(information.png) no-repeat left center;padding-left:20px;margin:3px 0 6px;}
	#curriculum .activities{background:none;padding-left:0;}
	#curriculum .website a{font-size:0.9em;color:#FE658B;float:right;}
#curriculum li,
#curriculum dd{background: transparent url(bullet_star.png) no-repeat left center;padding-left:20px;}
#curriculum ul{margin-bottom:30px;}
#curriculum dd.award{background: transparent url(award_star_gold_3.png) no-repeat left center;padding-left:20px;}	
#curriculum dd.showcase {background:none;padding:15px 0 0;float:left;}
#curriculum dd.showcase ul{margin:0 0 0 -5px;}
	#curriculum dd.showcase ul li{display:block; float:left; list-style:none; background:none; padding:0;}
		#curriculum dd.showcase ul li img:hover {border-color:#3399CC;}
		#curriculum dd.showcase ul li img{background-color:#fff;padding:2px;border:1px solid #d1d1d1;margin-left:5px;}
#curriculum 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;
		}
		.close-panel:hover{ color:#3399CC;}
		
		.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{
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius:5px;
	  }
  /*drop shadow, light from above*/
 	.boxshadow  #wrapper, 
 	 #contact-form,
    #socialnetwork{
	-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
	-webkit-box-shadow:  4px 4px 8px rgba(0,0,0,0.2);
	box-shadow:  4px 4px 8px rgba(0,0,0,0.2);
  }
   .boxshadow  #contact input.botao_enviar    {
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
	-webkit-box-shadow:  3px 3px 6px rgba(0,0,0,0.3);
	box-shadow:  3px 3px 6px rgba(0,0,0,0.3);		
   }
   
  /*drop shadow*/
	.boxshadow footer{
		-moz-box-shadow: 0px -1px 10px rgba(0,0,0,.4);
		-webkit-box-shadow:  0px -1px 10px  rgba(0,0,0,.4);
		box-shadow:  0px -1px 10px  rgba(0,0,0,.4);		
	}  
	

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