/* ==========================================================================
DEFAULT VALUES
*/
* {
   margin: 0;
   padding: 0;
   border: none;
   background: none;

   line-height: 1.3em;
}

body {
   background-color: #E0D1B3;
}

p {
   text-indent: 1em;
   
   margin-bottom: 10px;
   margin-top:    10px;
}

table {
   border-collapse: collapse;
}

/* ==========================================================================
STRUCTURE
*/

/**
* ##############
* ROOT CONTAINER
* ##############
*/

/* Class for clearing float */
.clear_float {
   clear: both;
}

/* Everything goes in this main container */
#root_container {
   min-width: 900px;
}

/**
* ###############
* TOP OF THE PAGE
* ###############
*
* Here we have banner, repeating backgorund for making all top of the page
* look fancy and nice link buttons for main pages.
*/

#top {
   width:  100%;
   height: 175px;

   background-position: -109px;
   background-repeat:   repeat-x;
   background-image:    url(images/banner_background.jpg);
}

#banner {
   width:  582px;
   height: 175px;

   background-repeat: no-repeat;
   background-image:  url(images/banner.jpg);
}


/**
* ####################################
* MENU IS IMPLEMENTED AS UNSORTED LIST
* ####################################
*/
ul#main_menu {
   position: absolute;
   right:    10px;
   top:      -1px;

   list-style-type: none;
}

ul#main_menu li {
   display: inline;
}

ul#main_menu li a {
   background-color: #6E0202;

   border-width: 1px;
   border-color: red;
   border-style: solid;

   float: left;

   padding-top:    10px;
   padding-bottom: 10px;
   padding-left:   15px;
   padding-right:  15px;

   margin-left: 5px;
}

/*ul#main_menu li a.current {
   border-width: 3px;
   filter:  alpha(opacity=100);
   opacity: 1;
   background-color: #660000;
}*/

ul#main_menu li a:hover {
   background-color: #970000;
}

/**
* ##################
* MIDDLE OF THE PAGE
* ##################
*/

#middle {
   margin-top: 10px;

   width:  100%;
}

/* Sidebar on the left
Width of this element - 270px */
#left_sidebar {
   float: left;

   width:  240px;

   margin-left:   10px;
   margin-right: -270px;

   border: none;
}

/* A whidget is a container in sidebar with border, background, and
padding */
.widget {
   width: 100%;

   margin-bottom: 20px;
}

/* Each widged should have a heading, name, title - call whatever you want -
which is shifted a little to the left. */
.widget h1 {
   margin-bottom: 10px;

   border-bottom-width: 1px;
   border-bottom-color: maroon;
   border-bottom-style: dashed;
}

.widget ul {
   margin-left: 20px;

   list-style: none;
}

/* A wrapper div that holds page title and content below it */
#right_content {
   float: left;

   min-width: 618px;

   margin-right: 10px;
   margin-left:  270px;
}

/* Title of the page */
#page_title {
   margin-bottom: 15px;
   margin-right: 230px;
}

/* Content on the right */
#main_content {
   z-index: 0;

   padding: 10px;

   border-width: 1px;
   border-style: dotted;
   border-color: maroon;

   background-color: white;
}

/*
Container for the joke of the day. It is on the top right
of the content container.
*/
div#joke {
   z-index: 1;

   /* Shift container a little to right and to hide borders of
   parent container */
   position: relative;
   top:      -11px;
   right:    -11px;

   float:right;

   width: 200px;

   padding:     15px;
   padding-top: 40px;

   margin-bottom: 10px;
   margin-left:   10px;

   border-color: maroon;
   border-style: dotted;
   border-width: 1px;
   border-top:   none;
   border-right: none;

   background-color: #E0D1B3;
}

/**
* ##################
* BOTTOM OF THE PAGE
* ##################
*/
#bottom {
   position: relative;

   margin-top: 10px;

   padding: 10px;

   height: 30px;

   border-style: solid;
   border-color: #F92A24;
   border-width: 1px;
   border-left:  none;
   border-right: none;

   background-color: #7E2A24;
}

#bottom .w3c_valid {
   position: absolute;

   top: 11px;
   right: 5px;
}

#bottom * {
   vertical-align: middle;
}

/* ==========================================================================
TEXT STYLES
*/

/* Default font style */
body {
   font-size:   1.1em;
   font-family: Georgia,'Times New Roman',times,serif;
}

/* Main menu text style */
#main_menu li a {
   color: white;

   font-size:    1em;
   font-weight:  bold;
   font-variant: small-caps;

   text-decoration: none;
}

.widget h1 {
   color: maroon;

   font-size:    1em;
   font-weight:  bold;
   font-variant: small-caps;
}

/* As joke is not as important as content, text is a little smaller */
div#joke {
   font-size: 0.8em;
}

