/* ______________________________

	Dutchwrestling layout styles
   ______________________________ */


/* ------------- Overall styles */

html{
	background: #ffffff;
}

body{
	font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
	font-size: 100%;
	background: transparent;
	text-align: center;
	line-height: 1.0em;
}

.hide, .skiplinks a{
	position: absolute;
	top: -99999px;
}

a:focus{
	outline: 1px dotted #666666;
}

a:active{
	outline: none;
}

.skiplinks a{
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skiplinks a:focus{
	top: 6px;
	width: auto;
	height: auto;
	color: #000000;
	padding: 3px;
	margin: auto;
}

/* ------------- Grid */

#hello{
	width: 70%;
	width: 691px;
	margin: 0px auto;
	text-align: left;
	padding: 10px 10px 4em 10px;
	padding-right: 169px;
}

#hello h1, #hello p{
	width: 100%;
}

#tweets{
	background: #e1f8a9 url(../img/pat_green.png) left top repeat-x;
	margin-bottom: 10px;
}

#pinterest{
	background: #f29479 url(../img/pat_red.png) left top repeat-x;
	margin-bottom: 10px;
}

#lastfm{
	background: #9dd1ec url(../img/pat_blue.png) left top repeat-x;
	margin-bottom: 10px;
}


#aboutdw{
	background: #d4a9f8;
	background: #ff71a6 url(../img/pat_pink.png) left top repeat-x;
	margin-bottom: 10px;
}

#contact{
	background: #9be9a6 url(../img/pat_jade.png) left top repeat-x;
	margin-bottom: 10px;
}

#footer{
	background: #707070 url(../img/pat_antracite.png) left top repeat-x;
	padding-bottom: 10px;
}

.content{
	padding: 10px;
	width: 70%;
	width: 860px;
	margin: 0px auto;
	text-align: left;
	position: relative;
	overflow: hidden; 
}

#aboutdw .content, #contact .content, #footer .content{
	width: 701px;
	padding-right: 159px;
}

.content .col1, .content .col2, .content .col3, .content .col4, .content .pin1, .content .pin2, .content .pin3{
	border: 0px solid #000;
	width: 20%;
	width: 221px;
	float: left;
	padding: 0px 5% 0px 0px;
	padding-right: 20px;
}

.content .linkcol{
	position: absolute;
	right: 0px;
	bottom: 20px;
	width: 140px;
	text-align: center;
}

#tweets .content .linkcol a, #pinterest .content .linkcol a, #lastfm .content .linkcol a{
	padding: 105px 0px 0px 0px;
	text-decoration: none;
	text-transform: lowercase;
}

#tweets .item{
	padding-bottom: 1em;
}

#tweets .content .linkcol a{
	background: url(../img/icon_tweet.png) 50% 5% no-repeat;
	color: #8ea073;
}

#pinterest .content .linkcol a{
	background: url(../img/icon_pin.png) 50% 5% no-repeat;
	color: #9a523e;

}

#lastfm .content .linkcol a{
	background: url(../img/icon_fm.png) 50% 5% no-repeat;
	color: #517588;
}

#tweets .content .linkcol a:hover, #pinterest .content .linkcol a:hover, #lastfm .content .linkcol a:hover{
	color: #333333;
}



#pinterest .item{
	padding: 0px;
	float: left;
	width: 20%;
	width: 221px;
	padding: 0px 5% 0px 0px;
	padding-right: 20px;
	padding-bottom: 10px;
}

#pinterest .item a{
	background: #f5ad98;
	padding: 8px;
	display: block;
	width: 192px;
	margin-bottom: 1em;
}

#pinterest p{
	margin: 0em;
	position: static;
}

#lastfm .track{
	padding: 0px;
	float: left;
	width: 20%;
	width: 221px;
	padding: 0px 5% 0px 0px;
	padding-right: 20px;
	padding-bottom: 1em;
}

#lastfm .track a{
	padding: 8px;
	background: #b1daf0;
	display: block;
	width: 192px;
	margin-bottom: 1em;
}

#lastfm .track a img{
	width: 192px;
	height: 192px;
}

#lastfm .col4{
	clear: left;
}

#lastfm strong{
	display: block;
}

#pinterest .item a img, #lastfm .track a img{
	margin: 0px;
	margin-bottom: -5px;
	padding: 0px;
}

#lastfm .track:hover p{
	color: #446f86;
}

#pinterest .item:hover p{
	color: #743b2b;
}

#contact p{
}

#contact li a{
	display: block;
	width: 221px;
	float: left;
	padding: 90px 5px 10px 5px;
	text-align: center;
	margin-top: 1.5em;
}

#contact .twitter a{
	background: url(../img/icon_c_twitter.png) 50% 10px no-repeat;
}

#contact .book a{
	background: url(../img/icon_c_facebook.png) 50% 10px no-repeat;
}

