/* -------------------------------------------
project:	Crystal Ball
date:		2008/06/08
------------------------------------------- */

html { font-size: 100.01%; }
body { margin: 0; padding: 0; border-top: 15px solid #e6e6e6; background: #fff; color: #555; font: 62.5%/1.5 Tahoma,Arial,Helvetica,sans-serif; }
textarea, input, select, option, optgroup, button { font: 1em 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.2em; }
ul, ol, dl { margin-bottom: 1.5em; }
p { margin-bottom: 1.25em; }
li *, li p, li li, dt *, dd *, p * { font-size: 1em; }

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

pre { font: 1.1em "Courier New",monospace; 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: #ca0002; text-decoration: none; }
a:hover, a:focus, a:active { color: #000; text-decoration: underline; }

/* HEADINGS
------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; font: normal 2.4em Georgia,Geneva,serif; color: #000; }
h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
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: -10001px; overflow: hidden; height: 0; margin: 0; line-height: 0; }

legend.offset { display: none; }

/* LAYOUT
------------------------------------------- */
#root { }
 #top { position: relative; width: 728px; margin: 0 auto; padding: 10px 0; }
  #logo { width: 139px; height: 28px; margin: 3px 0 0; background: url(../images/logo.png) no-repeat; }
   #logo a { display: block; overflow: hidden; width: 100%; height: 100%; text-indent: -10001px; }
  #top p { position: absolute; right: 10px; top: 50%; margin: -8px 0 0; }
 #header { margin: 0 0 10px; border: 1px dotted #bdbdbd; border-width: 1px 0; background: #fafafa; }
  #header div.inner { position: relative; width: 510px; margin: 0 auto; padding: 104px 30px 20px 188px; background: url(../images/ball.png) 20px 50% no-repeat; }
   #header div.sense { float: right; margin: 0; }
   #header h1 { position: absolute; left: 188px; top: 20px; width: 388px; height: 84px; margin: 0 -300px 5px 0; background: url(../images/header.png) no-repeat; text-indent: -10001em; }
   #header h2 { position: absolute; left: -10001px; top: -10001px; }
   #header p { margin: 0; padding: 0 0 0 3px; }
 #subheader { margin: 0 0 10px; border-bottom: 1px dotted #bdbdbd; text-align: center; }
 #content { margin: 0 0 10px; padding: 0 0 10ppx; border-bottom: 1px dotted #bdbdbd; }
  #content div.inner { width: 728px; margin: 0 auto; }
 #footer { text-align: center; }
  #footer ul { margin: 7px 0 0; padding: 10px 30px; border-top: 10px solid #f3f3f3; word-spacing: 15px; }
   #footer ul li { display: inline; }
    #footer ul li a { word-spacing: 0; }
 
/* ELEMENTS
------------------------------------------- */
#enter { margin: 0; padding: 0 0 10px; }
  #enter div.details { overflow: hidden; width: 100%; margin: 0 0 10px; }
   #enter div.details p { float: left; width: 40%; margin: 0; padding: 0 9% 0 0; }
  #enter p { margin: 0 0 10px; padding: 0 8px 0 0; }
  #enter p.submit { float: right; padding: 0; }
  #enter label,
  #enter span.label { display: block; margin: 0 0 3px; }
  #enter input { width: 100%; padding: 2px; font-size: 1.4em; }
  #enter select { font-size: 1.4em; }
  #enter button { padding: 2px 15px; background: #fff; border: 1px solid #ccc; font-weight: bold; }

#results { overflow: hidden; width: 100%; padding: 15px 0 20px; }
 #results h2 { padding: 0 0 0 2px; }
 #results div.sense { float: left; width: 346px; margin: 0 -350px 0 0; border-right: 4px solid #f3f3f3; }
 #results div.info { margin: 0 0 0 370px; }
  #results div.info h3 { margin: 0 0 3px; }
  #results div.info ul { overflow: hidden; list-style: none; width: 100%; margin: 0 0 15px; padding: 0 0 15px; border-bottom: 1px dotted #bababa; }
   #results div.info ul li { float: right; }
   #results div.info ul li.first { float: left; }
    #results div.info ul li a { padding: 0 20px 0 0; background: url(../images/icon-comment.gif) 100% 70% no-repeat; color: #555; }
    #results div.info ul li.first a { padding: 0 0 0 20px; background: url(../images/icon-question.gif) 0 50% no-repeat; }
  #results div.info div.question { margin: 0 0 15px; }
   #results div.info div.question p.first { position: relative; z-index: 20; margin: 0 0 -7px; padding: 2px 0 2px 45px; background: url(../images/icon-user.gif) 6px 4px no-repeat; }
   #results div.info div.question div.balloon-a { position: relative; z-index: 10; margin: 0; }
  #results div.info div.answer { margin: 0 0 15px; }
   #results div.info div.answer p.first { position: relative; z-index: 20; margin: 0 0 -7px; padding: 2px 0 2px 45px; background: url(../images/icon-ball.gif) 5px 2px no-repeat; }
   #results div.info div.answer div.balloon-b { position: relative; z-index: 10; margin: 0; }
  #results div.info div.innersense { margin: 0 0 10px; padding: 0 0 5px; border-bottom: 1px solid #f3f3f3; }
  #results div.info div.postsense {  }
  
div.balloon-a { width: 358px; margin: 0 0 10px; padding: 0 0 10px; background: url(../images/balloon-a.png) 0 100% no-repeat; }
 div.balloon-a p { margin: 0; padding: 20px 11px 0; background: url(../images/balloon-a.png) no-repeat; font-size: 1.4em; }
 
div.balloon-b { width: 358px; margin: 0 0 10px; padding: 0 0 10px; background: url(../images/balloon-b.png) 0 100% no-repeat; }
 div.balloon-b p { margin: 0; padding: 20px 11px 0; background: url(../images/balloon-b.png) no-repeat; color: #2f2b16; font-size: 2.2em; }