/*
 * Top level styles
 */
#finriski2 {
    overflow: hidden;
    color: #303030 !important;
    font-family: Arial,Verdana,Helvetica,sans-serif;
}

#finriski2  .row {
    display: block;
    float: left;
    width: 100%;
    background-color: #f2f2f2;
}

/*
 * Input area styles
 */
 #finriski2 .inputdata {
    float: left;
    background-color: #E1F6F9;
    width: 24%;
    padding-bottom: 2%;
    margin: 1% 0 1% 1%;
}

#finriski2 .inputdata .fieldrow {
    padding-top: 10px;
    padding-left: 2%;
}

#finriski2 .inputdata .fieldrow #smokingfields,
#finriski2 .inputdata .fieldrow #genderfields,
#finriski2 .inputdata .fieldrow #diabeticfields {
    margin-bottom: 20px;
}

#finriski2 .inputdata .fieldrow #hdlfields {
    margin-bottom: 10px;
}

#finriski2 .inputdata .fieldrow .fieldwrapper{
    display: inline-block;
    font-size: 0.875em;
}

#finriski2 .inputdata .fieldrow .fieldwrapper .text{

}

#finriski2  fieldset {
    border: none;
    padding: 0 10px;
}

#finriski2  fieldset .error{
    font-weight: bold;
}
#finriski2 fieldset .error-message {
    width: 77%;
    font-size: 0.875em;
    background: url(../images/error.png) no-repeat 5px 9px;
    padding: 5px;
    margin-top: 2px;
    padding-left: 25px;
}

#finriski2  fieldset .value{
    padding: 0 10px 0 0;
    font-size: 0.875em;
}


/* Input area style changes start */

#finriski2 fieldset, #finriski2 label {
    font-weight: normal;
    display: block;
    clear: right;
    font-size: 0.95em;
    padding-left: 0;
    width: 100%;
    white-space: normal;
    font-style: italic;
}

#finriski2 legend, #finriski2 #agefields label, #finriski2  #cholesterolfields label, #finriski2  #hdlfields label, #finriski2  #systfields label {
		font-size: 1.1em;
		font-style: normal;
}


#finriski2  fieldset label.value {
    display: inline;
}

/* Input area style changes end */


#finriski2 .inputdata h2 {
    margin: 0;
    color: #FFFFFF;
    background-color: #18B5CA;
    font-size: 1.125em;
    font-weight: normal;
    padding: 12px;
    text-align: center;
    line-height: 1em;
}

#finriski2 .inputdata input[type=text] {
    width: 30px;
    font-size: 0.875em;
    margin: 0 5px 0 10px;
    text-align: center;
}

#finriski2 .inputdata .fieldError {
    background: #f7e1e1;
    border-color: red;
}

#finriski2 .inputdata input[type=radio] {
    margin: 0 5px 0 0;
    background-color: #E1F6F9;
}


/*
 * Slider styles
 */
#finriski2 .dragbar,#finriski2 .ui-slider {
    width: 103px;
    height: 1px;
    margin: 10px 2px 30px 2px;
    background-color: #1a8fc9;
    border: solid 1px #1a8fc9;
    position: relative;
    float: left;
    position: relative
}
#finriski2 .dragbar .handle,#finriski2 .ui-slider .ui-slider-handle {
    position: absolute;
    top: -8px;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: white;
    border: solid 1px #7ab41d;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    margin-left: -8px;
    /*to hide the text inside the control*/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

/*
 * Result area styles.
 */
#finriski2 .row  .chart-results-wrapper {
    float: right;
    height: auto;
    margin: 0;
    clear: none;
    width: 73%;
    padding: 1% 1% 1% 0;
}

#finriski2 .row .chart-results-wrapper .chart-wrapper {
    float: none;
    height: auto;
    clear: none;
    width: 100%;
    margin: 0px;
    padding-left: 0;
    margin-bottom: 2%;
}

#finriski2 .row .chart-results-wrapper .chart-wrapper .charts-title {
    margin: 0 0 1% 0;
    clear: none;
    min-width: 0px;
    background-color: #ef6323;
    float: none;
    font-size: 1.125em;
    color: #FFFFFF;
    width: 100%;
    height: auto;
    text-align: center;
    font-weight: normal;
    line-height: 1em;
    min-height: 0px;
    padding: 12px 0;

}

