/*-----------------------------------------
 HYPER ISLAND APPLICATION WORK SAMPLE CSS
 Author: Paula Kreuger
 Date: 01.April.2009
 
 INDEX:
 1.COMMON
    1.1HEADINGS
 2.HEADER
 3.CONTENT
    3.1 PORTFOLIO
    3.2 CURRICULUM
    3.3 LETTER
 4.FOOTER
 
 ------------------------------------------*/

/*----------------------
	1.COMMON
------------------------*/
 	
	body{font-family:Corbel,Helvetica,Arial,Geneva,sans-serif;font-size:62.5%;text-align:center;color:#333;line-height:normal;}
        a{color:#333;}
        #wrapper{width:780px;margin:0 auto;text-align:left;font-size:1.2em;padding:10px;}
	
	/*Headings*/
	h1#logo{
	    background:transparent url(../img/logo_kreuger.png) no-repeat scroll right top;
	    display:block;
	    float:right;
	    height:60px;	    
	    text-indent:-9000px;
	    width:244px;
	    }
	h2{font-size:2em;color:#FE658B;margin-bottom:20px;}
	#portfolio h2 a{font-size:1em;color:#FE658B;}
	h2 span.subtitle,
	h2 span.subtitle a{color:#3399CC;}
	h2 span{color:#999;font-size:.7em;}
	#portfolio h2 span a{font-size:1em;border-bottom:1px solid;}
	h3{font-size:1.2em;margin-bottom:5px;color:#3399CC;font-weight:bold;}
	.clear{clear:both;}
/*----------------------
	2.HEADER
------------------------*/

        #header {clear:both;}
        #header ul {margin:0;padding:0;}
        #header a{color:#3399CC;font-size:1.3em;text-decoration:none;text-transform:lowercase;}
        #header ul li{list-style:none; padding:10px 20px 10px 0;float:left;}
        #content {clear:both;border-top:1px solid #E1E1E1;}
	#page_portfolio .menu_portfolio,
	#page_curriculum .menu_curriculum,
	#page_letter .menu_letter{
	    border-top: 5px solid;
	}
       
/*----------------------
	3.CONTENT
------------------------*/

	/*Portfolio*/
	#portfolio {list-style-type: none; margin: 0; padding: 0;position:relative;}
	#portfolio li {
            border:1px solid #D1D1D1;            
            height:auto;
            margin:3px 5px 3px 0;
            padding:5px;
            width:243px;
            float:left;
	    position:relative;
	    }                  
	    #portfolio li span.numbers{font-size:3em;}
	#portfolio a{font-size:1.2em;text-decoration:underline;}
	    #portfolio a.ext {
		color:#3399CC;
		font-size:1.0em;
		background:transparent url(../img/link_ext.gif) no-repeat scroll right center;
		padding-right:15px;
		text-decoration:underline;}
	#portfolio a:hover{text-decoration:none;}
	#portfolio li a{text-decoration:none;}
	#portfolio li:hover{border-color:#3399CC;}
	#portfolio li:hover a{color:#3399CC;}
	#portfolio .movie {position:relative;display:block;}
	    	
		
	#portfolio .readmore {font-size:0.8em;background-color:#f8f8f8;display:block; padding:2px 4px; margin-bottom:5px;border-bottom:1px solid #d1d1d1;}
	#portfolio p{margin-bottom:20px;}
	    #portfolio .pagination a{text-decoration:underline;color:#3399CC;}
	ul#list{margin:20px 0;}
	    ul#list li{
		border:none;
		width:auto;
		padding:0;
		background: transparent url(../img/bullet_star.png) no-repeat left top;padding-left:20px;
		float:none;
		}	    
		ul#list ul li{background:none;padding:0;float:none;list-style: circle inside;}
	#portfolio .presentation,
	#portfolio .screenshots{    
	    border:1px solid #3399CC;
	    display:block;
	    float:left;
	    font-weight:bold;
	    margin:15px;
	    padding:20px 0 20px 50px;
	    text-align:left;
	    width:35%;
	    color:#3399CC;	    
	    background:#BBDDEE url(../img/software/movie.png) no-repeat 10px 10px;
	    font-size:1em;
	    text-transform:uppercase;
	}
	#portfolio .screenshots{
	    float:right;
	    background-image: url(../img/software/screenshots.png);
	    }
	    #portfolio .presentation:hover,
	    #portfolio .screenshots:hover{background-color:#3399CC;color:#fff;}
	#portfolio .presentation span,
	#portfolio .screenshots span{display:block;text-transform:capitalize;}
	.wireframe {border:1px solid #d1d1d1;}
	/*Curriculum*/
	#curriculum,
	#letter,
	#portfolio{font-size:1.2em;}
	#curriculum h3{font-size:1.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 #d1d1d1;border-bottom:1px solid #d1d1d1;margin:3px 0;padding:2px;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(../img/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(../img/bullet_star.png) no-repeat left center;padding-left:20px;}
	#curriculum ul{margin-bottom:30px;}
	#curriculum dd.award{background: transparent url(../img/award_star_gold_3.png) no-repeat left center;padding-left:20px;}
	#curriculum dd.showcase {background:none;padding:15px 0 0;}
	#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;}
	/*Letter*/
	#letter h3{font-size:4em;}
	#letter b{font-size:2em;}
	#letter p{margin-top:10px;}
	span.tip
	{position:relative;display:inline;font-weight:bold;color:#FE658B;font-size:1.1em;}
	span.tipcontent	{display:none;}	
	span.tip:hover span.tipcontent,
	span.tipcontent:hover
	{z-index:20;display:block;position:absolute;top:20px;left:0;padding:3px;background-color:#fff;border:1px solid #3399CC;}
	span.tip.text:hover span.tipcontent{width:250px;color:#333;font-weight:normal;border-width:5px;padding:10px;}
	.pagination {font-size:.9em;float:right;text-decoration:underline;background-color:#FE658B;color:#fff;padding:5px;clear:both;margin-top:10px;}
	.pagination:hover {background-color:#FFCEDB;color:#FE658B;}
/*----------------------
	2.FOOTER
------------------------*/

    #footer {clear:both;border-top:10px solid #e1e1e1;margin:20px 0;}
    #contact,
    #address,
    #socialnetworks{
	width:243px;
	padding:5px;
	margin:3px 5px 3px 0;
	float:left;
	font-size:1.1em;
	}
	#socialnetworks li{float:left;padding:3px;width:75px;}
      

/*----------------------
	2.SLIDER
------------------------*/

    #slider ul, #slider li{ 
	margin:0;
	padding:0;
	list-style:none;
	border:none;
	}     
    #slider, #slider li{ 
	height:500px;
	width:780px;
	overflow:hidden;
	} 
    #slider{position:relative;border:1px solid #d1d1d1;}
    #nextBtn{float:right;}
    #prevBtn{float:left;}
    #prevBtn a, #nextBtn a{     
	text-decoration:underline;
	font-size:1em;
	color:#FE658B;
	font-weight:bold;
	background:transparent url(../img/bt_next.png) no-repeat 0 0;
	display:block;
	width:60px;
	height:60px;
	text-indent:-9000px;
	position:absolute;
	bottom:200px;
	right:-30px;
	} 
    #prevBtn a{background-position:0 -62px;
    left:-30px;}
	#nextBtn a:hover{background-position:-62px 0;}
	#prevBtn a:hover{background-position:-62px -62px;}
    #content:after, ul:after{
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
	}
    #content, ul{display:block;}
    #content, ul{min-height:1%;}
    * html #content, * html ul{height:1%;}