/*
IT270 Final

      Author: Christina Morita
      Date:   October 22, 2015
      
   Filename:         style.css
   Supporting Files: 

*/

/* Display elements as blocks */
article, aside, figure, figcaption, footer, hgroup, header, 
section, nav {
   display: block;
}


/* Set the default page element styles */

body * {
   font-family: Verdana, Geneva, sans-serif;
   line-height: 1.5em;
   list-style: none;
   margin: 0px;
   padding: 0px;
}



/* Body Styles */
body {
   background-image: url(joshuatree.jpg); 
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: top;
   width: 95%;
   min-width: 1000px;
   max-width: 1400px;
   height: 100%
   margin: 0;
   padding: 0;
   font-family: Verdana, Geneva, sans-serif;
}

.wrap {
  width: 960px;
  margin: 0 auto;
}

#dateBox {
   float: right; 
   width: 200px; 
   height: 50px; 
   font-weight: normal;
   border: 1px solid black; 
   background-color: black; 
   color: yellow;
   font-size: 10px; 
   text-align: center; 
   letter-spacing: 1px; 
   word-spacing: 1px;
}


/* Styles for the domeSpecs table */
table.domeSpecs {
    font-size: 16px;
    margin-bottom: 20px;
    margin-left: 20px;
    left: 600;
    top: 300;
    border-collapse: collapse;
    background-image: url(tableback.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: cover; 
    table-layout: fixed;
    
}

table.domeSpecs td {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    word-wrap:break-word;
    
}

table.domeSpecs caption {
    font-size: 18px;
    kerning: 5px;
    caption-side: top;
    text-align: center;
    margin-bottom: 10px;
    
}

/* Table header styles */

table.domeSpecs thead {
    border-bottom: 2px gray;
    background-image: url(top.jpg);
    background-repeat: repeat-x;
    }

table.domeSpecs thead tr {
    height: 40px;
}

table.domeSpecs thead th {
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 5px;
    padding-right: 5px;
    kerning: 2px;
   
}

table.domeSpecs thead th:first-of-type {
    background: url(topleft.jpg);
    background-position: top left;
    background-repeat: no-repeat;
}

table.domeSpecs thead th:last-of-type {
    background: url(topright.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    
}

/* Table footer styles */
table.domeSpecs tfoot {
    border-top: 2px solid gray;
    text-align: center;
    background: url(bottom.jpg);
    background-repeat: repeat-x;
    
}

table.domeSpecs tfoot tr {
        height: 40px;
        
}

table.domeSpecs tfoot td:first-of-type {
    background: url(bottomleft.jpg);
    background-position: bottom left;
    background-repeat: no-repeat;
}

table.domeSpecs tfoot td:last-of-type {
    background: url(bottomright.jpg);
    background-position: bottom right;
    background-repeat: no-repeat;
    
}

/* Table body styles */
table.domeSpecs tbody tr {
    height: 50px;
    border-bottom: 1px dotted gray;
}

table.domeSpecs tbody td:first-of-type {
    background: url(left.jpg);
    background-position: top left;
    background-repeat: repeat-y;
    
}

table.domeSpecs tbody td:last-of-type {
    background: url(right.jpg);
    background-position: top right;
    background-repeat: repeat-y;
    
}

table.domeSpecs tbody tr:nth-of-type(2n) {
    background-color: rgb(152, 228, 215, .6);
}

table.domeSpecs tbody tr:nth-child(2n+1) {
    background-color: rgb(255, 255, 255, .6);
}

table.domeSpecs col.firstCol {
    width: 22%;
    
}

table.domeSpecs col.middleColumns {
    width: 28%;
    
}

table.domeSpecs col.lastColumn {
    width: 22%;
    
}

/* Header Styles */

header {
   width: 100%;
   position: relative;
}

header nav {
   position: relative;
   width: 100%;   
   z-index: 4;
}

header nav ul li {
   position: relative;
   display: block; 
   float: left; 
   width: 13%;
   margin: 0px 2px;
   text-align: center;
}

header nav ul li a {
   display: block;
   border: 1px green;
   width: 100%;
   background-color: black;
   color: white;
}

header nav ul li a:hover {
   color: blue;
}

header h1 {
    clear: left;
    float: center;
    text-align: center;
    font-size: 7.0em;
    font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
}


header h2 {
   clear: left;
   width: 100%;
   font-size: 1.6em;
   letter-spacing: 3px;
   font-weight: bold;
   margin-left: 40%;
}

/* Vertical Navigation Styles */
nav.vertical {
   width: 15%;
   background-size: contain;  
}

nav.vertical ul {
   margin-left: 5px;
   float: left;
}

nav.vertical li.lTitle {
   font-size: 1em;
   margin-top: 25px;
   margin-bottom: 10px;
   font-weight: bold;
}

nav.vertical li {
   display: block;
   margin-bottom: 3px;
}

nav.vertical li a {
   display:block;
   width: 100%;
   font-size: 0.8em;
   margin-left: 15px;
   color: darkblue;
}

nav.vertical li a:hover {
   color: purple;
}


/* Section Styles */
section {
   margin-top: 10px;
   margin-bottom: 10px;
   float: right;
}

img1 {
   rotate(7deg);
   }

section article h2 {
   margin: 0px 0px 0px 0px;
   font-family: "Arial, Helvetica, sans-serif"
   font-weight: normal;
   text-align: center;
   color:  white;
   background: url(turtleshell.jpg);
   border-top-left-radius: 14px;
   border-top-right-radius: 14px;
   font-size: 1.2em;
   letter-spacing: 6px;
   line-height: 3em;
}

section article {
   background: url(green.png);
   background-opacity: 0.5;
   border: 4px  solid black;
   border-radius: 30px;
   margin-bottom: 20px;
}

section article h4 {
    font-size: .5em;
    font-style: oblique;
    text-align: center;
    margin-bottom: 10px;
    color: black;
}
section article p {
   font-size: 1em;
   text-align: center;
   color: darkblue;
   margin: 20px;
   font-weight: bold;
   font-family:'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

section article iframe {
    margin: auto auto auto 30px;
    border: 5px solid black;
}

section.middle article:first-of-type p:first-of-type {
   text-align: center;
}

section.right article iframe {
    margin: auto auto auto auto;
    border: 5px solid black;
}


/* Middle Section Styles */
section.middle {
   width:  40%;
   float: right;
   margin-left: 5px;
}


section.middle article#naturalbeauty img#img1 {
    transform: rotate(-8deg);
    margin-left: auto;
    margin-right: auto;
    display: block;
}

section.right article iframe {
    margin: auto auto auto 5%;
}

section.right article iframe#NPR {
    margin: 10px auto auto auto;
}

/* Right Section Styles */
section.right {
   width: 45%;
   float: right;
   margin-left: 15px;
} 

footer {
   position: absolute;
   bottom:0;
   width:100%;
   height:25px;
   background:white;
   text-align:center;
   font-variant: small-caps;
}