/*

===============================================

Title: ROI Calculator

Created by: Balihoo Creative

Date: December 2011

Description: To provide potential clients the
ability to quanitfy their profits utilizing
Balihoo's local marketing assets. 

===============================================

*/
/* --- Resets --- */
form, input{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

/*--- Typography---*/
h1 {font: 15px "Helvetica", Arial, Serif;Color:#F8981C;margin:10px 0 0 0;padding:0;}
h2.roi {font: 15px "Helvetica", Arial, Serif;Color:#ABABAB;margin:10px 0 0 0;padding:0;}
#summary span, #dataTable span {font: 15px "Helvetica", Arial, Serif;Color:#ABABAB;margin:10px 0 10px 0;padding:0;}
.results{width:400px;font: 15px "Helvetica", Arial, Serif;Color:#ABABAB;margin:75px 0 10px 20px;padding:0;}
/*#calculateForm {color:#CECECE;font-weight:bold;font: 25px "arial", Arial, Serif;}*/
#summary{width:450px;font: 15px "Helvetica", Arial, Serif;Color:#ABABAB;margin:30px 10px 10px 20px;padding:0;line-height:200%;display:none;}
#summary b{font: 30px "Helvetica", Arial, Serif;Color:#ABABAB;font-weight:bold;display:none;}
#five {font: 30px "Helvetica", Arial, Serif;Color:#ABABAB;font-weight:bold;}
#four {font: 30px "Helvetica", Arial, Serif;Color:#ABABAB;font-weight:bold;}
.disclaimer{font: 10px "Helvetica", Arial, Serif;Color:#ABABAB;margin:0;padding:0;}
#fields h1{font: 16px "Helvetica", Arial, Serif;Color:#9B9B9B;float:left;margin:0;padding:0;}
#fields  p{font: 11px "Helvetica", Arial, Serif;Color:#ABABAB;float:left;margin:0;padding:0;}
#fields  p.char{color:#CECECE;font-weight:bold;font: 25px "arial", Arial, Serif;margin:0;padding:10px 0 0 0;}
#fields  b{color:#CECECE;font-weight:bold;font: 25px "arial", Arial, Serif;margin:0 0 0 0;padding:0;}





/*--- Table Styles ---*/
#dataTable{width:550px;margin:0 0 0 14px;display:none;}
#dataTable td{
background-color:#FFF;
margin:0 0 15px 0;
padding:5px;
border:0;
height:20px;
color:#ABABAB;
font: 15px "Helvetica", Arial, Serif;
}
#dataTable td p.title{
background-color:#FFF;
margin:0;
padding:0;
border:0;
color:#F8981C;
font: 15px "Helvetica", Arial, Serif;
}


/* --- Intro Animation CSS --- */
.hugeText       {font: 200px "Arial", Helvetica, Serif;Color:#F8981C;margin:0;padding:0;display:none;}
.tnrDescription {font: 40px "Times New Roman", Arial, Serif;Color:#999999;margin:0 0 0 0;padding:0;display:none;}
.bigText        {font: 80px "Helvetica", Arial, Serif;Color:#F8981C;margin:0;padding:0;display:none;}
.bigSubText     {font: 30px "Arial", Arial, Serif;Color:#999999;margin:0;padding:0;display:none;}
.finalHeader    {font: 40px "Helvetica", Arial, Serif;Color:#F8981C;margin: 0 0 0 0;padding:0;display:none;}




/*--- Block Elements --- */
#content_mid, #content_bottom {z-index:0;}

#ROIwrapper {
    width:730px;
    height:440px;
    margin:0 0 10px 0;
    padding:25px 0 0 0;
    border:2px solid #FFF;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index:30;
}
#ROIheader{
    width:730px;
    height:75px;
    margin:0;
    padding:0;
    border:2px solid #EAEAEA;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-image:url('http://static.balihoo.com.s3.amazonaws.com/balihoo/calculator/bg.jpg');
    background-repeat:repeat;
    
}

#headerImage {
    margin:25px 0 0 25px;
    float:left;
}

#image {
    background-image:url('chartImgBg.jpg');
    background-repeat:no-repeat;
    background-position:bottom;
    margin:0;
    padding:0;
    width:580px;
    height:554px;
    display:none;
}

#socialMedia{
    display:none;
    float:right;
    margin:0;
    padding:0;
}
.results  {display:none;}
#fields   {width:720px;height:100px;padding:0 0 0 10px;font: 16px "Helvetica", Arial, Serif;Color:#9B9B9B;margin:0;display:none;}

#field_1{
    float:left;
    margin:0 10px 0 5px;
    padding:0;
    width:185px;
    height:110px;

}
#field_2{
    float:left;
    margin:0 0 0 40px;
    padding:0;
    width:120px;
    height:110px;

}
#field_3{
    float:left;
    margin:0 0 0 35px;
    padding:0;
    width:140px;
    height:110px;

}
#field_4{
    float:left;
    margin:0 0 0 30px;
    padding:0;
    width:140px;
    height:110px;

}
#cta   {font: 14px "Helvetica", Arial, Serif;Color:#ABABAB;margin:10px 0 10px 20px;padding:0;display:none;}
#cta a {font-weight:bold;font: 14px "Helvetica", Arial, Serif;Color:#F8981C;margin:10px 0 10px 0;padding:0;}

