<?php
header("Content-type: text/css");
// bg
$colorA='#ffffff';
// text, links
$colorB='#8d9ba6';
$baseunit=10;
$iconsURL='http://www.onceuponasky.com/img/site';
?>

/* RESET */
html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,textarea,blockquote,pre,form,input,fieldset,tabl
e,th,td,span { margin:0; padding:0; }
h1,h2,h3,h4,h5,h6,a,address,caption,cite,code,dfn,em,input,li,p,small,strong,th,var {font-style:norm
al;font-weight:normal;}
fieldset,img,input,textarea {border:0;}
ol,ul {list-style:none;}


body {
	background: <?=$colorA?>;
	color: <?=$colorB?>;
	font-family: 'Lato', Helvetica, Verdana, sans-serif;
	font-size: <?=$baseunit*2?>px;
	text-align: center;
}

a { color: <?=$colorB?>; text-decoration:none; }
a:hover { text-decoration: underline; }
a:active, a:focus { outline: none 0px; }

#wrapper {
	margin: 0px auto;
	width: 800px;
}

#topbar, #middlebar {
	height: <?=$baseunit*2?>px;
	line-height: <?=$baseunit*2?>px;
	padding: <?=$baseunit*0.5?>px 0px;
}

#controls { float: right; font-size: <?=$baseunit*1.5?>px; }
#main {
	color: <?=$colorA?>;
	position: relative;
}
#month {
<?php $monthsize=8; ?>
	left: <?=$monthsize*(-1)?>px;
	top: <?=$monthsize*(-3.5)?>px;
	font-size: <?=$monthsize*12?>px;
	font-weight: bold;
/*	height: <?=$monthsize*4?>px;	*/
	position: absolute; 
	text-transform: uppercase;
}

#day {
<?php $daysize=$monthsize*2; ?>
	left: <?=$daysize*(-1.5)?>px;
	top: <?=$daysize?>px;
	font-size: <?=$daysize*11?>px;
	font-weight: bold;
	position: absolute; 
}

#notfound {
	background: <?=$colorB?>;
	font-size: <?=$baseunit*5?>px;
	font-weight: bold;
	height: 534px;
	line-height: 534px;
	width: 800px;
}
#social { float: left; padding: 2px 0px; width: 100px; }
#social a { display: block; float: left; }
<?php $toolbarsize=16; ?>
#facebook{ 
	background: url('<?=$iconsURL;?>/toolbar<?=$toolbarsize?>.png') 0px 0px no-repeat;
	height: <?=$toolbarsize?>px;
	margin-right: <?=$toolbarsize/2?>px;
	width: <?=$toolbarsize?>px;
}
#twitter{ 
	background: url('<?=$iconsURL;?>/toolbar<?=$toolbarsize?>.png') <?=$toolbarsize*(-1.5)?>px 0px no-repeat;
	height: <?=$toolbarsize?>px;
	margin-right: <?=$toolbarsize/2?>px;
	width: <?=$toolbarsize?>px;
}
#fotomoto{ 
	background: url('<?=$iconsURL;?>/toolbar<?=$toolbarsize?>.png') <?=$toolbarsize*(-3)?>px 0px no-repeat;
	height: <?=$toolbarsize?>px;
	width: <?=$toolbarsize*1.5?>px;
}
#social span { display: none;}
#caption {
	float: right;
	font-size: <?=$baseunit*1.5?>px;
	font-style: italic;
	padding: 0px 100px 0px 0px;
	width: 600px;
}

#copyright { 
	float: left;
	font-size: <?=$baseunit*1.2?>px;
	height: <?=$baseunit*2?>px;
	line-height: <?=$baseunit*2?>px;
	padding: 67px 0px 0px 250px;
	width: 300px;
}

#bottomrightblock { float: right; }

#linkblock {
	float: left;
	font-size: <?=$baseunit*1.5?>px;
	width: 90px;
}
.bottomblockitem a { display: block; text-align: right; }
#logo { float: left; padding: 0px 0px 0px <?=$baseunit?>px; }

#about {
	color: <?=$colorB?>;
	font-size: <?=$baseunit*1.8?>px;
	height: 514px;
	padding: 20px 0px 0px 0px; /* 514+20=534 height */
	text-align: justify;
}

#shop {
	color: <?=$colorB?>;
	height: 300px;
	padding: 117px 0px; /* 117+200+117=534 height */
}

.shopitem {
	float: left;
	font-size: <?=$baseunit*1.2?>px;
	padding: 0px 0px 0px 50px;
	width: 200px;
}
.shopitem img { display: block; height: 200px; }
.shopitem a { display: block; text-align: center; }

.clear { clear: both; }