﻿/* GENERAL ELEMENT STYLING */

.step{display: none;}

/*Styles for errors*/
label.error {
  display: block;
  color:#faba00;
}

#step2 input[type=text].error, td.error
{
	background-color:#faba00;
	color:#000000;
}

#donate input[type=text].error, td.error
{
	background-color:#faba00;
	color:#000000;
}

table, td
{
  font-family:arial;
  font-size:11px;
  color:#ffffff;
  vertical-align:top;
}

.pngfix
{
  behavior: url(/sfc/images/common/iepngfix.htc);
}

img
{
  behavior: url(/sfc/images/common/iepngfix.htc);
  border:0px;
}

body
{
  background-color:#000000;
	margin:0px;
	padding:0px;
}

a
{
  color:#faba00;
}


/* GENERAL MASTERPAGE STRUCTURE STYLING */

#BaseContainer
{
  width:100%; 
  height:800px;
	text-align:center; 
  background: #000000 url(/sfc/images/common/grass_bg.jpg) repeat-x center 0px;
}

#ContentContainer
{
  width:980px; height:625px; text-align:left; margin: auto;
  background: url(/sfc/images/common/content_bg.jpg) no-repeat center 0px;
}

#innerContentContainer
{
  width:980px; height:625px; text-align:left; margin: auto;
}

#infoContainer
{
  float:right; width:293px; height:245px; margin-top:1px; margin-right:20px;
}

#activityContainer
{
  float:right; width:520px; height:610px; margin-top:12px; padding-right:15px; padding-left:10px;
}

.TransactionDisclaimer
{
  background: url(/sfc/images/common/disclaimer_bg.gif) no-repeat 0px 565px;
  
}

#SnagLogo
{
  width:275px;
  height:125px;
  float:left;
  margin-top:250px;
}

.indicator
{
  float:right;
  margin-top:5px;
}

#tallyAndSwitchContainer
{
  float:right; width:148px; height:125px; margin-top:25px; margin-right:0px;
}

#DisclaimerContainer
{
  color:#8e887c; font-family:Arial; font-size:10px;
  padding-right:3px; padding-top:30px; text-align:right;
}

#DisclaimerContainer a
{
  color:#8e887c;
  text-decoration:none;
}

#DisclaimerContainer a:hover
{
  color:#8e887c;
  text-decoration:underline;
}

#TallyContainer
{
  font-family:Arial;
  font-weight:bold;
  font-size:16px;
  margin-top:41px;
  padding-left:8px;
}

#SwitchContainer
{
  margin-top:20px;
  padding-left:7px;
}


/* STEP 1 */

#totalContainer input[type=text] 
{
  width: 20px;
  background-color:Transparent;
  border:0px solid;
  height:15px;
  font-family:Verdana;
  font-size:14px;
  color:#ffffff;
  padding:0px 2px 0px 2px;
  font-weight:bold;
}

#totalContainer td
{
  font-family:Verdana;
  font-size:13px;
  color:#ffffff;
  font-weight:bold;
  vertical-align:middle;
}

.price
{
  font-family:Arial;
  font-weight:bold;
  color:#ffffff;
  font-size:15px;
  text-align:right;
}

.textSnagTotalCost
{
  font-family:Arial;
   font-weight:bold;
   font-size:18px;
   color:#000000;
   width:45px;
   height:20px;
   border:0px;
   background-color:Transparent;
   text-align:right;
}

.Step1SectionContainer
{
  margin-top:10px;
}

/* STEP 2 */

#step2 input[type=text] {
  width: 245px;
  background-color: white;
  border:1px solid;
  height:15px;
  font-family:Verdana;
  font-size:11px;
  color:#000000;
  padding:0px 2px 0px 2px;
} 

.step2TextInput
{
  width: 245px;
  background-color: white;
  border:1px solid;
  height:15px;
  font-family:Verdana;
  font-size:11px;
  color:#000000;
  padding:0px 2px 0px 2px;
}

#NextLoginToPaypal
{
  float:right; margin-top:8px; margin-left:10px;
}

.SnagQty
{
  font-size:11px; color:#faba00;
}

.TotalRowFormatting
{
  padding-right:4px; padding-left:4px; font-size:11px; color:#faba00;
}

