/*
Theme Name: Retro Coolness
Theme URI: http://nuggets.mu.nu/
Author: Apothegm Designs 
Author URI: http://apothegmdesigns.com/
*/

body {
margin: 0;
/* setting border: 0 hoses ie5 win window inner well border */
padding: 0; }

body { text-align: center; } /* center on ie */
a img { border: 0; }
img { border: 0; }

#alpha a, #alpha a:link { color: #FFFFFF; text-decoration: none; }
#alpha a:hover { color: #900; text-decoration: none; }
#alpha a:visited { color: #FFFFFF; text-decoration: none; }

#beta a, #beta a:link { color: #900; text-decoration: none; }
#beta a:hover { color: #CCCCFF; text-decoration: none; }
#beta a:visited { color: #900; text-decoration: none; }

#gamma a, #gamma a:link { color: #FFFFFF; text-decoration: none; }
#gamma a:hover { color: #900; text-decoration: none; }
#gamma a:visited { color: #FFFFFF; text-decoration: none; }

/* page layout */

body { color: #000000; text-align: center; font-family: Verdana, Arial, Helvetica, Sans-serif; 
font-size: 12px; line-height: 130%; background: #50A2D4 url(build/circlebg.jpg) no-repeat top center; background-attachment: fixed; }

#container { width: 900px; margin: 0 auto; text-align: left; position: relative; 
margin: 0 auto; /* center on everything else */ }

#navcontainer { align: right; margin-top: 20px; margin-left: 300px; background: url(build/retro.jpg); font: normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; }

#navlist { list-style: none outside none; margin: 0; padding: 0; }

@media all {  #navlist { text-align: center }  }

#navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; 
position: relative; }

html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; }

#navlist a, #navlist a:link, #navlist a:visited {
background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF;
cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; 
position: relative; right: 2px; text-decoration: none; }

#navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; }

#navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; }

#navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0;
padding: 0; position: relative; }

html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; }

#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #369; border-bottom: none;
border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC;
bottom: 0; color: #FFF; cursor: text; margin: 0;
padding: 2px 5px 0 5px; position: relative; right: 0; }

#header { position: relative; height: 320px; margin-top: 0px; margin-left: -90px; width: 1080px; 
background:  url(build/retrobanner.jpg); background-repeat: no-repeat; }

#wrap { width: 900px; margin-left: 0px auto; position: relative; }

#alpha { width: 190px; display: block; position: absolute; float: none; text-align: left; 
margin: 0px; left: 10px; top: 20px; padding: 0px; background: url(build/); color: #000000;   }

#beta { width: auto; display: block; float: none; color: #000000; top: 0px; 
background: #FFFFFF url(build/betatop.jpg) top center no-repeat; left: 200px; position: absolute; width: 500px; }

.betabottom { width: 500px; height: 100px;  background: #FFFFFF url(build/betabottom.jpg) no-repeat bottom center; }

#gamma { width: 190px; display: block; top: 0px; padding: 0px; left: 700px;
position: absolute; float: none; right: 10px; background: url(build/); color: #FFFFFF; }

#alpha, #beta, #gama {
display: inline; /* ie win bugfix */
min-height: 1px; }	

#alpha .left-top { height: 20px; margin: 0px; background-image: url(style/left-top.jpg); background-repeat: no-repeat; }
#alpha .left-bot { height: 20px; margin: -20px 0px 20px 0px; padding: 0px; background-image: url(style/left-bottom.jpg); background-repeat: no-repeat; }
#alpha .left { margin: 0px; padding: 0px 20px 0px 20px; background-image: url(style/left-middle.jpg); background-repeat: repeat-y; font-size: 12px; color: #000040; }
#alpha .left ul { margin: 0px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 0px; }
#alpha .left  ul li { list-style-type: none; margin: 0px; padding-bottom: 20px; text-align: center; }
#alpha .left ul ul { margin: 0px; padding: 0px; text-align: center; }
#alpha .left ul li li { list-style-type: none; margin: 0px; padding-bottom: 5px; }
#alpha .left ul.children { margin-top: 5px; margin-right: 10px; }

#alpha .left h2 { text-align: center; font-size: 12px; font-weight: normal; margin-top: 10px; margin-right: 20px;
padding-top: 3px; padding-bottom: 3px; margin-bottom: 5px; }	

#alpha #searchform { margin: 0px; padding: 0px; }
#alpha #searchform input { width: 100px; border: 1px solid #000000; }
#alpha #searchform #go { width: 30px; }
#alpha select { width: 140px; }
#alpha option { width: 140px; }

#gamma .right-top { height: 20px; margin: 0px; padding: 0px; background-image: url(style/right-top.jpg); background-repeat: no-repeat; }
#gamma .right-bot { height: 20px; margin: -20px 0px 20px 0px; padding: 0px; background-image: url(style/right-bottom.jpg); background-repeat: no-repeat; }
#gamma .right { margin: 0px; padding: 0px 20px 0px 20px; background-image: url(style/right-middle.jpg); background-repeat: repeat-y; font-size: 12px; color: #000040; }
#gamma .right ul { margin: 0px; padding-top: 20px; padding-bottom: 10px; padding-right: 10px; padding-left: 0px; }
#gamma .right ul li { list-style-type: none; margin: 0px;  text-align: center; 
padding-bottom: 20px; }
#gamma .right ul ul { margin: 0px; padding: 0px; text-align: center; }
#gamma .right ul li li { list-style-type: none; margin: 0px; padding-bottom: 5px; }
#gamma .right ul.children { margin-top: 5px; margin-left: 10px; }
#gamma .right .side h2 { color: #000040;
font-family: Georgia, 'Times New Roman', serif;
font-size: 16px; text-align: center; margin: 0px; 
font-variant: small-caps; padding: 0px 0px 10px 0px; font-size: 14px; }

