/**************************************************************************************
*** 0. Reset
**************************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

/**************************************************************************************
*** 1. Typography
**************************************************************************************/

/*********************
*** 1.1 @font-face
*********************/

/*** 
**** About the fonts used on Stephantasy:
**** 1. Disclaimer
**** 2. Fonts used
**** 3. Where you can get them
***/

/*** Museo by Jos Buivenga (LJB) at the exljbris Font Foundry ***/

/*** serif ***/

@font-face {
font-family: "Museo 500"; 
src: url('/stuff/fonts/Museo500-Regular.otf') format('opentype');
}

@font-face {
font-family: "Museo 700"; 
src: url('/stuff/fonts/Museo700-Regular.otf') format('opentype');
font-weight: bold;
}
/*** sans serif ***/

@font-face {
font-family: "Museo Sans 500";
src: url('/stuff/fonts/MuseoSans_500.otf') format('opentype');
}

@font-face {
font-family: "Museo Sans 500";
font-style:italic;
src: url('/stuff/fonts/MuseoSans_500_Italic.otf') format('opentype');
}

/*** Handwriting fonts ***/


@font-face {
font-family: "Mareen's Print";
src:url('/stuff/fonts/mareensprint.TTF') format('truetype');
}

.hand, .hand p {
font-family: "Mareen's Print", "Comic Sans Ms", sans-serif;
font-size:1.5em;
}


/*** Header font ***/

@font-face {
font-family: "Broken 15";
src: url('/stuff/fonts/BROKEN15.TTF') format('truetype');
}


/****************************
*** 1.2 General Font Styling
****************************/

/***
**** for special styling
**** please see the relevant div
***/

/*** headings ***/

h1 {
color:#4C617C;
font-size:1.25em; 
}

h2 {
font-family: "Museo 700", Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
font-size:1.125em; 
line-height:1.333em;
margin-bottom:1.333em;
text-align:center;
}

h3 {
font-family: "Museo 700", Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
font-size:1em; 
line-height:1em;
margin-bottom:1em;
text-align:center;
}


/*** text ***/

p {
font-family: "Museo 700", Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
font-size:0.875em;
line-height:1.714em;
margin:1.5em 0 1.5em 0;
}

#footer p {
font-family: "Museo 500", Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
font-size:1em;
line-height:0.875em;
}

a { 
color: #4C617C;
font-family: "Museo 700", Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
}

ul {
font-family: "Museo 700", Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
font-size:0.875em;
line-height:1.714em;
list-style-type:disc;
margin:1em 0 0 2em;
}

a:link {
color: #4C617C;
font-family: "Museo 700", Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
padding:0.25em;
text-decoration:none;
}

a:visited {
color: #066;
padding:0.25em;
text-decoration:none;
}

a:hover {
color: #F8F1E6;
background-color:#4C617C;
padding: 0.25em;
text-decoration: none;
} 

a:active {
color: #F8F1E6;
background-color:#3C1D4C;
padding: 0.25em;
text-decoration: none;
}

body {
background:url('img/bg.jpg');
background-color:#9DBE90;
color:#333;
line-height: 1.5em;
}

#container {
background-color:transparent;
margin:0 0 0 120px;
}

.clear {
clear:both;
}


#header {
margin:0 0 0 20px;
padding:0;
}

#header h1 {
color:#4C617C;
font-family: "Broken 15", Impact, Charcoal, sans-serif; 
line-height:1.25em;
font-size:4.5em; 
}

#row-one {
margin-top:10px;
}


.column-one-box{
-moz-border-radius:5px;
-webkit-border-radius:5px;
float:left;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
height:160px;
width:160px;
} 

.column-two-box, .column-three-box, .column-four-box, .column-five-box, .column-six-box {
float:left;
margin-right:10px;
margin-bottom:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
height:160px;
width:160px;
}

.box-content {
padding:20px 10px 10px 10px;
}

#row-two .column-three-box {
background:url('img/wbg.jpg');
border:2px solid #4D5C47;
}

#row-two .column-three-box h2 {
color:#4C617C;
font-family: "Broken 15", Impact, Charcoal, sans-serif; 
line-height:1.5em;
font-size:1.75em;
text-align:center;
}

#row-three .column-three-box, #row-three .column-four-box, #row-four .column-three-box, #row-four .column-four-box {
background:url('img/wbg3.jpg');
border:2px solid #6A5A3F;
}

#row-two .column-one-box, #row-two .column-two-box, #row-three .column-one-box, #row-three .column-two-box {
background:url('img/tapestrybg.jpg');
border:2px solid #6A5A3F;
}

#row-two .column-four-box, #row-two .column-five-box {
background:url('img/cbg.jpg');
border:2px solid #6A5A3F;
}

#row-one .column-one-box, #row-one .column-five-box, #row-five .column-one-box {
background:url('img/bg.jpg');
border:2px solid #4D5C47;
}

#row-one .column-one-box a {
background-color:transparent !important;
}

#row-five .column-one-box .box-content { 
font-size:0.75em;
padding-top:100px;
} 

#row-one .column-two-box, #row-one .column-three-box, #row-one .column-four-box, #row-three .column-five-box, #row-four .column-one-box, #row-four .column-two-box, #row-four .column-five-box, #row-five .column-two-box, #row-five .column-three-box, #row-five .column-four-box, #row-five .column-five-box {
background:url('img/birdbg.jpg');
border:2px solid #6A5A3F;
}

/***
**** position: fixed, with background always at the front
***/

#ornament1 {
background-image: url('/img/troll.png');
background-repeat: no-repeat;
background-position:left;
height:401px;
width:163px;
margin:0;
padding:0;
position:fixed;
bottom:0px;
left:0px;
z-index: 5;
}

#ornament2 {
background-image: url('/img/wurz.png');
background-repeat: no-repeat;
background-position:right;
height:239px;
width:410px;
margin:0;
padding:0;
position:fixed;
bottom:0px;
right:0px;
z-index: 10;
}

#footer {
margin-left:40px;
}

#row-one .column-one-box, #row-two .column-one-box, #row-three .column-one-box,, #row-four .column-one-box, #row-five .column-one-box { 
display:inline;
}