/***********************\
| Design by Arno Moonen |
| www.arnom.nl          |
| www.itavero.nl        |
\***********************/

@media screen and (min-device-width: 481px){
	@import url(http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic|Yanone+Kaffeesatz:regular,bold|Reenie+Beanie);
}

* { padding: 0px; margin: 0px; }
body {
font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-size: 14px; 
text-align: center;
background: url("img/bg-page.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
background-color: #4a3b60;
color: #222;
}

h1, h2, h3, h4 {
font-family: 'Yanone Kaffeesatz', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
}

.break { clear: both; }

#wrap {
width: 920px;
margin: 0 auto;
text-align: left;
}

/* Header & Footer */
#head {
background: url("img/head.png");
background-repeat: no-repeat;
background-position: center center;
height: 160px;
}

#head h1 {
display: none;
}

#foot {
background: url("img/foot02.png");
background-repeat: no-repeat;
background-position: top center;
height: 50px;
padding-top: 90px;
text-align: center;
color: #fefefe;
}

#foot p {
font-family: 'Reenie Beanie', Helvetica, sans-serif;
font-size: 24px;
background: #748;
display: inline-block;
padding: 6px 8px;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}

.loading {
background: url("img/loader.gif");
background-position: center center;
background-repeat: no-repeat;
min-height: 100px;
min-width: 100px;
}

/* Links */
a {
letter-spacing: 1px;
color: #748;
text-decoration: none;
}
a:hover {
color: #111;
text-decoration: underline;
}


/* Blocks */

/* Base */
.block {
margin: 12px;
}

.block div.h2>.left {
background: url('img/head-left.png') bottom right;
background-repeat: no-repeat;
width: 10px;
height: 35px;
float: left;
}

.block div.h2>.right {
background: url('img/head-right.png') bottom left;
background-repeat: no-repeat;
width: 10px;
height: 35px;
float: right;
margin-left: -10px;
margin-top: -35px;
}

.block div.h2>.head {
background: url('img/head-bg.png') bottom center;
background-repeat: repeat-x;
height: 25px;
margin: 0 10px;
font-size: 22px;
font-weight: bold;
letter-spacing: 3px;
color: #fff;
padding: 5px 0px;
}

.block .head h2 {
font-size: 22px;
font-weight: normal;
letter-spacing: 3px;
color: #fff;
text-align: center;
}

.block .whiteBlock {
clear: both;
background: url('img/bg-block.png');
padding: 2px;
}

.block p {
padding: 4px;
line-height: 21px;
}

/* Block: About Me */
#blockAboutMe {
float: left;
width: 606px;
}
#blockAboutMe b, #blockAboutMe a {
font-size: 125%;
color: #111;
font-weight: bold;
}

#skills {
width: 192px;
min-height: 192px;
float: right;
margin-left: 8px;
}

#skills img {
display: none;
float: right;
border: none;
}

/* Block: Connect */
#blockConnect {
float: right;
width: 266px;
}

/* Block: Photo Feed */
#blockPhotoFeed {
position: relative;
top: 10px;
margin-bottom: 21px;
clear: both;
}

#blockPhotoFeed .whiteBlock {
padding: 5px;
}

#blockPhotoFeed a {
float: left;
display: block;
width: 90px;
height: 90px;
border: 0px;
margin: 6px 2px 6px 6px;
background: url("img/picnotfound.gif");
background-position: center center;
background-repeat: no-repeat;
}

/* Block: Blog */
#blockBlog {
float: left;
width: 436px;
}

#blockBlog h3, .tumblr_title {
font-size: 26px;
font-weight: bold;
color: #b06;
margin: 2px;
margin-top: 6px;
text-align: center;
text-decoration: none;
}

#blockBlog p.date {
font-family: 'Reenie Beanie', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
text-align: center;
font-size: 12px;
font-weight: bold;
color: #555;
margin-top: -8px;
}

#blockBlog p {
text-align: left;
line-height: 18px;

}

#blockBlog .tumblr_body p {
margin-top: 8px;
}

ol.tumblr_posts {
list-style: none;
}

/* Block: Tweets */
#blockTweets, #blockSpring {
float: right;
width: 436px;
}
#tweets {
margin-top: -18px;
}
#tweets *, #blockSpring iframe * {
font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-size: 14px;
line-height: 21px;
}

/*------------------------------------*\
	IPHONE & OTHER MOBILE DEVICES
\*------------------------------------*/
#blockiPhoneConnect { display: none; }

@media handheld, screen and (max-device-width: 480px){

* {
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}

#blockiPhoneConnect { display: block; }

body, div {
  -webkit-text-size-adjust:0.5;
  font-family: Helvetica, Arial, Verdana, sans-serif;
}

#head {
background: url("img/head_handheld.png");
background-repeat: no-repeat;
background-position: center center;
height: 74px;
}

#foot, #foot p {
	font-size: 14px;
	font-weight: bold;
	line-height: 16px;
	background: none;
	padding-top: 4px;
}

#blockTweets, #blockBlog, #blockPhotoFeed, #blockConnect, #blockSpring, #skills {
display: none;
}

#blockiPhoneConnect a {
	display: block;
	text-align: center;
	background: url('img/head-bg.png') bottom center;
	background-repeat: repeat-x;
	height: 25px;
	margin: 0;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 3px;
	color: #fff;
	padding: 5px 0px;
}


.block .head h2 {
font-weight: bold;
}

#wrap, #blockiPhoneConnect, #blockAboutMe {
width: auto;
}

}