#gamma #searchform { margin: 0px; padding: 0px; }
#gamma #searchform input { width: 100px; border: 1px solid #000000; }
#gamma #searchform #go { width: 30px; }
#gamma select { width: 140px; }
#gamma option { width: 140px; }

/* standard helper classes */

.clr { clear: both; overflow: hidden; width: 1px; height: 1px; font-size: none;
margin: 0 -1px -1px 0; border: 0; padding: 0; line-height: 0%; }

#foot { clear: both; height: 10px; }

.post { margin: 0px; padding-bottom: 20px; line-height: 20px; }
.postfoot { font-size: 10px; text-align: right; line-height: normal; padding-top: 10px; padding-right: 30px;  }
.pagefoot { font-size: 10px; text-align: right; line-height: normal; padding-top: 15px; padding-right: 30px; padding-bottom: 10px;  }

h1 { color: #000000; font-size: 16px; margin: 0px; padding: 5px 0px 5px 30px; background-image: url(images/); background-repeat: no-repeat; background-position: top left; }
h1 a { text-decoration: none; }
img { border: none; }
a img { border: none; }
a:link, a:visited { color: #333333; }
a:hover { color: #333333; }


/* ---------------POST-------------------*/

.blog { padding: 10px; }

.storydate { text-align: center; padding-top: 20px; color: #336699; font-size: 20px; }
 
h3.storytitle a:link, h3.storytitle a:visited {
text-align: left; color: #369; text-decoration: none; margin-top: 20px;
font-weight: normal; font-variant: small-caps; font-size: 20px; }

h3.storytitle a:hover { color: #CCCCFF; font-variant: small-caps; font-size: 20px; }

.meta { font-size: 11px; text-align: right; color: #900; }

.feedback { align: center; padding: 3px; margin-bottom: 10px; }

.storycontent { font-size: 12px; line-height: 130%; margin: 0px; }

.storycontent a, .storycontent a:link, .storycontent a:hover, storycontent a:visited {
font-size: 12px; color: #900; font-weight: normal; text-decoration: none; }

.storycontent a:hover { font-size: 12px; color: #CCCCFF; }

.posted, .posted a, .posted a:link, .posted a:hover, posted a:visited {
font-size: 11px; text-align: center; }

blockquote { font-size: 10px; text-align: justified; border: 1px solid #FFFFFF; color: #000000; }

h4 { font-size: 18px; font-weight: normal; }

/* comments */

.commentshead { 
color: black; font-size: x-large; font-family: Georgia, Times, Times New Roman, serif; 
font-weight: bold; line-height: 140%; text-align: left; margin-top: 50px; }
.commentstext   { color: black; font-size: small; font-family: Georgia, Times, Times New Roman, serif; font-weight: normal; line-height: 140%; text-align: justified; 
margin-top: 5px; margin-bottom: 30px; }
.commentsmetadata { color: grey; font-size: x-small; border: 0px;
font-family: Arial, Helvetica, sans-serif; font-weight: normal; line-height: 140%; }
#commentform input {width: 300px; color: grey; font-size: small; 
font-family: verdana, arial, sans-serif; padding: 2px 2px 2px 2px;
margin: 2px 0px 2px 0px; text-align: left; 	}
#commentform textarea { width: 400px; color: grey; padding: 2px 2px 2px 2px; 
font-size: small; font-family: verdana, arial, sans-serif; }
#commentform #submit { margin: 0px; text-align: center; color: black; float: center; }
.nocomments { text-align: right; margin: 0; padding: 0; }

/* Begin Images */

p img { padding: 0; max-width: 100%; }

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
	
img.centered { display: block; margin-left: auto; margin-right: auto; }
img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }
.alignright { float: right; }
.alignleft { float: left }
.bgimg { position: absolute; top: 0px; left: 0px; }

/* ---------------POST-------------------*/

/* calendar */
#wp-calendar {
background-color: #CCCCFF; empty-cells: show; font-size: 13px;
color: #000000; font-weight:bold; width: 150px;
margin-bottom: 8px; border: 1px solid #FFFFFF; }

#wp-calendar #next a, #wp-calendar #next { 
padding: 0 5px 0 0; text-align: center; color: #000000; 
background-color: #CCCCFF; font-weight:normal; background-image: none; }

#wp-calendar #prev a, #wp-calendar #prev {
padding: 0 0 0 5px; text-align: center; color: #900;
background-color: #CCCCFF; font-weight:normal; }

#wp-calendar a, #wp-calendar a:link { display: block; text-decoration: none; color: #900; }

#wp-calendar td:hover { background-color: #FFFFFF; }

#wp-calendar caption { background-color: #CCCCFF; empty-cells: show; font-size: 13px;
font-weight:bold; width: 150px; margin-bottom: 8px; border: 1px solid #FFFFFF; 
text-align: center; color: #000040; font-variant: small-caps; }

#wp-calendar td { color: #000040; font-size: 10px; font-weight: normal;
padding: 1px 1px; text-align: center; }
	
#wp-calendar td.pad { background-color: #CCCCFF; }
	
#wp-calendar td { border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; 
text-align: center; }	
	
#wp-calendar #today { color: #900; }

#wp-calendar th { background-color: #CCCCFF; border: 1px solid #CCCCCC; color: #000040;
font-style: normal; text-transform: lowercase; text-align:center; }