html {
    height: 100%;
}

body {
    height: 100%;
    font-family: 'Lucida Grande','Lucida Sans Unicode',Arial,Helvetica,Verdana,sans-serif;
    font-size: 13px;
    margin: 0 auto;
    padding: 0;    
    background-color: #F1F1F1;
}

h1 {
    font-size: 30px;
}

h2 {
    clear: both;
    font-size: 22px;
    font-weight: 900;
    color: #882222;
    line-height: 24px;
    margin-top: 20px;
    margin-left: 6px;
}

h3 {
    font-weight: 900;
    line-height: 24px;
    font-size: 14px;
    color: gray;
}

h4 {
    margin-top: 20px;
}

a {
    font-size: 10px;
    color: #aaaaaa;
}

a img {
    border: none;
}

.clear {
    clear: both;
    height: 0;
    overflow: hidden;
}

#wrapper1 {
    height: 100%;
}

#container_shadow {
    width: 962px;
    margin: 0px auto;
    height: auto;
    background-color: #cccccc;
    border-right: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

#container {
    width: 960px;
    height: 100%;
    margin: 0px auto;
    padding: 0px;
}

#top_separator, #bottom_separator {
    width: 964px;
    position: relative;
    margin: 0px auto;
    height: 24px;
}

#top_separator {
    background: url("../images/top_separator_2.gif");
}

#bottom_separator {
    height: 10px;
    border-top: 1px solid #cccccc;
}

.separator_white {
    float: left;
    background-color: white;
    border-bottom: solid 1px #cccccc;
    width: 960px;
    height: 10px;
    margin: 0px auto;
}

.separator {
    background-color: #303030;
    width: 960px;
    height: 15px;
    margin: 0px auto;
}

#flash_notice, #flash_error {
    padding: 5px 8px;
    margin: 0px 30px 10px;
}

#flash_notice {
    background-color: #CFC;
    border: solid 1px #6C6;
}

#flash_error {
    background-color: #FCC;
    border: solid 1px #C66;
}

.fieldWithErrors {
    display: inline;
}

#errorExplanation {
    width: 400px;
    border: 2px solid #CF0000;
    padding: 0px 0px 12px;

    margin-bottom: 20px;
    background-color: #f0f0f0;
}

#errorExplanation h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: 0;
    background-color: #c00;
    color: #fff;
}

#errorExplanation p {
    color: #333;
    margin-bottom: 0;
    padding: 8px;
}

#errorExplanation ul {
    margin: 2px 24px;
}

#errorExplanation ul li {
    font-size: 12px;
    list-style: disc;
}

input#user_openid_identifier, input#user_session_openid_identifier {
    background: url(http://openid.net/images/login-bg.gif) no-repeat;
    background-color: #fff;
    background-position: 0 50%;
    width: 199px;
    color: #000;
    padding-left: 18px;
}

/* CSS for tables */

table {
    width: 100%;
    border-collapse: collapse;
    border-color: #05055c;
}



#content {
    width: 960px;
    min-height: 100%;
    height: auto;
    line-height: 20px;
    background: white;
    margin: 0 auto;
    background-color: white;
}

#col1 {
    width: 700px;
    margin-top: 0;
    margin-bottom: 0;
    float: left;
    padding: 0px 0px 10px 10px;
    color: #444;
}

#col1 h4 {
    clear: both;
}

h2.toc {
    margin-top: 10px;
    margin-bottom: 0px;
}

p.toc {
    font-size: 10px;
    margin-bottom: 30px;
}

#screenshots {    
    margin: 0px auto;
    text-align: center;
}

#screenshot_tab {
    margin: 0px auto;
}

.info_block, .promo_block, .account_block, .brick_block {
    clear: both;
}

.info_block, .promo_block, .account_block {
    padding-top: 10px;
    border: solid 1px #e8e8e1;
    font-size: 12px;
    color: #515151;
}

.info_block table {
    margin-left: 10px;
    text-align: center;
}

.promo_block {
    padding-top: 0px;
    padding-bottom: 10px;
}

