/*
   Try and Succeed Sports Typographic Style Sheet
   Name: 
*/

/* HTML and Body Styles */

@charset "utf-8";

@font-face {
   font-family: Quicksand;
   src: url(../fonts/Quicksand-Regular.woff) format('woff'), 
        url(../fonts/Quicksand-Regular.ttf) format('truetype');
}

html {
   background-color: hsl(27, 72%, 72%);
}

body {
   color: rgb(91, 91, 91);
   background-color: ivory;
   font-family: Verdana, Geneva, sans-serif;	
}


/* Heading Styles */

h1 {
   font-size: 2.2em;
}

h2 {
   font-size: 1.5em;
}

h1, h2 {
   font-family: Quicksand, Verdana, Geneva, sans-serif;
	letter-spacing: 0.1em;
}


article#about_tss h1 {
   color: white;
   background-color: rgb(222, 128, 60);
}

article#about_tss h2 {
   color: white;
   background-color: rgb(235, 177, 131);
}


/* Aside and Blockquote Styles */

aside {
   font-size: 0.8em;
}

aside blockquote {
   color: rgb(232, 165, 116);
   margin: 20px 5px;	
}

aside blockquote::before {
   content: '\201c';
   font-family: 'Times New Roman', Times, serif;
   font-size: 1.6em;
   font-weight: bold;
}

aside blockquote::after {
   content: '\201d';
   font-family: 'Times New Roman', Times, serif;
   font-size: 1.6em;
   font-weight: bold;
}


/* Navigation Styles */	

nav {
   font-size: 0.8em;
}

nav > ul {
   line-height: 2em;
   list-style-type: none;
   padding-left: 5px;
}

nav > ul > li.newgroup {
   margin-top: 20px;
}

/*I don't know why the color isn't getting applied to the text but the text-decoration is*/
nav > ul > li > a:link {
   color: rgb(151, 151, 151);
   text-decoration: none;
}

nav > ul > li > a:visited {
   color: rgb(48, 51, 53);
}

nav > ul > li > a:hover, nav > ul > li > a:active {
   color: rgb(222, 128, 60);
}


/* List Styles */

article#about_tss ul li:first-of-type {
   list-style-image: url(../images/runicon.png);
}

article#about_tss ul li:nth-of-type(2) {
   list-style-image: url(../images/bikeicon.png);
}

article#about_tss ul li:last-of-type {
   list-style-image: url(../images/swimicon.png);
}


/* Footer Styles */

body > footer address {
   background-color: rgb(222,128,60);
   color: white;
   color: rgba(255, 255, 255, 0.7);
   font: normal small-caps bold 0.9em/3em 
         Quicksand, Verdana, Geneva, sans-serif;
   text-align: center;
}