/* -------------------------------------------------------------------------------------------------

It's *strongly* suggested that you don't modify this file.  Instead, load a new stylesheet after
this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

This stylesheet forms part of the Formtastic Rails Plugin
(c) 2008 Justin French

--------------------------------------------------------------------------------------------------*/


/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just form.formtastic
--------------------------------------------------------------------------------------------------*/
form.formtastic, form.formtastic ul, form.formtastic ol, form.formtastic li, form.formtastic fieldset, form.formtastic legend, form.formtastic input, form.formtastic textarea, form.formtastic select, form.formtastic p { margin:0; padding:0; }
form.formtastic fieldset { border:0; }
form.formtastic em, form.formtastic strong { font-style:normal; font-weight:normal; }
form.formtastic ol, form.formtastic ul { list-style:none; }
form.formtastic abbr, form.formtastic acronym { border:0; font-variant:normal; }
form.formtastic input, form.formtastic textarea, form.formtastic select { font-family:inherit; font-size:inherit; font-weight:inherit; }
form.formtastic input, form.formtastic textarea, form.formtastic select { font-size:100%; }
form.formtastic legend { color:#000; }


/* FIELDSETS & LISTS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset { }
form.formtastic fieldset.inputs { }
form.formtastic fieldset.buttons { padding-left:25%; }
form.formtastic fieldset ol { }
form.formtastic fieldset.buttons li { float:left; padding-right:0.5em; }

/* clearfixing the fieldsets */
form.formtastic fieldset { display: inline-block; }
form.formtastic fieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html[xmlns] form.formtastic fieldset { display: block; }
* html form.formtastic fieldset { height: 1%; }


/* INPUT LIs
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li { margin-bottom:1.5em; }

/* clearfixing the li's */
form.formtastic fieldset ol li { display: inline-block; }
form.formtastic fieldset ol li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html[xmlns] form.formtastic fieldset ol li { display: block; }
* html form.formtastic fieldset ol li { height: 1%; }

form.formtastic fieldset ol li.required { }
form.formtastic fieldset ol li.optional { }
form.formtastic fieldset ol li.error { }
  

/* LABELS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li label { display:block; width:25%; float:left; padding-top:.2em; }
form.formtastic fieldset ol li li label { line-height:100%; padding-top:0; }
form.formtastic fieldset ol li li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;}


/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li fieldset { position:relative; }
form.formtastic fieldset ol li fieldset legend { position:absolute; width:25%; padding-top:0.1em; }
form.formtastic fieldset ol li fieldset legend span { position:absolute; }
form.formtastic fieldset ol li fieldset legend.label label { position:absolute; }
form.formtastic fieldset ol li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; }
form.formtastic fieldset ol li fieldset ol li { padding:0; border:0; }


/* INLINE HINTS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li p.inline-hints { color:#666; margin:0.5em 0 0 25%; }


/* INLINE ERRORS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; }
form.formtastic fieldset ol li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; }
form.formtastic fieldset ol li ul.errors li { padding:0; border:none; display:list-item; }


/* STRING & NUMERIC OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.string input { width:74%; }
form.formtastic fieldset ol li.password input { width:74%; }
form.formtastic fieldset ol li.numeric input { width:74%; }


/* TEXTAREA OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.text textarea { width:74%; }


/* HIDDEN OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.hidden { display:none; }


/* BOOLEAN OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.boolean label { padding-left:25%; width:auto; }
form.formtastic fieldset ol li.boolean label input { margin:0 0.5em 0 0.2em; }


/* RADIO OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.radio { }
form.formtastic fieldset ol li.radio fieldset ol { margin-bottom:-0.6em; }
form.formtastic fieldset ol li.radio fieldset ol li { margin:0.1em 0 0.5em 0; }
form.formtastic fieldset ol li.radio fieldset ol li label { float:none; width:100%; }
form.formtastic fieldset ol li.radio fieldset ol li label input { margin-right:0.2em; }


/* CHECK BOXES (COLLECTION) OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.check_boxes { }
form.formtastic fieldset ol li.check_boxes fieldset ol { margin-bottom:-0.6em; }
form.formtastic fieldset ol li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; }
form.formtastic fieldset ol li.check_boxes fieldset ol li label { float:none; width:100%; }
form.formtastic fieldset ol li.check_boxes fieldset ol li label input { margin-right:0.2em; }



/* DATE & TIME OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.date fieldset ol li,
form.formtastic fieldset ol li.time fieldset ol li,
form.formtastic fieldset ol li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; }

form.formtastic fieldset ol li.date fieldset ol li label,
form.formtastic fieldset ol li.time fieldset ol li label,
form.formtastic fieldset ol li.datetime fieldset ol li label { display:none; }

form.formtastic fieldset ol li.date fieldset ol li label input, 
form.formtastic fieldset ol li.time fieldset ol li label input, 
form.formtastic fieldset ol li.datetime fieldset ol li label input { display:inline; margin:0; padding:0;  }


/* -------------------------------------------------------------------------------------------------

Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

For example, to make the inline hint paragraphs a little darker in color than the standard #666:

form.formtastic fieldset ol li p.inline-hints { color:#333; }

--------------------------------------------------------------------------------------------------*/
form.formtastic legend { color: inherit; }
form.formtastic fieldset { margin: 10px; }

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0pr2
*/
/* reset */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/* fonts */
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
body{font-family:"Myriad Pro","Segoe UI",Helvetica, Arial, sans-serif;}
/* **************** CONTENT OBJECTS ***************** */
/* ====== Default spacing ====== */
h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote {padding:10px;}
h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
pre{margin: 10px;}
table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}
/* ====== Elements ====== */
img{display:block;}
em{font-style: italic;}
strong{font-weight:bold;}
hr{border: 5px solid #e2e2e2; border-width: 0 0 5px 0; margin: 20px 10px 10px 10px;}
code{color:#0B8C8F;}
/* ====== Headings ====== */
/* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#AE0345;}
h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#AE0345;}
h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#DF2B72;}
h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #333;}
h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#AE0345;}
h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}
/* if additional headings are needed they should be created via additional classes, never via location dependant styling */
.category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}
.category a{color: #333;}
.important a{font-weight:bold;}
/* links */
a { color: #036; font-weight:bold;text-decoration: none }
a:focus, a:hover { text-decoration: underline }
a:visited { color:#005a9c; }
/* ====== Lists ======*/
/* numbered list */
ol.simpleList li{list-style-type: decimal; margin-left:40px;}
/* standard list */
ul.simpleList li{list-style-type:disc; margin-left:40px;}
/* ====== Tables ====== */
.data{padding: 20px; position:relative; zoom:1;vertical-align: top;border-right:solid 1px transparent;/* border fixes a FF2 bug which causes the data table to overlay its borders*/}
.data table {width:100%;border:1px solid #AE0345;}
th, td{vertical-align:top;border:1px solid #fff;}
.txtC, .data .txtC td, .data .txtC th{text-align:center;}
.txtL, .data .txtL td, .data .txtL th{text-align:left;}
.txtR, .data .txtR td, .data .txtR th{text-align:right;}
.txtT, .data .txtT td, .data .txtT th{vertical-align:top;}
.txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}
.txtM, .data .txtM td, .data .txtM th{vertical-align:middle;}
.data th,.data td{padding:3px 20px}
.data thead tr{background-color: #fff0f8;}
.data th{color: #000; font-weight:bold}
/* specification table - extends data table */
.spec{padding:10px;}
.spec table{border-top: 1px solid #e2e2e2; border-bottom-color:#fff; border-left:none; border-right:none;}
.spec th, .spec td{border:1px solid #e2e2e2; border-width: 1px 0; padding-left:0;}
.spec .odd, .spec .even{background-color: #fff;}
/* ====== blockquote ====== */
cite{display:block; text-align:right; padding-top: 10px;}
/* ====== callout ====== */
.callout{font-size:189%;color:#999999; font-style:italic;}
.callout cite{display:block; text-align:right;padding-top: 30px; font-size:69.25%;}
.callout span.quot{font-size: 500%; vertical-align: sub; color:#e2e2e2; line-height:25px; font-weight:bold;}
.callout span.quotLast{vertical-align:middle;}
/* ====== image treatments (get more from jason santa maria) ====== */
.caption{font-size:13px; color:#666666; font-style:italic;padding-top:0;}
/* will need to either
1. find a way to capture the width of the caption in the width of the image or flash
2. Set some default widths, mby use flickr widths?
*/
/* ====== media ====== */
.media{overflow:hidden; overflow:visible; zoom:1;margin:10px;}
.media .img{float:left;margin-right: 10px;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}
/* ====== special formatting classes ====== */
.detail{color: #777; font-size:11px;display:block;}
.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.line{*zoom:1;}
.unit{float:left;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}

#facebox .popup table { width: 900px; height: 500px;}
#facebox .content { height: 560px; padding-bottom: 0;}
#facebox .body { width: 782px;}
#facebox td { border: 0 none;}
#facebox iframe { width: 100%; height: 100%; border: 0 none;}

.grid_list li {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline;
  display: inline-block;
  vertical-align: top;
  word-wrap: break-word;
  list-style: none; }

* html .grid_list li {
  display: inline; }

* + html .grid_list li {
  display: inline; }

.grid_list li > * {
  display: table;
  table-layout: fixed;
  overflow: hidden; }

.hint {
  font-size: 80%; }

.accessible_message {
  visibility: hidden;
  height: 1px;
  margin: 0;
  padding: 0; }

a {
  font-weight: normal; }
  a:hover {
    text-decoration: none; }

html {
  background: black;
  color: white; }
  html a, html a:visited {
    color: white; }

body {
  font-size: 100%;
  border-top: 2px solid #ffee66; }

.bright {
  color: #ffcc00; }

.dark {
  color: #000033; }

.structured {
  width: 970px;
  margin: 0px auto;
  position: relative; }

.welcome {
  background: #ffeea8 url(/images/backgrounds/sunburst.jpg) no-repeat center bottom;
  color: black;
  padding: 20px 0; }
  .welcome a, .welcome a:visited {
    color: #0099ee; }

.content {
  background: white;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  -khtml-border-radius: 12px;
  border-radius: 12px;
  color: #333333;
  padding-bottom: 20px;
  margin-top: 30px; }

.unit *, .unit form.formtastic {
  margin-left: 10px;
  margin-right: 10px; }

.unit * * {
  margin: 0; }

.header {
  background: black;
  border-bottom: 1px solid #0099ee;
  color: white;
  padding-bottom: 5px; }
  .header * {
    color: white; }
  .header h1 {
    font-size: 140%; }

.header_links {
  position: absolute;
  right: 0;
  top: 10px; }
  .header_links a, .header_links a:visited {
    color: white; }

.foot {
  color: #cccccc;
  font-size: 90%; }

h1 {
  color: white;
  font-weight: normal; }

h2 {
  color: purple; }

ul.markers li {
  list-style: disc outside none;
  margin-left: 15px; }

li {
  line-height: 120%; }

ul.grouped {
  overflow: hidden; }
  ul.grouped li {
    width: 45%;
    float: left; }

.seller {
  border: 1px solid #cccccc;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  -khtml-border-radius: 12px;
  border-radius: 12px;
  background: white;
  background: rgba(255, 255, 255, 0.7);
  color: black;
  padding: 20px; }

.sample_screen {
  text-align: center; }
  .sample_screen img {
    border: 1px solid #444444;
    display: inline;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg); }

.reason_links {
  padding-top: 20px; }

.detail_tab {
  background: black;
  color: white;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  -khtml-border-radius: 12px;
  border-radius: 12px;
  margin-top: -33px;
  padding-left: 10px; }

a.interesting_link {
  display: block;
  background: #660077;
  color: white;
  width: 10em;
  margin: 10px auto;
  padding: 10px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  -khtml-border-radius: 12px;
  border-radius: 12px;
  text-align: center;
  font-weight: bold; }
  a.interesting_link:visited, a.interesting_link:visited:hover {
    color: white; }

a.pricing_link {
  background: #0099ee; }

.headline {
  color: black;
  line-height: 1;
  font-size: 3em;
  font-weight: bold;
  text-transform: capitalize;
  text-shadow: white 1px 1px 1px;
  -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Color=white,Direction=135,Strength=1); }

input.readable {
  background-color: #222222;
  color: white;
  border: 0px;
  border-bottom: 1px solid #cccccc;
  width: 10em; }

input.long {
  width: 14em; }

input.readable:focus {
  color: black;
  background-color: #eeeeee; }

.plan_list, .plan_samples {
  padding: 20px 0; }

.plan_tour {
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  padding-bottom: 10px;
  overflow: auto;
  background: black; }
  .plan_tour li {
    width: 250px;
    padding: 20px; }

.bright_box_list li {
  color: #ffee99;
  padding: 0;
  margin-bottom: 10px;
  margin-right: 50px;
  width: 240px; }
  .bright_box_list li img {
    margin-bottom: 10px; }

.plan_list {
  color: white; }

.plan_samples {
  color: #ffee99;
  background: black;
  background: gradient(linear, left top, left bottom, from(black), to(#444444), color_stop(70%, black, 80%, #444444));
  background: -webkit-gradient(linear, left top, left bottom, from(black), to(#444444));
  background: -webkit-gradient(linear, left top, left bottom, from(black), to(#444444), color_stop(70%, black, 80%, #444444));
  background: -moz-linear-gradient(left top, left bottom, from(black), to(#444444), color_stop(70%, black, 80%, #444444)); }

.plan_box {
  position: relative;
  padding: 0 0 10px;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.7);
  color: black;
  margin: 20px 0 20px 0;
  border: 1px solid black; }

.plan_box * {
  margin-left: 10px;
  margin-right: 10px; }

.plan_box * * {
  margin-left: 0;
  margin-right: 0; }

.current_plan {
  background: black;
  color: white;
  border-width: 1px;
  border-style: solid;
  border-color: #0099ee; }
  .current_plan * {
    color: white; }

.price_display {
  font-family: Georgia, Times, serif;
  color: #0099ee;
  padding: 10px;
  margin: 0;
  top: 0;
  right: 0;
  text-align: center; }

.box_header {
  background: white;
  border-bottom: 1px solid #dddddd;
  text-align: center;
  color: black;
  margin: 0;
  padding: 0;
  line-height: 2; }
  .box_header a, .box_header a:visited {
    background: white;
    display: block;
    padding: 6px;
    margin: 0;
    color: black; }

.main {
  min-height: 300px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  height: auto; }

.breaker {
  background: #002266;
  border-top: 1px solid #ffcc00; }

.page_like {
  background: white;
  color: black;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  margin: 20px auto; }

.attention {
  text-align: center; }

.ui_sample {
  margin: 20px auto;
  width: auto;
  text-align: center; }
  .ui_sample img {
    display: inline;
    border: 1px solid #666666; }

*:target {
  outline-style: solid;
  outline-width: 5px;
  outline-color: #0099ee;
  outline-color: rgba(202, 202, 255, 0.7); }

.backbone_service {
  width: 41%;
  float: left;
  text-align: center;
  height: 80px;
  vertical-align: middle; }
  .backbone_service img {
    display: inline; }
  .backbone_service div.AuthorizeNetSeal {
    float: left;
    width: 180px; }