#yourSnagCost
{
   background: url(/sfc/images/snag/title_snagcost.gif) no-repeat left 0px;
   width:60px; height:38px;
   padding-left:225px;
   padding-top:4px;
   margin-top:20px;
   font-family:Arial;
   font-weight:bold;
   font-size:18px;
   color:#000000;
}

.ExtraDonationTextField
{
  width:75px; font-weight:bold;
  background-color: white;
  border:1px solid;
  height:15px;
  font-family:Verdana;
  font-size:11px;
  color:#000000;
  padding:0px 2px 0px 2px;
}

/* STEP 3 */

.SnagQtyStep3
{
  font-size:11px; color:#ffffff;
}

#NextPayWith
{
  float:right; margin-top:30px; margin-left:10px;
}

.TotalDivider
{
  height:1px; background-color:#ffffff;
}

/* STEP 4 */

.badgeCode
{
  width:275px; border:0px; background-color:#ffffff;
  color:#898989;
  font-family:Arial;
  font-size:11px;
  overflow:hidden;
}

.WidgetSampleContainer
{
  background: url(/sfc/images/snag/widget_bg.png) no-repeat left 0px;  
  width:218px;
  height:326px;
  padding-top:30px;
  padding-left:22px;
  font-family:Arial;
  font-size:11px;
}

.WidgetSampleContainer p
{
  font-family:Arial;
  font-size:11px;
}

.WidgetText 
{
  color:#000000;
  padding-left:4px;
  padding-right:30px;
  padding-top:5px;
}

.WidgetWVLogo
{
  padding-top:10px; text-align:right; padding-right:33px;
}

/* MAKE A DONATION */

#donate input[type=text] {
  width: 225px;
  background-color: white;
  border:1px solid;
  height:15px;
  font-family:Verdana;
  font-size:11px;
  color:#000000;
  padding:0px 2px 0px 2px;
} 

/* EMAIL STYLING */

.emailBackground
{
  background: url(/sfc/images/email/background.jpg) no-repeat left 0px;
}

.emailCopy
{
  font-family:Arial;
  color:#ffffff;
  font-size:14px;
  height:250px;
}

.emailWidgetBackground
{
  background: url(/sfc/images/email/widget_bg.gif) no-repeat left 0px;
  margin-left:-5px;
  height:290px;
}

.emailWidgetCopy
{
  font-family:Arial;
  font-size:12px;
  color:#000000; 
}

.emailCopyright
{
  font-family:Arial;
  color:#ffffff;
  font-size:10px;
}

/* JQUERY TAB STYLING */
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide {
        display: none !important;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .ui-tabs-nav {
        display: none;
    }
}

/* Skin */
.ui-tabs-nav, .ui-tabs-panel {
    font-family: Arial;
    font-size: 11px;
}
.ui-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.ui-tabs-nav li {
    float: left;
    margin-right:2px;
    font-weight: bold;
}
.ui-tabs-nav a, .ui-tabs-nav a span .ui-tabs-nav a img {
    float: left; /* fixes dir=ltr problem and other quirks IE */
    text-align:center;
    background: url(/sfc/images/common/tab_normal.png) no-repeat;
    width:119px;
    height:27px;
    padding-top:3px;
}
.ui-tabs-nav a {
    margin: 6px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
    padding-left: 0;
    background-position: 100% 0;
    text-decoration: none;
    white-space: nowrap; /* @ IE 6 */
    outline: 0; /* @ Firefox, prevent dotted border after click */    
}
.ui-tabs-nav a:link, .ui-tabs-nav a:visited {
    color: #000000;
}
.ui-tabs-nav .ui-tabs-selected a 
{   
    margin: 6px 0 0;
    background: url(/sfc/images/common/tab_selected.png) no-repeat;
    position: relative;
    top: 0px;
    z-index: 2;
    background-position: 100% 0px;
}
.ui-tabs-nav a span {
    padding-top: 1px;
    padding-right: 0;
    background-position: 0 0;
}
.ui-tabs-nav .ui-tabs-selected a span, ui-tabs-selected a img 
{   
    background-position: 0 -23px;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited,
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
    color: #000;
}
.ui-tabs-panel {
    border: 0px;
    padding: 0px 5px 0px 4px;
    background-color:#ffffff;
    height:180px;
    /* declare background color for container to avoid distorted fonts in IE while fading */
    overflow:auto;
    margin-top:0px;
}
/*.ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}*/

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html .ui-tabs-nav  { /* auto clear @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}