/*
*  intro.css
*
*/

/* --- TEXT --- */

/* Defaults */

/* apply a natural box layout model to all elements */
* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

html { 
	background-color: #829bbc;
	background: url('../images/intro/bg_mobile.jpg') no-repeat; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  line-height: 1.4;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}
p {
  margin-bottom: 1em;
}
#page {
  width: 100%;
  text-align: center;
  padding: 1.4em;
  z-index: 10;
}

/* end Defaults */
		

/* --- HEADER --- */
.masthead {
  margin-bottom: 12px;
}

.parent_brand, .site_brand {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.parent_brand { 
  max-width: 70px;
  width: 13%;
  margin-right: 2px;
}

.parent_brand img {
  width: 100%;
}

.site_brand {
	text-align: left;
  width: 60%;
  background-size: 100%;
  margin-top: 3px;
}

.jpl_logo {
  display: block;
  margin-bottom: 4px;
  line-height: 0;
  width: 100%;
}

.jpl_logo img { 
  width: 100%;
/*  max-width: 436px;*/
  vertical-align: top;
}

.site_logo {
  margin-bottom: 12px;
  display: block;
}

.site_logo img {
 width: 100%;
 max-width: 664px;
 vertical-align: top;
}

/* --- end HEADER --- */


/* Element-specific */

#curtain {
  background-color: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

ul.thumbs {
  display: none;
}

#main_section h1 {
  color: white;
  font-weight: 400;
  line-height: 1.4em;
  font-size: 20px;
  margin: 0 0 24px 0;
}

#main_panel h2 {
  font-size: 20px;
}

.more_info h3 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}

.more_info p {
  font-weight: 400;
}


/* end Element-specific */

/* --- end TEXT  --- */



/* --- LINES --- */

.gradient_line  {
  margin: 0 auto;
  width:100%;
  height:1px;
  clear:both;
  background-color:rgba(85,110,141,0);
  background-image:-webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0));
  background-image:-moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0));
  background-image:-ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0));
  background-image:-o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0))
}

.more_info .gradient_line {
  margin-bottom: 18px;
}

/* --- end LINES --- */





/* --- FORM ELEMENTS --- */

#start button {
  border: 1px solid #035185;
  background-color: #035185;
  padding: 8px 14px;
  color: #E5EAF0;
  font-size: 22px;
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 200;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 2px;
}

#start button:hover {
  background-color: #034572;
}

#main_section input[type="checkbox"] {
  margin-right: .8em;
  cursor: pointer;
}

#main_section #start #submit:after {
   content: "";
}

#main_section label#skip {
  color: #6283ac;
  cursor: pointer;

}

input[type=checkbox].dsn_checkbox {
  position: absolute; 
	overflow: hidden; 
	clip: rect(0 0 0 0); 
	height:1px; 
	width:1px; 
	margin:-1px; 
	padding:0;
	border:0;
}

input[type=checkbox].dsn_checkbox + label.dsn-label {
	padding-left:22px;
	height:15px; 
	display:inline-block;
	line-height:15px;
	background-repeat:no-repeat;
	background-position: 0 0;
	vertical-align:middle;
	cursor:pointer;
}



input[type=checkbox].dsn_checkbox:checked + label.dsn-label {
	background-position: 0 -15px;
}

.dsn-label{
  background-image:url('../images/intro/icon-dsn-checkboxes-sprite@2x.png');
  background-size: 15px 30px;
}

input[type=checkbox].dsn_checkbox + label.dsn-label, .more_link, .dsn_home_link {
  font-size: 13px;
}

.more_link, .dsn_home_link {
  color: #fff;
  text-decoration: none;
  line-height: 15px;
  display: inline-block;
  vertical-align: middle;
}

#skip_intro, .dsn_home_link {
  display: inline-block;
  margin-left: 16px;
}

/* --- end FORM ELEMENTS --- */



#page_header {
  margin-bottom: 1.2em;
  width: 100%;
}


#main_panel .more_info {
  text-align: left;
  margin: 0 auto 12px;
  padding: 16px 16px 1px 16px;
  display: none;
  background-color: white;
  background-color: rgba(255,255,255,.8);
  color: #023557;
  /* background-color: rgba(0,0,0,.7); */
}

.link_wrapper  {
  text-align: center;
  position: absolute;
  width: 100%;
}

.formlink_wrapper {
  position: relative;
  height: 100px;
}

#start {
  margin-bottom: 18px;
}


