tny_layout.css

@charset "utf-8";

@font-face {
   font-family: Segment14;
   src: url('segment14.woff') format('woff'),
        url('segment14.ttf') format('truetype');
}

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 9
   Review Assignment

   Tulsa's Summer Party Layout Style Sheet
  
   Filename: tny_layout.css

   Segment14 font designed by Paul Flo Williams. Download at:
   http://www.1001fonts.com/segment14-font.html#styles

*/


/* HTML and Body styles */

html {
   background: linear-gradient(to bottom, rgb(120, 84, 23), rgb(51, 51, 51));
   font-family: Verdana, Geneva, sans-serif;
   min-height: 100%;
}

body { 
   margin: 0px auto;
   min-width: 340px;
   max-width: 1020px;  
   width: 100%;
   min-height: 100%;
}


/* Header styles */

header img#logoImg {
   display: block;
   width: 100%;
}

header {
   background: linear-gradient(to bottom, black 70%, rgb(185, 0, 102));
   border-bottom: 1px solid rgb(0, 0, 0);
   color: white;
   position: relative;
   width: 100%;
}

header > h1 {
   position: absolute;
   top: 15px;
   right: 10px;
   text-align: right;  
   font-size: 1.3em;
   letter-spacing: 0.05em;
   line-height: 1em;
   font-family: 'Times New Roman', serif;
   font-weight: normal;
   color: rgba(255, 0, 192, 0.7);
}

header > h2 {
   position: absolute;
   top: 15px;
   left: 10px;
   font-size: 0.9em;
   font-weight: normal;
   color: rgba(255, 82, 192, 0.8);
}

/* Navigation list styles */

header nav.horizontal {
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   -webkit-flex: 0 1;
   flex: 0 1;   
}

body header nav ul {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
}

nav.horizontal ul li {
   -webkit-flex: 1 1;
   flex: 1 1;
   font-size: 0.8em;
   line-height: 1.5em;
   height: 1.5em; 
   font-family: 'Trebuchet MS', Helvetica, sans-serif;
   text-shadow: black 2px 1px 0px, black 4px 2px 5px;     
}

nav.horizontal ul li a {
   background-color: rgba(255, 255, 255, 0.2);
   display: block;
   color: rgba(255, 255, 255, 0.8);
   text-align: center;
}

nav.horizontal ul li a:hover {
   background-color: rgba(255, 88, 192, 0.5);
}

/* Time Clock Styles */

div#currentTime {
   display: block;
   position: absolute;
   top: 35px;
   left: 10px;   
   background-color: transparent;
   border: hidden;
   color: rgba(255, 82, 192, 0.8);
   width: 140px;
   font-size: 0.6em;
   line-height: 1.1em;
   font-family: 'Trebuchet MS', Helvetica, sans-serif;
   font-weight: normal;
}

div#currentTime span {
   display: block;
   width: 100%;
}

/* Styles for the Countdown Clock */

div#countdown {
   width: 100%;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
   margin-top: 10px;

}

div#countdown div {
   display: block;
   text-align: center;
   width: 100%;
   line-height: 1.5em;
   font-size: 0.5em;
   font-family: segment14, sans-serif;
   color: white;
   background: rgba(51, 51, 51, 0.7);
   margin: 0px 1px;
   padding: 5px;
   color: white;
}

div#countdown div span {
   font-size: 2em;   
}

/* Article Styles */

article { 
   background: white;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap; 
}

article section, article nav.vertical {
   -webkit-flex: 1 1 300px;
   flex: 1 1 300px;
}

section h1 {
   font-size: 1.2em;
   text-align: center;
   margin: 10px;
}

section p {
   margin: 20px;
}

/*Section 1 styles */

article section:nth-of-type(1) {
   background-color: rgba(255, 0, 192, 0.6);
}

/* Section 2 styles */

article section:nth-of-type(2) {
   background-color: rgba(255, 0, 192, 0.5);
}


/* Vertical navigation list styles */

nav.vertical {
   background-color: rgba(255, 0, 192, 0.7);
}

nav.vertical h1 {
   color: rgba(255, 255, 255, 0.7);
   text-shadow: rgba(192, 0, 145, 0.8) 2px 2px 5px;
   font-size: 1.35em;
   letter-spacing: 3px;
   text-align: center;
   padding: 10px;
   margin: 0px 0px 15px 0px;
   background-color: rgba(233, 0, 177, 0.5);
}


nav.vertical ul li {
   font-size: 0.82em;
   letter-spacing: 3px;
   text-align: center;
}


nav.vertical ul li a {
   display: block;
   padding-left: 30px;
   height: 32px;
   line-height: 32px;
   width: auto;
   color: rgb(51, 51, 51);
}

nav.vertical ul li a:hover {
   background-color: rgba(255, 192, 0, 0.45);
}


/* Page footer styles */

footer {
   clear: left;
   display: block;
}

footer address {
   display: block;
   font-style: normal;
   text-align: center;
   font-size: 0.5em;
   line-height: 20px;
   height: 20px;
   background-color: rgb(215, 0, 152);
   color: white;
}

/* =============================================
   Tablet and Desktop Styles: greater than 510px
   =============================================
*/
@media only screen and (min-width:511px) {
   
   header > h1 {
      font-size: 1.9em;
   }
   
   header > h2 {
      font-size: 1.1em;
   }
   
   div#currentTime {
      font-size: 0.9em;
      line-height: 1em;
   } 
   
   div#countdown {
      font-size: 1.3em;
   }
   
   footer address {
      font-size: 0.6em;
   }     
}

/* =============================================
   Tablet and Desktop Styles: greater than 640px
   =============================================
*/
@media only screen and (min-width:641px) {
      
   header > h1 {
      font-size: 2.4em;
   }
   
   header > h2 {
      font-size: 1.3em;
   }  
      
   nav.horizontal ul li {
      font-size: 1em;
   }
   
   div#currentTime {
      font-size: 1em;
      line-height: 1.1em;
      top: 40px;
   }   
   
   div#countdown  {
      font-size: 1.5em;
   }    
   
   footer address {
      font-size: 0.8em;
   }   
}

/* =============================================
   Tablet and Desktop Styles: greater than 720px
   =============================================
*/
@media only screen and (min-width: 721px) {
   header > h1 {
      font-size: 3.3em;
   }

   header > h2 {
      font-size: 1.5em;
   }
   
   div#currentTime {
      font-size: 1.1em;
      line-height: 1.2em;
      top: 40px;
   }
   
   div#countdown {
      font-size: 1.7em;
   }      
}

/* =============================================
   Tablet and Desktop Styles: greater than 1020px
   =============================================
*/
@media only screen and (min-width: 1021px) {

   body {
      margin: 40px auto;
   }   
}