/* Shift first line of new paragraf of a joke a little (probably this will be
be gone soon) 
#joke p {
   text-indent: 1em;
}*/

#page_title {
   color: #6C0000;

   font-family: Verdana,Arial,Helvetica,sans-serif;
   font-weight: bold;
   font-size: 1.7em;

   text-align: right;
}

/* Because footer is dark I need white text */
#bottom {
   color: white;
}

/* ==========================================================================
LINK STYLES
*/

a, a:hover, a:visited {
   text-decoration: none;

   color: #990000;
}

a:hover {
   color: #c90000;

   text-decoration: underline;
}

.post h1 a {
   color: maroon;
}

.post h1 a:hover {
   color: #c90000;
}

a img, a:hover img, a:visited img {
   border: none;
}

/* ==========================================================================
POST STYLES
*/

.post {
   margin-bottom: 40px;
}

.post h1, .article h2 {
   margin: 0;
   font-weight: bold;
}

/* Title of an article, joke or other post*/
.post h1 {
   margin-top: 5px;

   font-size: 1.3em;
}

/* Subtitles for chaper titles */
.post h2 {
   margin-bottom: 10px;

   font-size: 1em;

   text-indent: 1em;
}

/* Creation and last edit time just below the title */
.post .date {
   margin-bottom: 20px;

   color: gray;

   font-size: 0.8em;
   font-style: italic;

   text-align: right;
}

/* Block code should be a little smaller than normal text */
pre {
   font-size: 0.9em;
}

/* But inline code should be larger */
code {
   font-size: 1.2em;
}

/* Some style for code blocks */
pre {
   display: block;

   margin-left: 10px;
   margin-bottom: 10px;

   padding-top: 10px;
   padding-bottom: 10px;
   
   border-style: dashed;
   border-color: gray;
   border-width: 1px;
   border-left: none;
   border-right: none;
}

blockquote {
   margin-left: 40px;

   font-style: italic;

   color: gray;
}

.post ul {
   margin-left: 35px;

   list-style-type: square;
}

.post ul li {
   margin-bottom: 10px;
}

.post ul li li {
   margin-bottom: 0px;

   list-style-type: circle;
}

div.cv th {
   padding-right: 30px;

   text-align: left;
}

/* ==========================================================================
POST FOOTER
*/

.post_footer {
   margin-top: 20px;

   padding-top: 5px;
   padding-bottom: 5px;

   border-style: dashed;
   border-color: maroon;
   border-width: 1px;
   border-left: none;
   border-right: none;

   background-color: #FFEFDF;

   font-size: 0.8em;

   text-align: center;
}

/* Separates category's, tags' and comments' links in post footer */
.v_sep {
   color: maroon;
}

/* ==========================================================================
COMMENTS
*/

div#comments h1 {
   margin-bottom: 30px;
   
   font-size: 1.2em;
}

div.comment {
   margin-left: 20px;
   margin-right: 20px;
   margin-bottom: 30px;

   position: relative;
}

.comment .author {
   padding-bottom: 3px;
}

.comment .date {
   text-align: right;

   color: gray;
   font-style: italic;
   font-size: 0.8em;
}

.comment .text {
   padding-top: 5px;
   padding-bottom: 5px;

   font-size: 1.1em;

   font-family: monospace;
   border-bottom-width: 1px;
   border-bottom-color: gray;
   border-bottom-style: dashed;
}

/* ==========================================================================
FORMS
*/

form {
   font-size: 0.9em;
}

form h1 {
   margin-bottom: 10px;

   font-size: 1.2em;
}

form p {
   text-indent: 0;

   margin-top: 0;
   margin-bottom: 5px;
}

form label {
   display: block;

   margin-bottom: 2px;

   font-weight: bold;
   font-size: 0.8em;
}

input, textarea, select {
   padding: 0.2em;

   width: 100%;

   border-style: dashed;
   border-width: 1px;
   border-color: maroon;

   background-color: #FFEFDF;
}

.submit {
   height: 2em;
   width: 7em;

   border-style: solid;

   background-color: #FFE4CA;

   cursor: pointer;

   color: maroon;
   font-weight:bold;
}

.medium_text {
   height: 200px;
}

.long_text {
   height: 500px;
}

form#login {
   width: 10em;
}

form#friend {
   width: 15em;
}

form#joke {
   width: 100%;
}

form#comment {
   width: 50%;

   margin-left: 20px;
}

form input .category {
   margin-left: 5px;
}

form .title {
   width: 50%;
}

form .name {
   width: 40%;
}

form .url {
   width: 55%;
}

form#friend .name, form#friend .url {
   width: 100%;
}

.checkbox {
   display: inline;

   width: auto;
}

.error {
   color: red;

   font-size: 0.8em;
}