/* ----- end STYLES FOR SMALL SCREENS ----- */

/* smartphone portrait */

@media only screen and (max-device-width : 480px) and (orientation: portrait) {
  #page_header {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    height: 66px;
    background-color: rgba(0,0,0,.6);
  }
  #main_section {
    padding: 8px 6px 50px;
  }
  #main_section h1 {
   margin-bottom: 16px;
  }
  .parent_brand {
    width: 16%;
  }
  .site_brand {
    width: 64%;
    padding-top: 4px;
    
  }
  .site_logo {
    width: 100%;
    margin: 0 auto 10px;
  }
  
  .masthead {
    margin-top: 8px;
  }
  .link_wrapper {
    position: fixed;
    bottom: 66px;
    left: 0;
    background-color: #035185;
    padding: 2px 0 8px;
  }
}




/* smartphone landscape */

@media only screen and (min-device-width : 320px) and (max-device-width: 480px) and (orientation: landscape) {
  #main_section h1 {
    font-size: 16px;
  }
  
  #start button {
    font-size: 16px;
  }
  
  input[type=checkbox].dsn_checkbox + label.dsn-label, .more_link, .dsn_home_link {
   font-size: 12px;
  }
}


/* --- Medium-small screen --- */

@media only screen and (min-width: 600px) {
  
  #page {
    padding: 1.6em;
  }
  
  #main_section h1 {
    font-size: 26px;
    font-weight: 300;
  }
  
  .site_brand {
    width: 300px;
    margin-top: 5px;
  }
}





/* --- Medium-small screen, non-retina --- */

@media only screen and (min-width: 768px) {
  html { 
    background: url('../images/intro/bg.jpg') black no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  #page {
    padding: 2.6em;
    text-align: left;
  }
  
  #page_header{
    width: 600px;
    margin-bottom: 1.8em;
  }
  
  .parent_brand { 
    width: 70px;
  }
  
  .site_brand {
    width: 300px;
  }
  
  #main_section {
    width: 460px;
    text-align: left;
  }
  
  #main_panel .more_info {
    margin-bottom: 1.8em;
    padding: 18px 24px 6px 24px;
  }

  //#main_section #start #submit:after {
  //   content: " DSN NOW"; /* Chevron is \3009, but it's a little big -JM */
  //  }

  #main_section h1 {
    font-size: 26px;
    text-align: left;
    padding: 0;
    width: 100%;
  }

  .link_wrapper {
    text-align: center;
  }
  #start {
    text-align: center;
  }

}


/* iPad landscape */

@media only screen and (min-device-width: 768px)  and (max-device-width: 1023px) and (orientation : landscape) {
  #page {
    padding: 1.2em 1.6em;
  }
  
  #page_header{
    width: 60%;
    margin-bottom: 1.8em;
  }
  
  #main_section {
    width: 50%;
  }
  
  .parent_brand { 
    width: 58px;
  }
  
  .site_brand {
    width: 240px;
  }
  
  #main_section h1 {
    font-size: 18px;
  }
  
  #start {
    margin-left: 0;
    text-align: center;
  }
  
  #start button {
   font-size: 18px;
  }
}


/* --- medium large screen --- */

@media only screen and (min-width: 1100px) {  
  
  #page {
    padding: 3em;
  }
  
  #page_header .masthead {
    margin-bottom: .6em;
  }
  
  .parent_brand {
    width: 13%;
  }
  
  .site_brand {
    width: 300px;
  }
  
  #main_section {
   width: 525px; 
  }
  
  #main_section h1 {
    font-size: 26px;
  }

  /* Thumbnails */
  #main_panel ul.thumbs article {
    position: relative;
  }
  
  #main_panel ul.thumbs {
    display: block;
    position: relative;
    left: 4.8em;
    margin-bottom: 2px;
  }
  
  #main_panel ul.thumbs li {
    vertical-align: top;
    display: inline-block;
    width: 32%;
  }
  
  #main_panel ul.thumbs li + li {
    margin-left: 6px;
  }
  
  #main_panel ul.thumbs li:nth-child(2) {
    text-align: center;
  }

  #main_panel ul.thumbs li article {
    width: 100%;
  }
  
  #main_panel ul.thumbs li article img {
    width: 100%;
  }
  
  #main_panel ul.thumbs li h2 {
    position: absolute;
    bottom: 12px;
    font-size: 13px;
    font-weight: 400;
    margin: 0 10px;
  }
  
  /* end Thumbnails */
    

  .formlink_wrapper {
    margin-left: 0;
    top: auto;
    bottom: auto;
  }
  
  .link_wrapper {
    position: relative;
    top: auto;
    bottom: auto;
  }

  
  input[type=checkbox].dsn_checkbox + label.dsn-label, .more_link, .dsn_home_link {
   font-weight: 500;
   font-size: 14px;
  }
  
  #skip_intro, .more_link, .dsn_home_link {
    
    height: 30px;
    vertical-align: top;
    
  }
  
  .more_link {
    padding: 7px 0 0 11px;
    width: 90px;
  }
  
  .dsn_home_link {
    padding: 7px 11px 0 11px;
  }
  
  #skip_intro {
    padding: 3px 12px 0 12px;
  }
  
  #skip_intro, .dsn_home_link {
    margin-left: 6px;
  }
}




