/* CSS for the PIE Modeller */ 

@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700);

/* Background image */ 
#backwrap {
  background:url(background.jpg) center bottom no-repeat;
  height:100%;
  width:100%;
  min-height:550px;
  min-width:700px; 
}

/* Content */
#content {
  width:80%;
  min-width: 700px;
  max-width: 996px; 
  margin-left: auto;
  margin-right: auto;
}

/* Header */
#header {
}
#header_cookies_link { 
  float:right; 
  font-size:0.8em;
}
#header_logo {
  float:left; 
}

/* Spacer */
#spacer_div {
  height: 20px; 
  width: 100%; 
  clear: both; 
  border: none; 
}
#spacer_div_small {
  height: 1px; 
  width: 100%; 
  clear: both; 
  border: none; 
}
/* Content divs */
#div_full_width {
  width: 100%; 
} 
#div_half_width_left {
  width: 49%; 
  float: left; 
  height: auto; 
}
#div_half_width_right {
  width: 49%; 
  float: right; 
  height: auto; 
}
#page_content_div {
  width=100%;
  border: 1px solid #aeb9bf;
  color: #000;
  height: auto;
  background-color: #fff; 
}

.content_title {
  font-weight: 300; 
  font-size: 1.2em; 
  background: #005da9; 
  color: #fff; 
  padding: 5px 15px 5px 15px;   /* Top,right,bottom,left */ 
  margin: 0 0 0 0;
  display: block; 
}

/* Div that holds the actual text within the content div */
#page_content_text_div {
  padding: 5px 15px 10px 15px;   /* Top,right,bottom,left */
  height: auto; 
  color: #000; 
}

/* Content holder border rounding */ 
.rounded_top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded_base {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* --------------- TYPOGRAPHY --------------- */ 
body {
  line-height: 110%;
  font-family: 'Arial', sans-serif; 
} 
h1, h2, h3, h4, h5 { 
  color: #00a0d7;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300; 
  /* letter-spacing: -1px; */
}
h1 {
  font-size: 1.8em;
  line-height: 2em; 
  margin-bottom: 14px; 
}
h2 {
  font-size: 1.5em;
  line-height: 1.7em; 
  margin-bottom: 10px; 
}
h3 {
  font-size: 1.2em; 
  line-height: 1.3em; 
  margin-bottom: 8px; 
}
h4 {
  font-size: 1em; 
  line-height: 1em; 
  margin-bottom: 8px; 
}
h5 {
  font-size:0.9em; 
  line-height: 1em; 
  margin-bottom: 8px;
}
.footer {
  font-size: 0.9em;
}
p {
  margin: 8px 0px 0px 0px; 
  padding: 0; 
  border: 0; 
  font-size: 0.9em; 
} 
ol { 
  margin-top: 6px; 
  margin-bottom: 2px; 
}
ul {
  margin: 0; 
}
li { 
  margin-top: 8px; 
  font-size: 0.9em; 
} 

/* --------------- LINKS -------------------- */ 

a, a:visited {
  text-decoration: none; 
  outline: 0; 
  color:#00a0d7; 
}
a:hover, a:focus img { 
  color: #000; 
  outline: 0; 
  text-decoration: none;
}
img { 
  border: 0;   /* Prevents IE from highlighting image links */ 
}



/* --------------- MODELLER FORM LAYOUT STUFF --------------- */ 
#modeller_input_div { 
  width: 28%; 
  float: left; 
  height: auto; 
}