#finriski2 .row .chart-results-wrapper .chart-wrapper .columns {
    float: none;
    height: auto;
    margin-left: 0%;
    margin-top: 0px;
    clear: none;
    width: 100%;
    margin-right: 0px;
    min-width: 0px;
    padding-right: 0px;
    padding-left: 0px;
}

#finriski2 .row .chart-results-wrapper .chart-wrapper .columns .chart-title-wrapper {

    float: left;
    height: 350px;
    margin-left: 0%;
    margin-top: 0px;
    clear: none;
    width: 32%;
    padding-top: 15px;
    min-height: 0px;
    margin-right: 1%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: white;
}


#finriski2 .row .chart-results-wrapper .chart-wrapper .columns .chart-title-wrapper .chart-title {
    display: block;
    font-size: 1em;
    width: 94%;
    height: 50px;
    text-align: center;
    font-weight: normal;
    line-height: 1em;
    margin-left: 0%;
    margin-top: 0px;
    clear: none;
    min-height: 0px;
    margin-right: 0px;
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 5px;
    border-bottom-width: 1px;
    border-bottom-style: none;
    border-bottom-color: #606060;
}


#finriski2 .row .chart-results-wrapper .chart-wrapper .columns .chart-title-wrapper .chart {
    height: 300px;
    background-color: white;
}

#finriski2 .row .chart-results-wrapper .chart-wrapper .columns .chart-title-wrapper .chart .flot-text {

    font-size: 1em !important;
}

#finriski2 .row .chart-results-wrapper .chart-wrapper .columns .chart-title-wrapper .chart .flot-tick-label {
    color:#303030;
    font-size: 0.875em;
}

#finriski2 .row .chart-results-wrapper .chart-wrapper .columns .heart-attack-wrapper {

}

#finriski2 .row .chart-results-wrapper .chart-wrapper .columns .ischemic-attack-wrapper {
    width: 33%;
}

#finriski2 .row .chart-results-wrapper .chart-wrapper .columns .joined-wrapper {
    margin-right: 0;
    width: 33%;
}

/*
 * Legend styles
 */
#finriski2 .row .chart-results-wrapper .legend{
    display: block;
    font-size: 0.875em;
    float: left;
    height: auto;
    margin: 0px;
    clear: none;
    padding: 10px 10px 10px 10px;
    min-width: 0px;
    background-color: white;
}

#finriski2 .row .chart-results-wrapper .legend .legend-wrapper {
    float: none;
    height: auto;
    margin: 0px;
    clear: none;
    width: 100%;
    min-width: 0px;
    padding-top: 15px;
}

#finriski2 .row .chart-results-wrapper .legend .legend-wrapper .print {
    float: right;
    margin: 0 5px 5px 0;
    cursor: pointer;
}


#finriski2 .row .chart-results-wrapper .legend .legend-wrapper .legend-item {
    float: left;
    height: auto;
    margin: 0px 0px 15px;
    clear: none;
    width: 100%;
    min-width: 0px;
}

#finriski2 .row .chart-results-wrapper .legend .legend-wrapper .legend-item .legend-color {
    float: left;
    height: 20px;
    margin: 0 0 0 0;
    clear: none;
    width: 5%;
}


#finriski2 .row .chart-results-wrapper .legend .legend-wrapper .legend-item .your-risk-color {
    background-color: #bf302a;
    margin-top: 6px;
}

#finriski2 .row .chart-results-wrapper .legend .legend-wrapper .legend-item .no-risk-color {
    background-color: #6bac05;
    margin-top: 6px;
}

#finriski2 .row .chart-results-wrapper .legend .legend-wrapper .legend-item .average-color {
    background-color: #b7d432;
    margin-top: 6px;
}

#finriski2 .row .chart-results-wrapper .legend .legend-wrapper .legend-item .legend-text {
    float: left;
    width: 93%;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1.5em;
    margin: 2px 0px 0px 2%;
    clear: none;
    min-height: 0px;
}


.clearfix:before,.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

/*
 * Responsiviness
 */

@media screen and (max-width : 740px) {
  #finriski2 .inputdata,   #finriski2 .row .chart-results-wrapper {
    float:none;
    width: 100%;
    margin: 0;
  }
}