/*
 Steren websites
*/

#steren-websites {
	padding: 15px 50px;
	float:right;
	font-size: 150%;
}

#steren-websites a {
	text-decoration: none;
}

#steren-websites .current a {
	background-color: #EEEEEE;
	cursor: default;
}

#steren-websites ul {
	display: inline;
	margin-left: 0;
	padding-left: 0;
}

#steren-websites ul li {
	display: inline;
	padding-left: 0.5em;
}

/*
 Portfolio
*/

.hidden {
	display: none;
}

body {
    background-color: #dddddd;
    background-image: -moz-radial-gradient(center 45deg,circle cover, #ffffff, #cccccc);
    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#ffffff), to(#cccccc));
    background-image: radial-gradient(center 45deg,circle cover, #ffffff, #cccccc);   
}

#wrapper {
	margin:0 auto;
	width:940px;
	padding-top: 2em;
}

a {
    text-decoration:none;   
}
a:hover {
    /* transitions */
}


h1 {
    color: #1E1E1E;
	margin-bottom: 1.5em;
    font-size: 2em;
    text-shadow: 0 1px 1px #FFFFFF;
}

hr {
	clear : both;
}

#brief {
	margin-bottom: 10px;
}

#worksContainer {
	clear: both;
}
#worksContainer h2 {
	clear: both;
}

/*
 * Filters
 */
.pannelSection {
	padding-bottom: 2em;
}

.pannelSection h2 {
	float:left;
	padding-top: 0.5em;
	margin: 0 1em 0 0;
}

.pannelSection ul {
	float: left;
	margin: 0 1em 0 0;
}
.pannelSection .button {
	list-style: none outside none;
	float: left;   
	padding: 0.5em;
	margin: 0 0.1em;
	cursor: pointer;
    position: relative;
}
.pannelSection .button.active {
	background-color: #EEEEEE;
}



/*
 * Works
 */

.work {
    background: #FFFFFF;
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px;
    
    -moz-box-shadow: 1px 1.4px 2px rgba(0,0,0,0.19); 
    -webkit-box-shadow: 1px 1.4px 2px rgba(0,0,0,0.19); 
    box-shadow: 1px 1.4px 2px rgba(0,0,0,0.19);
    
    /* transitions */
    -moz-transition: background-color 0.3s ease-out;  
    -webkit-transition: background-color 0.3s ease-out;  
    transition: background-color 0.3s ease-out;
    
	margin : 10px;
	padding : 6px;
	width : 280px;
	height: 190px;
	float : left;	
}

.work:hover {
    background-color: #EEEEEE;
    
    /* transitions */
    -moz-transition: background-color 0.3s ease-out;  
    -webkit-transition: background-color 0.3s ease-out;  
    transition: background-color 0.3s ease-out;  
}

.work .title {
	font-size : 1.2em;
	border-bottom:1px solid #DDDDDD;
    -moz-transition: color 0.3s ease-out;  
    -webkit-transition: color 0.3s ease-out;  
    transition: color 0.3s ease-out;
}
.work .link {
	font-size : .8em;
}
.work p {
	margin: 0;
}
.work .video {
	display:none;
}
.work .description {
	font-size : 0.9em;
}
.work .category {
	display:none;
}
.work .date {
	display:none;
}

.displayMore {
	text-align: right;
	clear: both;
}
a.displayMore {
	text-decoration: none;
	font-size: 0.9em;
			
}
.etc {
	padding-top: 100px;
	font-size: 3em;
}


.social-links {
    margin-left: 0;
}
.social-links li {
    margin: 2px; 
	list-style: none outside none;
	float: left;   
}


/*
 * Social Media icons by http://icondock.com/free/vector-social-media-icons
 */
.social-icon {
    text-indent: -9999px;
    display: block;
    width: 32px;
    height: 32px;
    position: relative;
    background: url("../../images/social/twitter-2.png") no-repeat left top transparent;    
}

.social-icon.flickr { background-image: url("../../images/social/flickr.png"); }
.social-icon.github { background-image: url("../../images/social/github.png"); }
.social-icon.identica { background-image: url("../../images/social/identi.png"); }
.social-icon.lastfm { background-image: url("../../images/social/lastfm.png"); }
.social-icon.linkedin { background-image: url("../../images/social/linkedin.png"); }
.social-icon.slideshare { background-image: url("../../images/social/slideshare.png"); }
.social-icon.twitter { background-image: url("../../images/social/twitter-2.png"); }
.social-icon.vimeo { background-image: url("../../images/social/vimeo.png"); }
.social-icon.wikipedia { background-image: url("../../images/social/wikipedia.png"); }
.social-icon.youtube { background-image: url("../../images/social/youtube.png"); }