#contact .linked a{
	background: url(../img/icon_c_linkedin.png) 50% 10px no-repeat;
}


/* ------------- Text */

body{
	font-size: 0.91em;
	color: #666666;
	line-height: 1.57em;
	letter-spacing: 0.02em;
}

p{
	margin-bottom: 1em;
}

#siteintro{
	font-size: 1.23em;
	color: #ff4d35;
	text-transform: lowercase;
}

#hello p{
	font-size: 1.25em;
}

#sohello p{
	font-size: 0.95em;
	color: #333333;
}

#tweets p{
	color: #70805f;
}

#tweets p.date{
	color: #c5df84;
}

#pinterest p{
	color: #c56f57;
}

#lastfm p{
	color: #81aec5;
}

#aboutdw p{
	color: #5d4472;
	color: #661433;
}

#contact p{
	color: #366f3e;
}

#footer p{
	color: #cecece;
}

/* ------------- Links */

#nav a{
	color: #646464;
}

#hello a.more{
	color: #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
	text-decoration: none;
	margin-left: 0.5em;
}

#sohello a{
	background-color: #feff9b;
	padding: 1px 3px;
	border-bottom: 1px solid #d7d7d7;
	color: #646464;
	text-decoration: none;
}

#sohello a:hover, #sohello a:focus{
	background-color: #e53982;
	color: #ffffff;
}

#hello a.more:hover, #hello a.more:focus{
	color: #aaaaaa;
	outline: none;
}

#tweets a{
	color: #70805f;
}

#aboutdw a{
	color: #661433;
	background-color: #ff91ba;
	padding: 1px 3px;
	border-bottom: 1px solid #661433;
	text-decoration: none;
}

#aboutdw a:hover, #aboutdw a:focus{
	background-color: #ffaccb;
}

#aboutdw #dwintro a.more{
	color: #ce5784;
	border-bottom: 1px solid #ce5784;
	background-color: transparent;
	padding: 0px;
}

#aboutdw #dwintro a.more:hover, #aboutdw #dwintro a.more:focus{
	color: #661433;
	background-color: #ff91ba;
}


#contact a{
	color: #688e6d;
	text-decoration: none;
	border-bottom: 0px;
}

#contact a:hover{
	color: #444444;
	background-color: rgba(255,255,255,0.1);
}

#footer a{
	color: #333333;
	text-decoration: none;
	border-bottom: 1px solid #333333;
}


/* ------------- Headings */

h1, h2{
	font-family: "Rockwell", Georgia, "Times New Roman", serif;
	font-size: 2em;
	font-weight: normal;
	letter-spacing: -1px;
	margin: 1em 0em 0.3em 0em;
	line-height: 1em;
}

h1{
	color: #aaaaaa;
	font-size: 3.5em;
}

h1 span{
	color: #e53982;
	text-shadow: 2px 2px 0px #d7d7d7;
}

h2{
	font-size: 2.5em;
	-moz-text-shadow: -1px -1px rgba(0, 0, 0, 0.3), 1px 1px rgba(255,255,255,0.2);
	-webkit-text-shadow: -1px -1px rgba(0, 0, 0, 0.3), 1px 1px rgba(255,255,255,0.2);
	text-shadow: -1px -1px rgba(0, 0, 0, 0.3), 1px 1px rgba(255,255,255,0.2);
	letter-spacing: 0px;
}

#tweets h2{
	color: #c5df85;
}

#pinterest h2{
	color: #c56f57;
}

#lastfm h2{
	color: #81aec5;
}

#aboutdw h2{
	color: #a487bc;
	color: #ce5784;
}

#contact h2{
	color: #69b674;
}

#footer h2{
	color: #aaaaaa;
}



/* ------------- Content markup */

#rightcol ul, #rightcol ol{
	margin-left: 0em;
	margin-bottom: 1em;
}

#rightcol ul{
	list-style-type: disc;
}

#rightcol ul li ul{
	list-style-type: circle;
	margin-bottom: 0em;
}

#rightcol ol{
	list-style-type: decimal;
}

#rightcol ol li ol{
	list-style-type: lower-alpha;
	margin-bottom: 0em;
}

#rightcol ul li, #rightcol ol li{
	margin-left: 1.15em;
}


#rightcol .alignright{
	float: right;
	margin: 0em 0em 1em 1em;
}

#rightcol .alignleft{
	float: right;
	margin: 0em 1em 1em 0em;
}


/* ------------- Nav */

#nav{
	text-align: right;
	text-transform: lowercase;
}

#nav ul{
}

#nav ul li{
}

#nav ul li a{
	margin-bottom: 0px;
	text-decoration: none;
}

#nav ul li a span{
}

#nav ul li a.active span{
	font-weight: bold;
}

#nav ul li.parent a span{
	font-weight: bold;
}