.brick_block {
    margin-bottom: 0px;
    padding-bottom: 0px;
    background-color: white;
}

.brick_block {
    overflow: hidden;
}

.info_block p, .promo_block p {
    margin: 10px;
    margin-top: 0px;
    font-size: 12px;
    color: #444;
}

.account_block a {
    font-size: 11px;
}

.account_block p, .contact_block p {
    margin: 10px;
}

#contact_overview h4 {
    margin-top: 0px;
    margin-bottom: 10px;
}

#contact_overview p {
    margin-bottom: 20px;
}

.info_block h3, .promo_block h3, .account_block h3 {
    color: #595524;
    text-align: center;
    margin-top: 0px;
    margin-left: 10px;
    padding-bottom: 0px;
}

.info_block h4, .promo_block h4, .account_block h4 {
    margin-left: 10px;
    margin-top: 10px;
}


.info_block h4, .case_study_block h4 {
    color: #882222;
    font-size: 13px;
}

.promo_brick h4, .contact_block h4, .promo_brick_long h4, .promo_brick_short h4, .promo_brick_wide h4, .text_brick h4 {
    margin: 0px;
    color: #882222;
}

.account_block h3 {
    text-align: left;
}

.account_block ul {
    list-style: none;
}

.account_block form {
    padding: 10px;
}

.info_block img, .promo_block img {
    margin-left: 10px;
}

.product_icon {
    float: left;
    margin-top: 18px;
    margin-right: 5px;
    margin-bottom: 15px;
}

.promo_list_img {
    clear: both;
    float: left;
    padding: 5px 10px 10px 10px;
}

.promo_list_img img {
    margin-left: 0px;
}

.promo_list_text {
    margin-bottom: 10px;
}

.promo_list_text p {
    display: block;
    margin-left: 10px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #515151;
    padding-left: 60px;
}

#col2 {
    width: 200px;
    height: 100%;
    float: left;
    padding: 0px 10px 0px 8px;
    margin-top: 0px;
    margin-bottom: 50px;
    margin-right: 10px;
}

/* product navigation */
#product_header {
    margin: 0 auto;
}

#product_header ul {
    margin: 0 auto;
    list-style: none;
    height: 26px;
    margin-bottom: 0px;
}

#product_nav ul li {
    float: left;
}

#product_logo {
    width: 120px;
    float: left;
}

div.product_logo a, div.product_logo img {
    padding: 10px;
    float: left;
    margin-top: 15px;
}

div.product_logo a {
    padding-top: 16px;
}

div.product_logo p {
    clear: both;
}

#product_logo h3 {
    float: left;
    padding: 0;
    margin: 0;
}

.product_topic_div {
    clear: both;
    margin-top: 20px;
}

.team_topic_div {
    margin-top: 20px;
}

li.team_nav_item a.team_nav_link {
    color: #882222;
    font-size: 12px;
}

/* brick style */
.brick {
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 0px 0px 10px 0px;
    width: 232px;
    display: block;
    background: url("../images/g3.gif") top no-repeat;
    background-color: #f7f7f0;
    border: solid 1px #e8e8e1;
}

.brick h3 {
    color: #882222;
    font-weight: normal;
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 6px;

}

.brick ul {
    list-style: none;
    padding: 0px;
    margin-top: 10px;
    margin-left: 10px;
    width: 232px;
}

.brick ul li {
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 0px;
}

.brick p {
    color: #717171;
    margin: 6px 6px 10px;
}

.brick ul li a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    color: #717171;
    margin: 6px 6px 10px;
}

.brick ul li a img {
    border: none;
    padding: 5px;
    vertical-align: middle;
}

#col1 .account_fields {
    float: left;
}

#account_avatar {
    margin: 20px;
    height: 400px;
    width: 150px;
    float: left;
}

#account_avatar img {
    position: relative;
    left: 100px;
    top: 120px;
}

.info_table {
    margin-left: 30px;
    border-style: none;
    width: 400px;;
}

.info_table th {
    color: #14badb;
    text-align: left;
}

.info_table td {
    border-style: none;
}

