/* -------------------------------------------------------------- 
  
    base/all.css
    Includes reset styles and modification classes that can be 
    re-used across websites.

    Content:
    01 - Reset styles
    02 - Modification classes
    03 - General element styles
    04 - Form styles

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

/*---------------------------------------------------------------
01 - Reset styles (see http://meyerweb.com/eric/tools/css/reset/)
---------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}

img
{ vertical-align: bottom; }

body
{ line-height: 1; }

ol, ul
{ list-style: none; }

blockquote, q
{ quotes: none;  }

blockquote:before, blockquote:after,
q:before, q:after
{
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus
{ outline: 0; }

/* remember to highlight inserts somehow! */
ins
{ text-decoration: none; }

del
{ text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table
{
	border-collapse: collapse;
	border-spacing: 0;
}

/*---------------------------------------------------------------
02 - Modification classes
---------------------------------------------------------------*/
.positionRelative
{ position: relative; }

.positionAbsolute
{ position: absolute; }

.positionFixed
{ position: fixed; }

.positionStatic
{ position: static; }

.clearLeft
{ clear: left !important; }

.clearRight
{ clear: right !important; }

.clearBoth
{ clear: both !important; }

.clearNone
{ clear: none !important; }

.floatLeft
{ float: left !important; }

.floatRight
{ float: right !important; }

.floatNone
{ float: none !important; }

.displayInline
{ display: inline !important; }

.displayBlock
{ display: block !important; }

.displayNone
{ display: none !important; }

.visibilityHidden
{ visibility: hidden !important; }

.visibilityVisible
{ visibility: visible !important; }

.textAlignRight
{ text-align: right !important; }

.textAlignLeft
{ text-align: left !important; }

.textAlignCenter
{ text-align: center !important; }

.textAlignJustify
{ text-align: justify !important; }

.textDecorationUnderline
{ text-decoration: underline !important; }

.textDecorationNone
{ text-decoration: none !important; }

.widthAuto
{ width: auto !important; }

.width100
{ width: 100% !important; }

.width75
{ width: 75% !important; }

.width66
{ width: 66% !important; }

.width50
{ width: 50% !important; }

.width33
{ width: 33% !important; }

.width25
{ width: 25% !important; }

.width10
{ width: 10% !important; }

.leader
{ margin-bottom: 0 !important; }

/* any element with this class will be hidden off screen, but should still be seen by screen readers */
.nonVisual
{
    position: absolute !important;
    left: -9000px !important;
    top: 0 !important;
}

legend.nonVisual
{
    display: none !important;
    visibility: hidden !important;
}

/*---------------------------------------------------------------
03 - General element styles
---------------------------------------------------------------*/
ul.horizontal
{
    overflow: hidden;
}

    ul.horizontal li
    {
        float: left;
        padding: 0 5px;
    }

    ul.horizontal li.first
    {
        padding-left: 0;
    }

/*---------------------------------------------------------------
04 - Form styles
---------------------------------------------------------------*/
div.formInput
{
    overflow: hidden;
}

    div.formInput label
    {
        float: left;
        display: block;
        width: 115px;
        padding: 2px 5px 2px 0;
    }

    div.formInput input.checkbox,
    div.formInput input.radio
    {
        margin: 0;
    }

    div.formInput input.radio
    {
        position: relative;
        top: 2px;
    }

    div.formInput input.text,
    div.formInput textarea,
    div.formInput select
    {
        padding: 2px;
        border: 1px solid #eee;
        font-family: inherit;
    }
    
    div.formInput input.text
    {
        width: 200px;
    }

div.formInput.inputFirst label
{
    float: none;
    display: inline;
    width: auto;
    padding-right: 0;
    padding-left: 5px;
}


div.noshow {display:none;}
#joinMailingList {float:right;}
.validationSummary {font-weight:bold;}

img.floatLeft {margin: 10px 10px 10px 0;}
img.floatRight {margin: 10px 0 10px 10px;}
img.floatTopLeft {margin: 0 10px 10px 0;float:left;}
img.floatTopRight {margin: 0 0 10px 10px;float:right;}


/********** vote ******************/
div#voteBox {overflow:hidden;}

.dater1 {float:left;width:350px;padding:0 25px;text-align:center;margin-right:38px;overflow:hidden;}
.dater2 {float:left;width:350px;padding:0 25px;text-align:center;overflow:hidden;}

div.message
{
    padding: 0.75em 1.5em;
    margin: 1.5em 0;
    border: 0.083em solid #ccc;
    overflow: hidden;
}

    div.message p,
    div.message ul
    {
        margin: 0;
    }
    
    div#voteBox div.message.confirmation
    {
        /*padding-left: 2.333em;
        background: transparent url('/resources/images/message_confirmation.gif') 0.5em 0.833em no-repeat;*/
    }
    
    div#voteBox div.message.error
    {
        /*padding-left: 2.333em;
        color: #e00;
        background: transparent url('/resources/images/message_error.gif') 0.5em 0.833em no-repeat;*/
    }

div.novote {clear:both;}
    
.formButton {
    background: url("http://www.rateagranny.com/resources/sites/rateagranny/images/red-button_01.png") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 35px;
    padding-left: 14px;
    margin-left:70px;
}
    .formButtonCentre {margin-left:auto;margin:0 auto;float:none;}

.formButton span {
    background: url("http://www.rateagranny.com/resources/sites/rateagranny/images/red-button_02.png") no-repeat scroll 100% 0 transparent;
    display: block;
    height: 35px;
}
.formButton input, .formButton a {
    background-color: Transparent;
    border: 0 none;
    color: #FFFFFF;font-weight:bold;font-size:1.3em;
    height: 30px;
    line-height: 1;
    padding: 0 14px 4px 0;
}
	.formButton a {padding-top:5px;font-size:0.9em;display:block;text-decoration:none;}

.buttonContainerRight {float:right;margin-right:30px;}

    .blueFormButton
    {
        background-image: url("http://www.rateagranny.com/resources/images/blue-button-1.png");
    }
    .blueFormButton span {
        background-image: url("http://www.rateagranny.com/resources/images/blue-button-2.png");
    }

/***** testimonials *****/
.testimonialOuter {clear:both;overflow:hidden;}
.visitorTestimonial {display:block;width: 90%;margin:5px 5%;}
.visitorTestimonial p {overflow:hidden;padding-bottom:0;margin-bottom:0;}
span.testimonialDetail {
    /*background: url("/resources/images/quotes-open.png") no-repeat 0 0 transparent;
    padding-left: 15px;*/
}
span.testimonialDetail .endQuote {
    /*background: url("/resources/images/quotes-close.png") no-repeat 100% 0 transparent;
    padding-right: 15px;*/
}

.quote1, .quote2 
{
    font-style:italic;font-family: 'Times New Roman';
    font-size:23px;padding:0 2px 0 0;font-weight:bold;
}


.testimonialAuthor {float:right;text-align:right;}
.testimonialName, .testimonialLocation {display:block;font-style:italic;}

.SingleTestimonial {/*border:solid 1px #eee;*/float:left;margin:10px;padding:10px;}
.SingleTestimonial .visitorTestimonial {width:300px;margin-bottom:0;}


/************** header bar ****************/
div#headerBar {display:none;width:100%;height:30px;background-color:transparent;overflow:hidden;}
div#headerBarInner {}
div#socialBar {float:right;border-left:solid 1px black;background-color:#f4f4f4;padding:5px;}
/*    div#socialBar a {display:inline;float:left;}
    div#socialBar a span {width: 30px;height:30px;margin:0 5px;display:block;}
        div#socialBar a.first span {margin-left:10px;}
    div#socialBar span.twitter {background: url("/resources/images/icon-twitter-30.png") no-repeat scroll 0 0 transparent;}
    div#socialBar span.facebook {background: url("/resources/images/icon-facebook-30.png") no-repeat scroll 0 0 transparent;}*/
div#flagBar {float:right;background-color:#f4f4f4;padding:7px 5px;}
    div#flagBar a {display:inline;float:left;}
    div#flagBar a span {width: 23px;height:17px;margin:0 5px;display:block;opacity:0.5;}
    div#flagBar a:hover span, div#flagBar a.activeSite span {opacity:1;}
        div#flagBar a.last span {margin-right:10px;}
    div#flagBar a.zaflag span {background: url("/resources/images/flags/za.png") no-repeat scroll 0 0 transparent;}
    div#flagBar a.ukflag span {background: url("/resources/images/flags/uk.png") no-repeat scroll 0 0 transparent;}
    div#flagBar a.usflag span {background: url("/resources/images/flags/us.png") no-repeat scroll 0 0 transparent;}
    div#flagBar a.auflag span {background: url("/resources/images/flags/au.png") no-repeat scroll 0 0 transparent;}

/* photo boxes */
.photoBox {float:left;width:262px;margin-right:26px;text-align:center;}
.lastBox {margin-right:0 !important;}
.photoBox p {display:block;margin:0;}

.photoBoxContainer {display:block;overflow:hidden;margin-bottom:20px;margin-left:20px;}