/* -------------------------------------------
project:	Markup Generator
author:		Michał Stempień <info(a)xms.pl>
date:		2008/02/28
------------------------------------------- */

html { min-height: 100%; margin-bottom: 1px; font-size: 100.01%; }
body { margin: 0; padding: 0; background: #fafafa; color: #555; font: 62.5%/1.3 Tahoma,Arial,Helvetica,sans-serif; }
textarea, input, select, option, optgroup, button, code { font: 1em/1.3 Tahoma,Arial,Helvetica,sans-serif; }

/* RE-SETS
------------------------------------------- */
* { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }

li, dt, dd, p, th, td, caption { font-size: 1.1em; }
ul, ol, dl { margin-bottom: 1.5em; }
p { margin-bottom: 1.25em; }
li *, dt *, dd *, p * { font-size: 1em; }

fieldset, img { border: none; }
button { overflow: visible; cursor: pointer; }
legend { display: none; }

pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }

a { color: #369; text-decoration: none; }
a:hover, a:focus, a:active { color: #000; text-decoration: underline; }

/* HEADINGS
------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; font: bold 2.4em/1.2 Tahoma,Arial,Helvetica,sans-serif; color: #ab3a3a; }
h1 { font-size: 2.2em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }

/* HELPERS
------------------------------------------- */
.wrapper { width: 100%; overflow: hidden; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.offset { position: absolute; left: -10001em; overflow: hidden; height: 0; margin: 0; line-height: 0; }

legend.offset { display: none; }

/* LAYOUT
------------------------------------------- */
#root { width: 750px; margin: 0 auto; padding: 10px 0 0; }
 #top { position: relative; height: 70px; margin: 0 0 10px; }
  #top h1 { position: absolute; left: 20px; top: 14px; width: 233px; height: 44px; background: url(../images/logo.png) no-repeat; }
   #top h1 a { display: block; overflow: hidden; width: 100%; height: 100%; text-indent: -10001em; }
  #top h2 { position: absolute; right: 20px; top: 12px; height: 46px; padding: 0 158px 0 120px; background: url(../images/sponsor.png) 0 50% no-repeat; text-indent: -10001em; }
   #top h2 a { position: absolute; right: 0; top: 0; overflow: hidden; width: 158px; height: 46px; background: url(../images/xhtmlizers.png) no-repeat; }
  #top p { position: absolute; left: 265px; top: 34px; }
  #top div.sense { position: absolute; right: 20px; top: 5px; }
 #intro {  }
  #about { width: 345px; }
   #about h3 { overflow: hidden; height: 22px; background: url(../images/headers.png) no-repeat; text-indent: -10001em; }
  #settings { }
   #settings h3 { overflow: hidden; height: 22px; background: url(../images/headers.png) 0 -25px no-repeat; text-indent: -10001em; }
   #settings p { margin: 0 0 8px; line-height: 16px; }
    #settings p label,
    #settings p span.label { float: left; width: 100px; margin: 2px 0 0; }
    #settings p.tickit label { float: none; width: auto; padding: 0 10px 0 0; vertical-align: middle; }
    #settings p input { vertical-align: middle; }
    #settings p.tickit input { margin: 0 5px 0 0; vertical-align: middle; }
    #settings p select { width: 160px; margin: 0 0 0 -3px; vertical-align: middle; }
 #extra { }
  #extra h3 { overflow: hidden; height: 22px; background: url(../images/headers.png) 0 -100px no-repeat; text-indent: -10001em; }
  #extra #xhtml-before { height: 180px; }
  #extra #xhtml-after { height: 100px; }
  #extra #css-before { height: 180px; }
  #extra #css-after { height: 100px; }
 #main {  }
  #structure {  }
  #structure.full { width: 100%; }
    #structure h3 label { overflow: hidden; display: block; width: 150px; height: 22px; background: url(../images/headers.png) 0 -50px no-repeat; text-indent: -10001em; }
   #structure p.example { float: right; margin: -30px 0 0; padding: 3px 8px; background: #e7f0f9; color: #369; font-size: 0.9em; line-height: 1; text-transform: uppercase; cursor: pointer; }
   #structure p.example:hover { background: #369; color: #fff; text-decoration: none; }
   #structure p.insert { overflow: hidden; position: relative; margin: 0; padding: 0 8px 0 0; }
   * html #structure p.insert { height: 1%; }
    #structure p.insert textarea { float: left; height: 400px; }
    #structure p.insert span { position: absolute; right: 0; top: 0; width: 5px; height: 400px; border: 1px solid #b0b0b0; border-width: 1px 1px 1px 0; background: #f0f0e8 url(../images/arrows.gif) 0 50% no-repeat; text-indent: -10001em; cursor: pointer; }
    * html #structure p.insert span { right: 1px; }
    #structure.full p.insert span { background-position: -5px 50%; }
    * html #structure.full p.insert span { right: 2px; }
    #structure p.insert span:hover { background-color: #c1d2ee; }
   #structure button { display: block; width: 312px; height: 36px; margin: 10px auto; padding: 0; border: none; background: url(../images/button-a.png) no-repeat; text-indent: -10001em; }
  #legend {  }
   #legend h3 { overflow: hidden; height: 22px; background: url(../images/headers.png) 0 -75px no-repeat; text-indent: -10001em; }
   #legend h4 { margin: 15px 0 0; color: #b38428; font: normal 1.8em "Trebuchet MS",sans-serif; text-align: center; }
   #legend h5 { margin: 0 0 15px; color: #000; font: normal 1.1em Tahoma,sans-serif; text-align: center; }
    #legend h5 span { display: block; margin: -3px 0 -1px; color: #ccc; }
   #legend p.code { padding: 0 0 0 12px; border-left: 2px solid #616161; }
 #result { position: relative; }
  #result h3 { overflow: hidden; height: 22px; background: url(../images/headers.png) 0 -125px no-repeat; text-indent: -10001em; }
  #result ul.switch { position: absolute; top: 15px; right: 20px; list-style: none; margin: 0; padding: 0; }
   #result ul.switch li { display: inline; float: left; margin: 0 0 0 5px; font-size: 1.4em; font-weight: bold; text-transform: uppercase; }
    #result ul.switch li a { float: left; padding: 3px 10px; text-decoration: none; }
    #result ul.switch li a:hover { background: #e7f0f9; color: #369; }
    #result ul.switch li a.active { background: #369 !important; color: #fff !important; }
    #result ul.switch li.edit a { color: #ab3a3a; }
    #result ul.switch li.edit a:hover { background: #ffeaea; color: #ab3a3a; }
    #result ul.switch li.edit a.active { background: #ab3a3a !important; color: #fff !important; }
  #result div.codes { position: relative; overflow: hidden; width: 100%; }
   #result div.codes div.wrap {  }
    #result div.codes div.wrap div.code { padding: 0 0 10px; }
     #result div.codes div.wrap div.code p { position: relative; width: 100%; margin: 0; text-align: right; }
      #result div.codes div.wrap div.code p textarea { width: 708px; margin: 0 0 7px; }
      #result div.codes div.wrap div.code p span { position: absolute; right: 0; bottom: -16px; margin: 0 10px 0 0; padding: 3px 8px; background: #e7f0f9; color: #369; font-size: 0.9em; line-height: 1; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
      #result div.codes div.wrap div.code p span:hover { background: #369; color: #fff; text-decoration: none; }
     #result div.codes div.wrap div.code p.submit { }
      #result div.codes div.wrap div.code p button { float: left; overflow: visible; margin: 0 0 0 5px; padding: 3px 8px; border: none; background: #eee; color: #333; font-size: 0.9em; line-height: 1; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
	  #result div.codes div.wrap div.code p button:hover { background: #333; color: #fff; }
 #sense { width: 728px; padding-left: 11px; padding-right: 11px; }
 #footer { overflow: hidden; width: 100%; padding: 0 0 15px; }
  #footer p { display: inline; float: left; margin: 3px 0 0 20px; line-height: 1; }
   #footer p a { color: #333; }
  #footer ul { display: inline; float: right; list-style: none; margin: 0 20px 0 0; padding: 0; }
   #footer ul li { display: inline; float: left; margin: 0 0 0 15px; line-height: 1; }
    #footer ul li a { float: left; padding: 2px 0 2px 23px; background: url(../images/bookmarks.png) no-repeat; color: #333; }
    #footer ul li.digg a { background-position: 0 1px; }
    #footer ul li.delicious a { background-position: 0 -29px; }
    #footer ul li.rss a { background-position: 0 -59px; }
 
div.box { overflow: hidden; width: 710px; margin: 0 0 10px; padding: 15px 20px 8px; border: 1px solid #cfcfcf; border-width: 1px 1px 2px; background: #fff; }
 div.box div.primary { float: left; width: 365px; }
 div.box div.secondary { float: right; width: 320px; }
   
/* SKIP LINKS
------------------------------------------- */
#skip-links { position: absolute; top: 0; left: -10001px; list-style: none; margin: 0; padding: 0; }
 #skip-links li a:focus, #skip-links li a:active { display: block; position: absolute; left: 10001px; top: 0; z-index: 10001; width: 750px; padding: 2px 0; background: #579; color: #fff; font-size: 1.4em; text-align: center; }
   
/* ELEMENTS
------------------------------------------- */
textarea { width: 100%; height: 320px; margin: 0; padding: 0; border: 1px solid #b0b0b0; background: #fcfcfc; font: 1.2em "Courier New",sans-serif; }

/* HACKS
------------------------------------------- */
@media all and (min-width: 0px){ 
 #structure p.insert span { right: 2px; }
}