#total_price {
    text-align: right;
    font-size: 13px;
    font-weight: bold;
}

/* Styles for the product table */
.cart_items, .cart_buttons {
    display: block;
    width: 100%;
    margin-top: 20px;
}

.cart_buttons {
    text-align: right;
    margin-left: -10px;
}


.cancel_link, .cancel_link:visited {
    font-size: 11px;
    font-weight: 800;
    color: #882222;
}

.empty_cart_link, .empty_cart_link:visited {
    margin-left: 12px;
    color: black;
}

.cart_items table, table.subscription_table {
    width: 680px;
    background-color: #cccccc;
    border: 1px #888888 solid;
    margin-bottom: 20px;
    border-collapse: separate;
}

table.subscription_table {
    margin-left: 10px;
    width: 427px;
}

.cart_items table tr th {
    background-color: #f7f7f0;
    color: black;
    border-bottom: 1px dotted gray;
}

.odd {
    background-color: #F4F0F7;
    color: black;
    border-bottom: 1px dotted gray;
}

.even {
    background-color: #f7f7f0;
    color: black;
}

.line_item, .license {
    height: 60px;
    width: 580px;
    text-align: center;
}

.cart_items table tr.total {
    font-weight: 600;
    color: black;
    border-top: 1px dotted gray;
}

.payment_description p {
    font-size: 10px;
}

#product_table {
    font-size: 14px;
    border-style: none;
    width: 600px;
}

#product_table td {
    border-style: none;
    font-size: 12px;
    vertical-align: top;
    text-indent: 8px;
    padding: 10px 0px 0px 0px;
}

#product_table td a {
    font-size: 12px;
}

.product_table_header {
    text-align: left;
    text-indent: 8px;
    margin-bottom: 20px;
}

#product_table thead, tfoot {
    background-color: #99ccff;
    border: solid 1px #060606;
    width: 600px;
}

.product_row {
    height: 200px;
    background-color: #cee6e9;
    border-right-style: groove;
    border-left-style: groove;
    border-bottom-style: groove;
    border-top-style: groove;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
}

.product_title {
    font-weight: bold;
    font-variant: small-caps;
}

#product_block ul {
    margin: 0px auto;
    padding: 10px 10px 10px 10px;
    list-style: none;
    width: 400px;
    position: relative;
}

#product_block ul li {
    margin-bottom: 10px;
    width: 400px;
}

#product_block ul li a {
    color: #060606;
}

.trial_expiry {
    font-weight: bold;
    font-variant: small-caps;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
}

/* purchase block */
#purchase {
    height: 40px;
    text-align: right;
    position: relative;
    bottom: 10px;
}

#purchase a {
    display: block;
    margin-top: 20px;
}

#confirm_purchase {
    height: 40px;
    text-align: right;
}

#confirm_purchase a {
    display: block;
    margin-top: 20px;
}

.confirm_buttons {
    float: right;
    padding: 10px 10px 10px 10px;
}

.list_no_bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

a.product_link, a.product_link:visited {
    font-size: 13px;
    text-decoration: none;
    color: #882222;
}

a.product_link:hover {
    text-decoration: underline;
}

ul.tabbed_images {
    list-style: none;
}

ul.tabbed_images li {
    float: left;
    margin-right: 7px;
    margin-bottom: 30px;
    text-align:center;
    padding: 2px;
    border: 1px solid #ccc;
}

ul.tabbed_images li.tab a {
    display: block;
    height: 20px;
    padding: 0 6px 0 6px;
    background-color: #ffffff;
    color: #666;
    width:80px;
}

img.screenshot {
    margin: 0 auto;
    padding: 2px;
    border: 1px solid #ccc;
}

#blog_post_brick ul {
    height: 350px;
    font-size: 10px;
}

#blog_post_brick a {
    color: #060606;
    font-size: 11px;
}

#blog_post_brick h3 {
    color: #882222;
}

#password_reset {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#password_reset li {
    padding: 10px;
}


.product_table_link, a.product_table_link:visited, .mailto_link, .mailto_link:visited {
    color: #882222;
    font-size: 12px;
}

