/* bootstrap overrides */
.container{
margin-top: 0px;
width: 520px;
margin:0 auto;
}

.span12{
width: auto;
}

.row,
.span12{
margin-left: 0 !important;
}

.nav{
margin-bottom: 0;
}

.nav-tabs > li, .nav-pills > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
font-size: 13px;
font-weight: normal;
}

.nav-pills {
text-align:center;
}

.nav-tabs > li, .nav-pills > li{
vertical-align: middle;
}


.nav-pills > li > a{
background: #FFFFFF;
font-weight: normal;
color: #494949;
font-size: 13px;
}

.modal{
width: 500px;
background: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-family:Verdana, Geneva, sans-serif;
}



/* End bootstrap overides */

#ypoapp{
width: 520px;
height: 550px;
margin: 0 auto;
border-top: 5px solid #085ba5;
font-family:Verdana, Geneva, sans-serif;
}

#ypoapp_tabs{

}

#ypoapp_tabs > li{
margin-top: 0px;
margin-bottom: 0px;

}

#ypoapp_tabs > li > a{
cursor: default;
}

#ypoapp_content{
height: 460px;
position: relative;
padding-bottom: 5px;
border:1px solid #bcbec0;
}

#graph_container{
margin-right: 20px;
}

#graph_container > div{
background: #F2F2F2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}


.ypoapp_content_section {
color: #494949;
font-weight: normal;
}

.ypoapp_content_section p{
font-size: 13px;
}

.ypoapp_content_section .button_container{
text-align: left;
position: absolute;
bottom: 110px;
margin-left: 100px;
}

.ypoapp_content_section {
width: 205px;
margin-left: 20px;
}

#bmi_text{
color: #494949;
margin-left: 6px;
}

#bmi_result{
border-bottom: 2px solid #cdcdcd;
display: inline-block;
width: 60px;
text-align: center;
}

#ypoapp_results h4, #ypoapp_results h3, #results_info h3{
color: #494949;
}

#results_info h3{
float: left;
}

#facebook{
float: right;
}

#ypoapp_results h4 {
font-size: 11px;
}

#ypoapp_results h3 {

margin-bottom: 4px;
}

#results_info{
position: absolute;
bottom: 0;
}
#results_info h3, #ypoapp_results h3 {
font-size: 1.2em;
font-weight: bold;
}

#results_info p {
color: #494949;
}

#results_info p.result_text {
font-size: 1em;
line-height: 1em;
clear: both;
}

#results_info p.mini_text {
font-size: .9em;
line-height: 1.1em;
}


#results_contact > a > img, #results_contact > img{
margin-bottom: 10px;
}
/*
#results_contact button{
width: 95%;
font-size: 12px;
line-height: 14px;
margin-bottom: 5px;
text-align: left;
padding: 6px 10px 6px;
}
*/

#graph_container{
width: 140px;

}

.controls {
margin-bottom: 10px;
margin-left: 6px;
}

#bars_wrapper, .ypoapp_content_section{
height: 290px;
position: relative;
}
#bars_wrapper{
background:url(../images/main-bg.png) 0 0 no-repeat

}
.clearfix{
height:10px;
background:none;
}
#left_bar{
margin-left: 27px;
background: #e55f9c;
opacity:0.6;
filter:alpha(opacity=60);
}
#right_bar{
margin-right: 27px;
background: #8840a9;
right: 0;
opacity:0.6;
filter:alpha(opacity=60);
}

#left_bar, #right_bar{
bottom: 0px;
height: 111px;
position: absolute;
width: 86px;
}

#left_bar .bottom_p, #right_bar .bottom_p{
position: absolute;
bottom: 0;
}

#bars_wrapper p{
font-weight: normal;
width: 100%;
text-align:right;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-webkit-font-smoothing: antialiased;
font-size:1.1em
}

#modal_intro_window h4{
font-size: 1.3em;
font-weight: bold;
}

#modal_intro_window .msgbox, .ypoapp_btn{
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

#reference_link{
width: 100%;
text-align: center;

}

#reference_link a{
margin-right: 10px;
color: #494949;
text-decoration: underline;
font-size: 10px;
padding-bottom: 5px;
font-weight:normal;
}

.button_container{
text-align: center;
}

.ypoapp_btn{
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-webkit-font-smoothing: antialiased;
font-size: 19px;
line-height: 30px;
padding:0px 0px 0px 10px;
background-color:#134183!important;
}

.icon-next{
background:url(../images/icon_next.png) 0 5px no-repeat;
width: 22px;
height: 22px;
line-height: 16px;
vertical-align: middle;
}

.icon-tp{
width: 22px;
height: 22px;
line-height: 22px;
vertical-align: middle;
}

#header_msgbox, #results_msgbox{
margin: 10px 0px 15px 0px;
}

#results_msgbox{
display: none;
}

.msgbox, .ypoapp_btn{

-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3D329F", endColorstr="#241D61");
border-color: #241D61 #241D61;
text-align: center;
}

.msgbox h4{
background:url(../images/mainbutton1.png) no-repeat 0 0 #FFF;
width:96%;
min-height:63px;
padding: 10px;
font-weight: bold;
}

.msgbox p{
color: #fcfcfc;
padding: 10px;
}

#modal_reference, #modal_error{
display: none;
color: #FFF;
opacity: 0.9;
filter: alpha(opacity = 90); /* For IE8 and earlier */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#modal_reference .close{
color: #cfb2cf;
}

#modal_reference{
background: #9c579f;
border: 5px solid #cfb2cf;
width: 480px;
}

#modal_reference a{
color: #CFB2CF;
}

#modal_error{
background: #E55F9C;
border: 5px solid #FC98C6;
width: 300px;
margin: -115px 0 0 -150px;
}

.error_input{
color: #b94a48;
border-color: #b94a48;
}
.warning{
clear:both;
font-style:italic;
margin-top:150px;
}
#results_info{
margin: 20px 20px 0 20px;
display: none;
}
#header{
border: 1px solid #BCBEC0;
color: #0A599C;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 31px;
margin: 0px 0 10px 0px;
padding: 25px;
width: 90%;
text-align:center;

}
#header img{
vertical-align:middle;
}
.tel-ph {
font: 16px/40px "Trebuchet MS",Arial,Helvetica,sans-serif;
color: #ffffff;
}
.tel-ph a {
font: 16px/40px "Trebuchet MS",Arial,Helvetica,sans-serif;
color: #ffffff;
display: block;
background: #852764;
padding: 8px;
margin-bottom: 10px;
text-decoration: none;
}
.tel-ph a:hover {
color: #ffffff;
background: #AD488A;
}