#nav ul li a:hover{
	color: #ff4d35;
}


/* ------------- Portfolio */

#portfolio .portfolio-item{
	position: relative;
	overflow: hidden;
	margin-bottom: 2em;
	padding-bottom: 2em;
	border-bottom: 1px dotted #cfcfcf;
}

#portfolio .portfolio-item h2{
	position: absolute;
	left: 310px;
	top: 0px;
}

.portfolio-item .date{
	display: none;
}

#portfolio .portfolio-item .portfolio-meta{
	float: left;
	width: 276px;
}

#portfolio .portfolio-item .portfolio-info{
	margin-left: 310px;
	padding-top: 1.5em;
	font-size: 0.92em;
	color: #4a4a4a;
}

.portfolio-item .portfolio-preview{
	border: 1px solid #d3d3d3;
	height: 133px;
	overflow: hidden;
}

.portfolio-item .portfolio-preview img{
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	opacity: 0.3;
}

.portfolio-item:hover .portfolio-preview img{
	opacity: 1;
}

#rightcol .portfolio-item .portfolio-preview a{
	border: 0px;
	display: block;
	height: 133px;
}

.portfolio-item .portfolio-dienst{
	color: #646464;
	font-size: 0.85em;
}

#rightcol .portfolio-item .portfolio-info a{
	color: #ff4d35;
}

#portfolio-recent .portfolio-item{
	width: 276px;
	float: left;
	margin-right: 12px;
	margin-bottom: 2em;
}

#portfolio-recent .portfolio-item.even{
	margin-right: 33px;
}

#portfolio-recent .more{
	clear: both;
}

#portfolio-recent .more a{
	color: #ff4d35;
}

#rightcol .portfolio-item .portfolio-info a:hover, #portfolio-recent .more a:hover{
	color: #646464;
}

/* ------------- Formcontrols content */


#content input, #rightcol input, #content select, #rightcol select{
	border: 1px solid #747f81;
	padding: 3px;
}

#content input.submit, #rightcol input.submit{
	color: #ffffff;
	padding: 2px 4px;
	background-image: none;
	background-color: #747f81;
	border: outset #747f81;
}

#content label, #rightcol label{
	font-weight: bold;
	display: block;
	margin-bottom: 0.33em;
}

/* ------------- Media query magic */

@media screen and (max-width: 1024px) {

body{
	font-size: 100%;
	color: #666666;
	line-height: 1.57em;
	letter-spacing: 0.02em;
}

#hello, .content{
	width: auto;
	margin: 0px;
	text-align: left;
	padding: 5%;

}

#tweets, #pinterest, #lastfm, #aboutdw, #contact, #footer{
	background-image: none;
	margin-bottom: 3%;
}

.content .linkcol{
	position: absolute;
	right: 5%;
	bottom: 20px;
	width: 140px;
	text-align: center;
}

h1, h2{
	font-family: "American Typewriter", Georgia, "Times New Roman", serif;
}

}

@media screen and (max-width: 880px) {

}

@media screen and (max-width : 620px) {

body{
	font-size: 120%;
	color: #666666;
	line-height: 1.57em;
	letter-spacing: 0.02em;
}

#hello, .content{
	width: auto;
	margin: 0px;
	text-align: left;
	padding: 3%;

}

#tweets, #pinterest, #lastfm, #aboutdw, #contact, #footer{
	background-image: none;
	margin-bottom: 3%;
}

.content .col1, .content .col2, .content .col3, .content .col4, .content .pin1, .content .pin2, .content .pin3{
	width: 100%;
	float: none;
	padding: 0px;
}

.content .linkcol{
	position: static;
	width: 100%;
	text-align: center;
	clear: both;
}

#tweets .content .linkcol a, #pinterest .content .linkcol a, #lastfm .content .linkcol a{
	padding: 100px 5% 5% 5%;
	margin-top: 10%;
}

#pinterest .item{
	padding: 0px;
	float: none;
	width: 100%;
	padding: 0px;
	clear: both;
}

#pinterest .item p{
}

#pinterest .item a{
	background: #f5ad98;
	padding: 8px;
	display: block;
	width: 192px;
	margin-bottom: 5%;
	float: left;
	margin-right: 5%;
}


#lastfm .track{
	padding: 0px;
	float: none;
	width: 100%;
	clear: both;
}

#lastfm .track a{
	padding: 8px;
	background: #b1daf0;
	display: block;
	width: 50%;
	margin-bottom: 1em;
	float: left;
	margin-right: 3%;
}

#lastfm .track a img{
	width: 100%;
	height: auto;
}

#lastfm .track p{
	width: 40%;
	float: left;
}

#aboutdw .content, #contact .content, #footer .content{
	width: auto;
	padding-right: 5%;
}


h1, h2{
	font-family: "American Typewriter", Georgia, "Times New Roman", serif;
}

}