.promo_brick, .contact_block, .promo_brick_long, .promo_brick_short, .promo_brick_wide, .text_brick {
    display: block;
    float: left;
    width: 327px;
    border: 1px solid #E8E8E1;
    margin-top: 10px;
    padding: 7px;
}

.promo_brick, .contact_block {
    height: 250px;
}

.col-1 {
	width: 600px;
}

.col-2 {
	width: 300px;
}

.promo_brick_wide {
    height: 290px;
    width: 680px;
}

.promo_brick_long {
    height: 435px;
}

.promo_brick_short {
    height: 110px;
}

.text_brick {
    width: 680px;
}

.promo_brick p, .contact_block p, .promo_brick_long p, .promo_brick_short p, .promo_brick_wide p, .text_brick p {
    font-size: 11px;
}

.promo_brick_wide p {
    display: block;
/*    width: 600px; */
    float: left;
}

.promo_brick_wide img.screenshot {
    float: right;
    border: 1px solid #E8E8E1;
    margin-top: -10px;
}

.promo_brick_wide img.button {
    margin-left: 70px;
}

.slogan {
    font-size: 13px;
}

.promo_brick_separator {
    display: block;
    float: left;
    width: 10px;
    height: 100px;
    margin-top: 10px;
}

.promo_block_separator {
    display: block;
    float: left;
    width: 100%;
}

.promo_block_text {
    float: left;
    display: block;
    width: 450px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.promo_block_image img {
    margin-top: 10px;
    margin-right: 10px;
    border: solid 1px black;
}

.text_link, .text_link:visited {
    text-decoration: underline;
    font-size: 11px;
    color: #060606;
}

.cloud_image, .scm8_image {
    margin-left: 10px;
    cursor: pointer;
}

#cloud_arcitecture{
    text-align: center;
}

#scm8_screenshot img{
    width: 100%;
}


/* jQuery styles for tabs */
.ui-tabs-selected {    
}

.ui-tabs-hide {
    display: none;
}

.case_study_block {
    display: block;
    float: left;
    width: 698px;
    padding-top: 10px;
    border: solid 1px #e8e8e1;
    font-size: 12px;
    margin-top: 10px;
    color: #333333;
}

.case_study_block p {
    margin-top: 10px;
    color: #333333;
}

.case_study_block p {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 12px;
}

.case_study_block img {
    margin-left: 40px;
    cursor: pointer;
}

.case_study_block h4  {
    margin-left: 10px;
    margin-top: 10px;
}

table.uat_platforms {
    margin-left: 20px;
    margin-bottom: 10px;
    width: 420px;
    text-align: left;
    text-indent: 10px;
}

table .supported {
    background-color: #CCFFCC;
}

table .not_supported {
    background-color: red   ;
}

table .not_done {
    background-color: #C0C0C0;
}

.case_study_text {
    display: block;
    float: left;
    width: 450px;
}

.case_study_images {
    display: block;
    float: left;
    width: 200px;
    margin-top: 40px;
    margin-left: 20px;
}

ul.brick_list, ul.question_list {
    line-height: 25px;
}

ul.question_list {
    list-style: none;
    padding-left: 20px;
}

ul.brick_list li a, ul.question_list a {
    font-size: 11px;
    color: #882222;
    text-decoration: none;
}

ul.question_list a {
    display: block;
    width: 90%;
    text-indent: 10px;
}

ul.brick_list li a:hover, ul.question_list li a:hover {
    text-decoration: underline;
}

div#service_questions, div#service_answers {
    display: block;
    float: left;
    width: 320px;
    height: 170px;
}

div#service_questions {
    margin-right: 20px;
}

div#service_answers {
    float: right;
    margin-left: 20px;
}

div#service_answers > div {
    display: none;
}

div#service_answers p {
    color: black;
    padding-right: 20px;
}

div#service_contact {
    text-align: center;
    font-weight: 700;
}

a#service_contact_link {
    font-size: 14px;
    color: #333333;
    text-decoration: underline;
}

a#service_contact_link:hover {
    text-decoration: underline;
}