#socialMedia2{float:right;margin:14px 50px 0 0;height:100%;width:150px;}
.space1{float:left;margin:0 0 5px 0;}
.space {float:left;}

#instructions   {
    display:none;
    float:left;
    width:700px;
    height:175px;
    margin:50px 0 0 0;
    padding:0 15px 15px 15px;
    border:2px solid #EAEAEA;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-image:url('http://static.balihoo.com.s3.amazonaws.com/balihoo/calculator/bg.jpg');
    background-repeat:repeat;
    }
#instructions h1{font: 15px "Myriad Pro", Arial, Serif;Color:#F8981C;margin:10px 0 3px 0}
#instructions p {font: 14px "Myriad Pro", Arial, Serif;Color:#9D9D9D;}



/*--- Buttons, Inputs and Other Goodies ---*/
#budget{
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#EAEAEA;
margin:0;
padding:5px 0px 5px 13px;
border:0;
height:40px;
width:110px;
color:#AAAAAA;
font-weight:bold;
font: 25px "arial", Arial, Serif;
float:left;
}

#percentage{
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#EAEAEA;
margin:0;
padding:5px 0px 5px 23px;
border:0;
height:40px;
width:50px;
color:#AAAAAA;
font-weight:bold;
font: 25px "arial", Arial, Serif;
float:left;
}

#ratio{
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#EAEAEA;
margin:0;
padding:5px 0px 5px 23px;
border:0;
height:40px;
width:50px;
color:#AAAAAA;
font-weight:bold;
font: 25px "arial", Arial, Serif;
float:left;
}

#ratio2{
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#EAEAEA;
margin:0;
padding:5px 0px 5px 23px;
border:0;
height:40px;
width:50px;
color:#AAAAAA;
font-weight:bold;
font: 25px "arial", Arial, Serif;
float:left;
}

input.calculateButton{
     background-color:#F8981C;
     border:0;
     -moz-border-radius: 5px;
     border-radius: 5px;
     color:#FFF;
     font-size:11px;
     font-weight:bold;
     padding:3px;
     margin:0 0 0 25px;
     cursor:pointer;

}


input.resetButton{
     background-color:#F8981C;
     border:0;
     -moz-border-radius: 5px;
     border-radius: 5px;
     color:#FFF;
     font-size:11px;
     font-weight:bold;
     padding:3px;
     margin:0 0 0 25px;
     display:none;
     cursor:pointer;


}


/*--- Bar Graph ---*/
#chart{font: 15px "Helvetica", Arial, Serif;Color:#ABABAB;margin:90px 0 10px 0;padding:0;}
.graphLabelchart {font: 12px "Helvetica", Arial, Serif;Color:#ABABAB;margin:5px 0 10px 0;padding:0;}
#barGraph{width:260px;height:300px;float:right;display:none;}