@import url('reset.css');

@font-face {
    font-family: 'Bonitas';
    src: url('fonts/bonitas.ttf');
}

@font-face {
    font-family: 'Raustila';
    src: url('fonts/raustila.ttf');
}

@font-face {
    font-family: 'Summertime';
    src: url('fonts/summertime.ttf');
}

@font-face {
    font-family: 'Droid Sans';
    src: url('fonts/droidserif.ttf');
}
@font-face {
    font-family: 'Droid Sans';
    font-style: italic;
    src: url('fonts/droidserif-italic.ttf');
}
@font-face {
    font-family: 'Droid Sans';
    font-weight: bold;
    src: url('fonts/droidserif-bold.ttf');
}
@font-face {
    font-family: 'Droid Sans';
    font-style: italic;
    font-weight: bold;
    src: url('fonts/droidserif-bolditalic.ttf');
}

html {
    background-color:#FFFFFF;
    background-image:url('textures/bedge_grunge.png');
}
html * {
    font-family:'Droid Sans';
    line-height:1.15em;
}

header {
    text-align:center;
    margin-top:20px;
    margin-bottom:20px;
}
header * {
	font-family:'Raustila';
}
header h1 {
	padding:10px;
    font-size:4em;
}
header p {
	font-size:1.8em;
}

article {
    width:860px;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;
	padding: 20px;
    margin-top:40px;
    margin-bottom:40px;
    overflow:hidden;
    background-color:#FFFFFF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    background-image:url('textures/handmadepaper.png');
}
.article-start, .article-end {
	height:10px;
	margin-left:-20px;
	margin-right:-20px;
	background-image:url('textures/postcard.gif');
}
.article-start {
	margin-top:-20px;
	margin-bottom:20px;
}
.article-end {
	margin-top:30px;
	margin-bottom:-20px;
}
article h2 {
    text-align:center;
    padding:20px;
	padding-bottom:0px;
    font-size:2em;
}
article p {
	margin-top: 20px;
}
article ul.program li.program-item, p.response a {
	display:block;
	padding:12px;
	background-color: #FFFFFF;
	margin:5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	margin-top:20px;
}
article ul.program li#map {
	margin-top:20px;
	height:400px;
}
article ul.program li.program-item:hover, p.response a:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
article ul.program li.program-item .hour {
	font-size:1.8em;
	padding-right:10px;
	color:#666666;
}
article ul.program li.program-item .title {
	font-weight:bold;
}
article ul.program li.program-item .place {
	margin-top:5px;
	font-style:italic;
	display:block;
	font-size: 0.8em;
}
p.response a {
	text-decoration:none;
	color:black;
}