@media only screen and (min-width: 1600px) {  
    
  #page {
    width: 100%;
    text-align: left;
    padding: 3em 0 40px 3.6em;
  }
  
  #main_section {
   width: 660px; 
  }
  
  #page_header {
    width: 740px;
    margin-bottom: 2em;
  }
  
  #page_header .masthead {
    margin-bottom: 1.2em;
  }
  
  .parent_brand {
    width: 11.3%;
    max-width: none;
  }
  
  .site_brand {
    width: 355px;
    margin-left: 8px;
  }
  
  .site_logo {
    margin-bottom: 18px;
  }
  
  .jpl_logo {
    margin-bottom: 5px;
  }
  
  .jpl_logo img {
    width: 100%;
    max-width: none;
  }
  
  #main_section h1 {
    font-size: 26px;
  }
  
  #main_panel ul.thumbs {
    left: 6em;
    margin-bottom: 3px;
  }
  
  #main_panel ul.thumbs li h2 {
    font-size: 16px;
    font-weight: 400;
    margin: 0 15px 7px 15px;
  }
  
  .formlink_wrapper {
    width: 99.3%;
  }
  
  #start button {
    font-size: 27px;
  }
  
}
  




/* --- IE8 --- */

html.ie8 { 
	background-color: #829bbc;
	background-position-x: 0;
}

.ie8 .masthead {
  clear: both;
}

.ie8 .dsn-label{
  background-image:none;
}

.ie8 input[type=checkbox].dsn_checkbox {
  position: relative; 
	overflow: visible; 
	clip: none; 
	height:auto; 
	width:auto; 
	margin:0; 
	padding:0;
	border:0;
}

.ie8 input[type=checkbox].dsn_checkbox + label.dsn-label {
  padding-left:0;
}

.ie8 #main_section input[type="checkbox"] {
  margin-right: 4px;
}

.ie8 input[type=checkbox].dsn_checkbox + label.dsn-label, .ie8 .more_link, .ie8 .dsn_home_link{
 font-weight: 500;
 font-size: 14px;
}

.ie8 #skip_intro, .ie8 .more_link, .ie8 .dsn_home_link {
  height: 30px;
  vertical-align: top;
}

.ie8 .more_link {
  padding: 7px 0 0 11px;
  width: 90px;
}

.ie8 .dsn_home_link {
  padding: 7px 11px 0 11px;
}

.ie8 #skip_intro {
  padding: 3px 12px 0 12px;
}


/* overrides for mobile portrait */
.ie8 #page_header {
  position: relative;
  bottom: 0;
  left: 0;
  margin: 0;
  height: auto;
  background-color: rgba(0,0,0,.6);
}

.ie8 .link_wrapper {
  position: relative;
  background-color: transparent;
  padding: 0;
}

.ie8 #start {
  display: block;
}



/*
.ie8 #main_section {
  padding: 8px 6px 50px;
}
.ie8 #main_section h1 {
 margin-bottom: 16px;
}
.ie8 .parent_brand {
  width: 16%;
}
.ie8 .site_brand {
  width: 64%;
  padding-top: 4px;
  
}
.ie8 .site_logo {
  width: 100%;
  margin: 0 auto 10px;
}

.ie8 .masthead {
  margin-top: 8px;
}
.ie8 .link_wrapper {
  position: fixed;
  bottom: 66px;
  left: 0;
  background-color: #035185;
  padding: 2px 0 8px;
}
*/


/* --- end IE8 --- */
  
  



/* --- RETINA --- */

/*@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px) {

}*/

/* --- end RETINA --- */