/* "Clothed" styles for The Oo Kingdom, Version 19

   Screen only. Works along with the "Naked" styles.
   Browsers that understand CSS media queries will get this,
   and IE7/8 will get it via conditional comment.
   Default 1em will be 15px for most.

   Latest revision December 7, 2011 @ 00:48 cst */

html {min-height: 100%; padding-bottom: 1px; /* forces scrollbars */}

body {position: relative; max-width: 69em; padding: 1px 0;}
body#home {max-width: 827px; padding: 0 0 0 418px;}
body#gallery {max-width: 1110px; padding: 1px 1em;}

/* Do layout for block HTML5 elements */

header, section, article, footer {
	display: block; margin-left: 2%; width: 64%;}

/* Reset margins for nested elements, and for special pages */

section header, article header, section section, article section,
#home header, #home section, #home article, #home footer,
#gallery header, #gallery footer {margin-left: 0; width: auto;}

#wrapper {padding: 1px 1em; border-left: 2px solid silver;}

section.first {border-top: none;}
#inner2 section.first {border-top: 3px solid silver;}

footer {padding: 0 0 2em 0;}
#home footer {padding: 0 1em 2em 1em;}

#home h1 {margin-top: 0; position: absolute; top: 0; left: 0;}
#home h1 img {display: block;}

p {text-align: justify;}



/* Navigation bar */

nav {	position: absolute; top: 0; left: 68%; width: 30%;
	border-top: none;
	border-left: 2px solid silver;
	border-bottom: 2px solid silver;}
#home nav {
	top: 180px; left: 0; width: 418px;
	border-left: none; border-bottom: none;}

#nav1 {float: left; width: 208px; padding: 1px 0;}
#nav2 {margin-left: 208px; padding: 1px 0;
	border-left: 2px solid silver;}
nav section {clear: left; padding: 1px 0;}

/* There's no padding in the nav, but elements inside are padded;
   this ensures proper performance on IE7 and earlier */

nav p {padding: 0 1em;}
nav h2 {padding: 0 0.62em;}
nav h3 {padding: 0 0.73em;}
nav ul {list-style-type: none; margin: 1em auto;
	text-indent: -2em; padding: 0 1em 0 3em;}

nav a {text-decoration: none;}
nav a:hover {text-decoration: underline;}



/* Table of Contents */

header nav {position: static; width: auto;
	border-left: none; border-bottom: none;}
header nav h2, header nav p {padding: 0;}
header nav ul {padding: 0 0 0 2em;}

/* Home page table of contents (only show if focused) */

#home header nav {position: absolute; top: 0; left: -9000px;}
#home header nav a:focus {position: absolute; top: 0; left: 9440px;
	width: 15em; padding-left: 3em;}



/* Floats and Clears */

.fl {float: left; margin: 0 1em 1em 0;}
.fr, .fr-wide {float: right; margin: 0 0 1em 1em;}

.cl {clear: left;}
.cr {clear: right;}
.cb, section, article, footer {clear: both;}



/* For holiday calendar - Definition list */

#calendar dt {float: left; width: 7em;}
#calendar dd {margin-left: 7em; border-left: 1px solid silver;
	padding-left: 2.5em; text-indent: -1.5em;}



/* Divided normal pages */

.half1, .bighalf1, .littlehalf1 {
	float: left; padding-right: 3%; border-right: 2px solid silver;}
.half2, .bighalf2, .littlehalf2 {float: right;}
.half1, .half2 {width: 47%;}
.bighalf1, .bighalf2 {width: 60%;}
.littlehalf1, .littlehalf2 {width: 34%;}



/* Our Christmas GIF to You
   www.ookingdom.com/holiday/christmas-gif */

#ummsanta {float: left;}
#ummsong {margin-left: 273px;}
#ummsong p {text-align: left;}



/* CSS Validator screams if you use "only" in @media blocks,
   but it isn't necessary since this is a screen-only stylesheet.
   But the media type "screen" has to be there in order to validate. */

@media screen and (max-width: 999px) {
.fr-wide {float: none; margin: auto;}
}

@media screen and (min-width: 1246px) {
body#home {margin: 0; padding-left: 420px; max-width: 92em;
	background-image: url(vert2-silver.gif);
	background-repeat: repeat-y;
	background-position: 418px 0;}
#wrapper {padding: 0; border-left: none;}
#inner1 {float: left; width: 48%; padding: 0 2%;
	border-right: 2px solid silver;}
#inner2 {float: right; width: 44%; padding-right: 2%;}
#inner2 section.first {border-top: none;}
#home footer {background: white; color: black; /* covers background image */}
}