/* #CSS */

/*

  "Each piece is an art piece."

  Sematic Html.

    <title>
      Semantic Html
    </title>

  Functional CSS.

    title onclick {
       // SASS or LESS & JQuery
    }

*/

/* BASE TAGS */

/* layout */

body {margin:0; padding:0; position:relative; }
 div {margin:0; padding:0;}
  h1 {margin:5px 0;}
  li {padding:3px 0;}
 pre {margin:10px 0;}
 pre code {padding:10px 10px;}
 img {border:none;}
  td {vertical-align: top;}

/* fonts */

html { font-family: helvetica, sans-serif; font-size: 100%; }
body { background: url(../images/ring_side.jpg) top 0px no-repeat #311; }
 pre { font-family: monospace; }
  td { text-align: left; }
   p { text-align: justify; font-size: 100%; font-weight: bold; line-height: 170%; }
  li { font-size: 80%; font-weight: bold; line-height: 120%; }
   a { text-decoration: none; }
   a:hover { text-decoration: underline; }

/* color */

body { color: #FFFFFF;  }
  h1 { }
   a { color: #DD0044; }
 pre { color: white; }

/* USER TAGS */

/* header */
#header { width: 730px; margin: 0 auto; padding: 0; }
#header .title { padding: 0; font-size: 1.3em; }
#header .title h1 { padding: 0; margin: 0 0 0 -5px; text-shadow: 3px 3px #955; font-size: 96px; font-weight: bold; }
#header .title h2 { padding: 0; margin: 20px 0; font-size: 1.4em; text-shadow: 1px 1px #888; }
#header .logo img { padding: 0; margin: 20px 20px 20px -200px; border: 2px solid #ccc; }

#header .title h1 { color: #EEE; }
#header .title h2 { color: #DDD; }

#header table td { vertical-align: bottom; }

/* #main */
#main { width: 730px; margin: 0 auto; padding: 10px 0; background: url(../images/black.png); border-radius: 16px; }
#main a { font-size: 100%; }
#main a:hover { text-decoration: underline; }
#main h2 { font-size: 2em; font-weight: bold; }
#main h3 { font-style: italic;}

/* #nav */
#nav { padding: 10px 20px; text-align: left; margin: 0; }
#nav a { font-family: sans-serif; font-weight: bold; text-decoration: none; font-size: 1.2em; }
#nav a:hover { text-decoration: underline; }
#nav a:active { text-decoration: underline; }

#nav { background: transparent; }
#nav a { color: white; }

#description { font-size: 2em; padding: 40px 20px; text-align: justify; font-family: times; }
#description { color: #888; background: transparent; }

/* readme */
#readme { background: #ccc; color: #444; margin: 0; padding: 20px; }
#readme { font-family: sans-serif; font-weight: normal; line-height: 160%; }
#readme a { color: #057D14; }
#readme a:hover { }
#readme p { }
#readme h1 { color: #333; }
#readme h2 { border-color: #85FD93; color: #333; font-size: 1.4em; }
#readme h3 { border-color: #85FD93; }
#readme li { padding: 0px 20px; margin: 10px; }
#readme li p { padding: 0px; margin: 0px; }

/* siderap */
#siderap { border: 0px solid #cc0000; height: 230px; margin: 0; padding: 20px; }
#siderap { color: white; background: #433; }
#siderap { font-size: 1.3em; }
#siderap img { margin-right: 0; }
#siderap .quote { padding: 20px; }
#siderap p { font-style: italic; margin: 0; padding: 0; }
#siderap .quote { margin-left: 190px; background: #cc0000; }

#final_word { padding: 40px 20px 10px 20px; text-align: center; font-family: times; font-size: 1.4em; }

/* #footer */
#footer { background: black; width: 730px; }
#footer .advert { margin: 30px auto 0 auto; }
#footer .copyright { margin: 5px auto; padding: 10px 10px; width: 720px; }
#footer .copyright { font: bold .8em sans-serif; }
#footer .copyright { color: #555; }