.question_list li a.current {
    color: #881111;
    background-image: url("../images/menu_item_bg.png");
}

div#exception h1 {
    margin-left: 20px;
}

div#exception p {
    margin-left: 20px;
}



/** FOOTER */

#footer {
    clear: both;
    width: 964px;
    height: 22px;
    background: url("../images/footer_bg.jpg") repeat-x;
    margin: 0 auto 50px;
    color: #14badb;
}

#footer p {
    font-size: 11px;
    text-decoration: none;
    text-align: center;
    line-height: normal;
    color: #424242;
}

#footer a {
    font-size: 11px;
    color: #FFF;
    text-decoration: none;
    margin-right: 5px;
    margin-left: 5px;
}

#footer h3 {
    color: #14badb;
}

#footer_logo_box {
    float: left;
    width: 200px;
    height: 20px;
    margin-left: 30px;
}

#info_box {
    float: left;
    width: 964px;
    height: 22px;
    padding: 1px 0px 0px 0px;
    position: relative;
    text-align: center;
}

#info_box a, #legal_box a {
    font-weight: normal;
}

#legal_box {
    float: left;
    width: 200px;
    height: 20px;
    margin-left: 30px;
    padding: 7px 0px 0px 0px;
}


#footer_left_corner {
    width: 22px;
    height: 22px;
    float: left;
    background: url(../images/footer_left.gif) no-repeat;
}

#footer_right_corner {
    width: 22px;
    height: 22px;
    float: left;
    background: url(../images/footer_right.gif) no-repeat;
}

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

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 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 fieldset {
    margin-top: 11px;
}

form.formtastic fieldset ol li.string input {
    width: 70%;
    font-size: 11px;
}

form.formtastic fieldset ol li.password input { width:50%; }
form.formtastic fieldset ol li.numeric input { width:50%; }
form.formtastic fieldset ol li.boolean input { width:50%; }

form.formtastic fieldset ol li { 
    margin-left: 0px;
    margin-bottom: 8px;
}

form.formtastic fieldset ol li label { 
    display:block;
    width:28%;
    float:left;
    padding-top:.2em;
    font-size: 11px;
    height: 18px;
    margin-left: 0px;
}

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;
    height: 18px;
}

form.formtastic fieldset.buttons {
    padding-left: 28%;
    font-size: 11px;
}

/*Account update page*/
.account_block form.formtastic fieldset ol li.password input { width: 280px; }
.account_block form.formtastic fieldset ol li.string input { width: 280px; }
.account_block form.formtastic fieldset ol li.numeric input { width: 280px; }
.account_block form.formtastic fieldset ol li.boolean input { width: 30px; }
.account_block form.formtastic fieldset ol li.country select { width: 282px; }
.account_block form.formtastic fieldset ol li.time_zone select { width: 282px; }
.account_block form.formtastic fieldset ol li label { margin-left: 10px; }
.account_block form.formtastic fieldset ol li label { width:20%; }
.account_block form.formtastic fieldset.buttons { padding-left: 21%; }

.account_block form.formtastic fieldset ol li.boolean label { 
    padding-left:19%;
    width:auto;
    font-weight: 900;
}

form.formtastic legend {
    color:#595524;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 900;
}

form.formtastic legend span {
    margin-left: 10px;
}

/** HEADER */

/* styling for the header bar. Same width (-2 for outline) as for the header and footer */
#header {
    width: 900px;
    height: 30px;
    margin: 10px auto;

    font-size: 12px;
    font-weight: bold;
}

#header a, a:visited {
    color: #B9B9B9;
}

/* change link text to white when hovering over them */
#header a:hover {
    color: #AAAAAA;
}



.simple_overlay { 
     
    /* must be initially hidden */ 
    display:none; 
     
    /* place overlay on top of other elements */ 
    z-index:10000; 
     
    /* styling */ 
    background-color:#333; 
     
    width:675px;     
    min-height:200px; 
    border:1px solid #666; 
     
    /* CSS3 styling for latest browsers */ 
    -moz-box-shadow:0 0 90px 5px #000; 
    -webkit-box-shadow: 0 0 90px #000;     
} 
 