#modeller_form_style {
  /* height: 320px;  */
  padding: 0px 0px 0px 0px; 
  border: 0px;
} 
#modeller_form_style form {
  height: 100%; 
} 
#modeller_form_style label { 
  clear: both; 
  display: block; 
  font-weight: bold; 
  text-align: left; 
  font-size: 0.8em; 
  width: 33%; 
  float: left; 
  margin: 3px 3px 0px 0px;
} 
#modeller_form_style .label_with_no_description { 
  margin-top: 5px; 
  /* margin: 5px 10px 0px 0px; */
}
#modeller_form_style .wider_label { 
  width: 45%; 
} 
#modeller_form_style input, textarea, select { 
  outline: none; 
  float: left;
  font-size: 12px; 
  line-height: 110%; 
  color: #666; 
  background: #f5f5f5; 
  width: 100%; 
  margin: 2px 2px 5px 0px; 
  padding: 3px 0px 3px 0px;
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border: 1px solid #ccc; 
  box-sizing:content-box;
  -ms-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box; 
} 
#modeller_form_style .field_wrapper { 
  width: 63%; 
  min-width: 110px; 
  float: left; 
} 
#modeller_form_style .narrower_field { 
  width: 50%; 
  min-width: 70px; 
} 
#modeller_form_style .field_error { 
  width: 30%; 
  float: left; 
  font-size: 0.6em; 
  padding-top: 5px; 
  padding-left: 4px; 
  color: red; 
} 
#modeller_form_style .all_field_error { 
  width: 100%; 
  float: left; 
  font-size: 0.6em; 
} 
#modeller_form_style input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 5px rgba(0, 128, 255, 1);
  -webkit-box-shadow: 0 0 5px rgba(0, 128, 255, 1); 
  -moz-box-shadow: 0 0 5px rgba(0, 128, 255, 1);
  border: 1px solid #999; 
  background-color: #fff; 
  color:#333; 
} 
#modeller_form_style .label_information {
  color: #666666;
  display: block;
  font-size: 0.7em;
  font-weight: normal;
  text-align: left;
  line-height: 90%; 
} 
/* DOB related fields */
#modeller_form_style .dob_label { 
  padding-top: 1px; 
}
#modeller_form_style .dob_day { 
  min-width: 1.3em; 
  max-width: 1.3em; 
  margin-bottom: 0px; 
  padding: 3px; 
} 
#modeller_form_style .dob_month { 
  min-width: 1.3em; 
  max-width: 1.3em; 
  margin-bottom: 0px; 
  padding: 3px; 
} 
#modeller_form_style .dob_year { 
  min-width: 2.4em; 
  max-width: 2.4em; 
  margin-bottom: 0px; 
  margin-right: 0px;
  padding: 3px; 
} 
#modeller_form_style .info_beneath_input {
  margin: 2px 0px 3px 3px;  
}
#modeller_form_style .gender { 
  min-width: 5.5em; 
  max-width: 5.5em; 
} 
#modeller_form_style .numeric_field { 
  width: 50%; 
  padding-left: 3px;
  padding-right: 3px; 
} 
#modeller_form_style .checkbox { 
  width: 1em; 
  margin: 7px 0 0 0; 
} 
#controls_content_div { 
  padding: 10px 10px 0px 15px;   /* Top,right,bottom,left */
  border: 0px; 
  margin: 0px; 
}
table.split-date-wrap { 
  width:auto; 
  margin-bottom:0px
} 
table.split-date-wrap td { 
  padding:0 0.1em 0 0; 
  border-bottom:0 none; 
} 
table.split-date-wrap td input { 
  /* margin-right:0.15em;  */
} 
table.split-date-wrap td label { 
  font-size:10px;
  font-weight:normal;
  display:block;
}
table td.lastTD input { 
  margin-right:0; 
}
#modeller_form_style .slider_label { 
  width: 100%; 
} 
#graph_slider_container { 
  width: 100%; 
  float: left; 
} 
.fd-slider { 
  width: 78%; 
  min-width: 130px; 
  float: left; 
  margin: 3px 3px 0 0; 
} 
#graph_rpi { 
  max-width: 1.8em; 
  padding: 3px 3px 3px 3px !important; 
  margin-bottom: 0 !important;
} 
#graph_years { 
  max-width: 1.8em; 
  padding: 3px 3px 3px 3px !important; 
  margin-bottom: 5px !important;
} 
#graph_slider_div { 
  width: 100%; 
  float: left; 
  margin-top: 0px; 
  margin-bottom: 0px;
  display: block; 
} 

/* --------------- GRAPH LAYOUT STUFF --------------- */ 
#graph_and_table_content_div { 
  padding: 10px 15px 10px 15px;   /* Top,right,bottom,left */
  border: 0px; 
  margin: 0px; 
}
#graph_display_div { 
  width: 70.5%; 
  float: right; 
  height: 100%;  
}
#graph_display_style {
  /*height: 320px; */
  z-index: 1; 
  padding: 0px 0px 0px 0px; 
  text-align: center; 
  position: relative; 
} 
#idModellerGraphDiv { 
  position: relative; 
  /* display: block; */ 
} 
#loading_image { 
  z-index: 2; 
  position: absolute; 
  width: auto; 
  margin: auto; 
  right: 15%; 
  left: 20%; 
  bottom: 0; 
  /* left: 26%;  */
} 

/* -------------- DATA TABLE STUFF -------------- */ 
#table_display_style { 
  display: block; 
  text-align: center; 
}
#idTablePosition { 
  display: block; 
  text-align: center; 
}
#tabData { 
  border-collapse: collapse; 
  margin: auto; 
} 
#tabData td, #tabData th { 
  font-size: 0.8em; /*font-weight: 300; */
  border: 1px solid #4F81BD;
  padding: 1px 6px 1px 6px; 
} 
#tabData th  { 
  font-size:0.8em;
  text-align:center; 
  padding:2px 10px 2px 10px;
  //background-color:#4779AD;
  background-color: #005da9; 
  color:#ffffff;
} 
#tabData tr { 
  text-align: center;
}
#tabData td.alt {    /* alternative rows - blue background; black text */ 
  color: #000000;   
  background-color: #B1C8E2;
} 
#tabData td.crossYr { /* cross over row - highlight green */ 
  color: #000000;
  background-color: #A3F000;
} 
#tabData td.breakYr { /* break even row - highlight red */ 
  color: #000000;
  background-color: #F75D59;
} 


/* -------------- LEGEND TABLE STUFF -------------- */ 
#idTabExplanation { 
  font-size: 0.8em; 
} 
#idTabExplanation td.expIcon { 
  vertical-align: top; 
  width: 1.6em;
  text-align: center;
}