/* close button positioned on upper right corner */ 
.simple_overlay .close { 
    background-image:url(../images/overlay/close.png); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}

/* the overlayed element */
.apple_overlay {

    /* initially overlay is hidden */
    display:none;

    /* growing background image */
    background-image:url(../images/overlay/transparent.png);

    /*
        width after the growing animation finishes
        height is automatically calculated
    */
    width:640px;

    /* some padding to layout nested elements nicely  */
    padding:35px;

    /* a little styling */
    font-size:11px;
    color: white;
}

.apple_overlay p, .contact_overlay p {
    margin-left: 20px;
    margin-right: 20px;
}

.apple_overlay img, .contact_overlay img {
    margin: 0px auto;
}

/* default close button positioned on upper right corner */
.apple_overlay div.close, .contact_overlay div.close {
    background-image:url(../images/overlay/close.png);
    position:absolute; right:5px; top:5px;
    cursor:pointer;
    height:35px;
    width:35px;
}

/* the overlayed element */
.contact_overlay {

    /* initially overlay is hidden */
    display:none;

    /* growing background image */
    background-image:url(../images/overlay/transparent.png);

    /*
        width after the growing animation finishes
        height is automatically calculated
    */
    width: 380px;

    /* some padding to layout nested elements nicely  */
    padding:35px;

    /* a little styling */
    font-size:12px;
    color: white;
}

.contact_overlay h4 {
    color: white;
}

/** MENU */
#nav {
    width: 960px;
    background-color: white;
    height: 30px;
    border-left: solid 1px #cccccc;
    border-right: solid 1px #cccccc;
    margin: 0 auto;
}

#nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    border: none;
}

.nav_item {
    float: left;
    width: 160px;
    position: relative;
}

.nav_item a {
    text-align: center;
    font-weight: 600;
    display: block;
    text-decoration: none;
    line-height: 20px;
    color: #ddffff;
    color: #ffffff;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
    border-top: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    border-left: solid 1px #717171;
    border-right: solid 1px #aaaaaa;
}

.nav_item a:hover {
    color: white;
    width: 158px;
    border: 1px solid #999999;
    text-decoration: underline;
} 

#nav_1 { background: url("../images/menu_01.jpg") no-repeat;}
#nav_2 { background: url("../images/menu_02.jpg") no-repeat;}
#nav_3 { background: url("../images/menu_03.jpg") no-repeat;}
#nav_4 { background: url("../images/menu_04.jpg") no-repeat;}
#nav_5 { background: url("../images/menu_05.jpg") no-repeat;}
#nav_6 { background: url("../images/menu_06.jpg") no-repeat;}

.nav_item a.active {
    text-decoration: underline;
}

/* Sub navigation */
.product_nav {
    height: 24px;
    margin-top: 10px;
}

.product_nav_item {
    width: 110px;
    float: right;
    height: 24px;
    border-top: 1px solid #dddddd;
    border-left: solid 1px #c8c8c8;
    border-right: solid 1px #dddddd;
    margin-bottom: -10px;
    background-color: #F4F0F7;
}

.product_nav_item a {
    display: block;
    text-decoration: none;
    font-size: 12px;
    text-align: center;
    color: #222222;
    font-weight: normal;
    height: 24px;
    padding: 2px 0px 0px 0px;
    color: #313131;
}

.product_nav_item a:hover {
    text-decoration: underline;
}

.product_nav_item a.active {
    height: 26px;
    background-color: #F4F0F7;
}

.product_nav_item a.current {
    text-decoration: underline;
    height: 26px;
}


table.licenses {
    width: 678px;
    margin: 0px auto;
    margin: 10px;
    border: 1px solid #99cc66;
    background-color: #f7f7f0;
}

table.licenses th {
    color: black;
    font-size: 12px;
    font-weight: bolder;
}

.property {
    width: 120px;
    padding-right: 20px;
    padding-left: 20px;
}

th.license_types {
    border-bottom: 1px #A7BA96;
    font-size: 13px;
    font-family: "Helvetica Neue";
}

.price_eur {
    font-weight: bolder;
}

table.licenses td {
    height: 40px;
    width: 102px;
    padding: 18px;
    border-bottom: 1px solid #99cc66;
    color: #222222;
    text-align: center;
    font-size: 11px;
}

.license_explanation {
    margin: 10px;
    margin-left: 0px;
}

.license_explanation ul {
    padding-left: 25px;
}

.license_explanation ul li {
    line-height: 22px;
    padding-bottom: 10px;
}

#promo {
    float: left;
    display: block;
    height: 200px;
    background-color: white;
}

#promo img {
    margin-bottom: 10px;
    width: 960px;
    height: 190px;
}

#promo div {
    position: relative;
    left: 100px;
    top: -90px;
    height: 58px;
    width: 202px;
    padding: 1em;
}

#promo div img {
    z-index: 20;
    height: 58px;
    width: 202px;
}



/** STATUS BAR */
#status_bar {
    margin: 0px auto 10px;
    width: 964px;
    height:30px;
    background: url("../images/topbar_960.png");
}

#status_bar p {
    text-align: center;
    color: white;
    font-weight: bold;
}

/** logo_box */
#logo_box, #product_box {
    float: left;
    width: 320px;
    height: 28px;
    color: white;
    padding-top: 5px;
    padding-bottom: 2px;
}

#product_box {
    text-align: center;
    font-size: 11px;
}

.product_box_header {
    float: left;
    padding-left: 80px;
    padding-top: 2px;
}

.product_box_logo_div {
    float: left;
}

.product_box_logo_div a {
    text-decoration: none;
}

.product_box_logo {
    display: inline;
    margin-top: -2px;
    padding-left: 5px;
    width: 20px;
}

#logo_box a {
    border-style: none;
}

#logo_box h1 {
    line-height: normal;
    text-indent: -999em;
}

#logo_box img {
    height: 18px;
    margin-left: 14px;
}

/** account_box */
#account_box {
    float: right;
    width: 320px;
    vertical-align: middle;
    padding-top: 3px;
}

#user_info {
    float: right;
    width: 320px;
    height: 30px;
    margin-right: 10px;
}

#user_info a {
    color: white;
}

#user_info ul {
    width: 300px;
    float: right;
    text-align: right;
    list-style-type: none;
    height: 30px;
    margin: 0px auto;
}

/* this is used for displaying the login info */
#user_info ul li {
    display: inline;
    text-align: right;
    vertical-align: middle;
    font-size: 11px;
    color: #14badb;
    margin-right: 5px;
}

#user_info ul li a, #user_info ul li a:visited {
    font-size: 11px;
    font-style: normal;
    text-decoration: none;
}

#user_info ul li a:hover {
    text-decoration: underline;
}

#account_name { 
    color: white;
    font-weight: 700;
}



/* root element for tabs  */
ul.tabs { 
    list-style:none;
    margin:0 !important;
    padding:0;
    /*	border-bottom:1px solid #666;	*/
    height:30px;
}

/* single tab */
ul.tabs li { 
    float:right;
    text-indent:0;
    padding:0;
    margin:0 !important;
    list-style-image:none !important;
}

/* link inside the tab. uses a background image */
ul.tabs a { 
    /*background: url("../images/tab_blue.png") no-repeat -420px 0;*/
    font-size:12px;
    display:block;
    height: 24px;
    line-height:20px;
    /*width: 134px;*/
    text-align:center;
    text-decoration:none;
    color:#333;
    padding:0px;
    margin:0px;
    position:relative;
    top:1px;
}

ul.tabs a:active {
    outline:none;
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
    background-position: -420px -31px;
    color:#fff;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
    /*background-position: -420px -62px;*/
    cursor:default !important;
    color:#000 !important;
    text-decoration: underline;
    height: 26px;
    background-color: #F4F0F7;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s 			{ background-position: -553px 0; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l 			{ background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover 	{ background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 	{ background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */ 
div.panes div.pane {
    display:none;
}