/* Below we import two fonts using Google's font api 
The two fonts are "Libre Baskerville" and "Julius Sans" */
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville|Julius+Sans+One);


/* Zeros out any default margins and paddings that a web browser 
might add to major elements. By default, h1,h3,...,h6 have top and bottom margins.
Removing default padding and margin a common practice to make page more compact. */
html, body, h1, h2, h3 {
	padding: 0;
	margin: 0;
}


/* Makes the body background black and established the main font 
If Libre Baskerville is not supported, the font will be a basic sans-serif 
We also reduce the font size by 80%
The default font is pretty big 16px*/
body {
	background-color: black;
	font-family: 'Libre Baskerville', sans-serif;
	font-size: 13pt;
}


/* Makes the main article look like a white page
800px wide and centered in the browser window
"auto" means the margins will be automatically balanced.
When margin has two parameters, the first parameter is the top and bottom margin
and the second parameter is the left and right margin.  
By balancing (i.e., auto) the left and right margins, the article will appear centered. */
article {
	width: 800px;
	margin: 20px auto;
	padding: 20px;
	background-color: white;
}

article#team {
	width: 1000px;
}

article#nba {
	width: 1200px;
}


/* Gives the "info" section and all the "stats" sections consistent padding
Padding is typically used to create space between borders and text to improve readability. 
Overflow: auto fixes problems with floating elements popping out of block elements.  
We will talk about this eventually 
Also, the dot (.) indicates a class name, i.e., section.stats is a section with the class name "stats" 
The symbol # indicates an id name, i.e., section#info is a section with the id name "info" */
section.stats, section#info {
	padding: 5px 10px;
	margin: 10px 0;
	overflow: auto;
}
/* Give the all the "stats" sections a background color */
section.stats {
	background-color: #ccf;
}
/* Give the "info" section a background color */
section#info {
	background-color: #eef;
}
section#record, section#leaders, section#ranking {
	width: 300px;
	float: right;
	clear: right;
}
section#record h3, section#leaders h3, section#ranking h3 {
	font-size: 1.2em;
	border-bottom:  1px solid #ccc;
	margin-top: 24px;
}
section#roster {
	width: 660px;

}
section#roster h3 {
	font-family: 'Libre Baskerville', sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	margin: 10px 20px 0px;
	padding: 10px 0px 5px;
	background: #eef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ddf), to(#eef));
	background: -moz-linear-gradient(top,  #ddf,  #eef);
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

section#next_game {
	width: 580px;
	margin: 20px;
	padding: 10px 20px;
	background: #88f;
	background: -webkit-gradient(linear, left top, right top, from(#88f), to(#eef));
	background: -moz-linear-gradient(left,  #88f,  #eef);
	border-radius: 10px;
	overflow: auto;
}
section#next_game h3 {
	color: white;
	margin: 0px;
	font-size: 1.5em;
	float: left;
}
section#next_game span.game {
	font-size: 1.2em;
	float: right;
}


/* Makes the header and footer consistent with a dark background and centered text
The font color must be lightened so the text is readable
"clear: both" ensures that the footer will "clear" (will be below) any 
elements that might be floating to the left and right (i.e, "both" directions).
FYI: The glossary has floating elements that might otherwise 
float below the footer 	*/
header, footer{
	background-color: #446;
	color: #EEF;
	padding: 10px;	
	text-align: center;
	clear: both;
}


/* Makes the hyperlinks blue with no underline.
When you hover or focus on a hyperlink it turns red and underlines */
a {
	color: blue;
	text-decoration: none;
}
a:hover, a:focus { 
	font-size: 1em;
	color: red;
	text-decoration: underline;
}

/* Use a different font for the major heading and make it big and uppercase 	
1em = 16px = a standard 12pt font
em is considered more meaningful because it describes the scale of the font,
i.e., 3em is 3 times bigger than the standard 12pt font */
h1 {
	font-family: 'Julius Sans One', sans-serif;
	font-size: 3em;
	text-transform: uppercase;
}


/* Style the h2 but only if it is in the header. 
This is called "specifying context"
This rule only applies when an "h2" is in a "header" */
header h2 {
	color: #99C;
	font-size: 1.6em;
	font-style: italic;
	border-bottom: 1px solid #88C;
	margin-bottom: 10px;
}


/* We only style the h3 and h4 in this way if they are in the header 
h3 is used for the player position
h4 is used for the team
Note that I switched these headers to display inline */
header h3, header h4 {
	color: #BBE;
	display: inline;
	font-family: 'Julius Sans One', sans-serif;
	font-size: 1.6em;
	font-weight: bold;
}


/* You can actually add content before and after an element 
Here we put a dash between player position and player team */
header  h3:after {
	content: " - "
}


/*  We use the h3 as headers for most sections, 
so we want it to look really distinct, i.e.,
uppercase and 1.8 times larger than a standard font 
and we use a Julius Sans font
Remember that we set all the margins to zero 
This rule has higher priority because it is defined after the first h3 rule */
h3 {
	margin: 10px 0;
	font-family: 'Julius Sans One', sans-serif;
	font-size: 1.8em;
	font-weight: normal;
	text-transform: uppercase;
}


/* Images will look like old Polaroid with white (#eee) padding and
a border designed to make it look a little bit 3D 
Here we see three examples of specifying separate properties for 
the four side of the surrounding box, i.e., top, left, bottom, and right.

margin: top left bottom right;

border-color:  top left bottom right;

border-width:  top left bottom right; */ 
img {
	padding: 10px;
	margin: 0px 0px 15px 15px;
	border: solid;
	border-color: #BBB #888 #888 #BBB;
	border-width: 1px 3px 3px 1px;
	background-color: #eee;
	float: right;
}


/* Increasing the line height makes paragraphs more readable
When a margin has two parameters the first number is the top and bottom
The second parameter is left and right */
p {
  margin: 10px 0;
  line-height: 2;
  text-indent: 16px;
}

/******************************************************************
The following section styles a definition list, but 
only if it is inside of an element with class="glossary"

Here is where we used float: left to make block items flow from
left to right.

The glossary is defined with an class (class="glossary") 
so we must use the .symbol to reference it	
******************************************************************/
.glossary {
	font-size: 0.8em;
	margin: 20px;
	border: 3px double #cce;
	padding: 10px;
	overflow: auto;
}
.glossary dt {
	width: 50px;
	float: left;
	font-weight: bold;
	margin: 0 10px 0 0;
	padding: 0;
}
.glossary dt:after {
	content: ":";
}
.glossary dd {
	width: 90px;
	float: left;
	margin: 0;
	padding: 0 20px 20px 0;
}


/******************************************************************
The following section styles an ordered and unordered lists, but 
only if it is inside of an element with class="stats"
******************************************************************/
ul, ol {
	margin: 10px 0;
	padding: 0;
	padding-left: 16px;
}
li {
	border-bottom: 1px solid #aad;
	padding: 5px 0;
}
li:hover {
	background-color: white;
	color: #000; 
}
ul li {
	list-style-type: square;
}

/******************************************************************
The following section styles tables

This is an example of advanced CSS that is beyond the scope of this course

-moz is for older Firefox browsers that do not support CSS3
-webkit is for older versions of Chrome
******************************************************************/
table {
	text-shadow: 1px 1px 0px #fff;
	background:#eef;
	margin:0px 20px 20px 20px;
	border:#ccc 1px solid;

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;

	-moz-box-shadow: 0 1px 2px #ddd;
	-webkit-box-shadow: 0 1px 2px #ddd;
	box-shadow: 0 1px 2px #ddd;
}
table th {
	padding: 10px;
	border-top:1px solid #fff;
	border-bottom:1px solid #eee;
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
	background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
table th:first-child {
	text-align: left;
	padding-left:20px;
}
table tr:first-child th:first-child {
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
}
table tr:first-child th:last-child {
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
}
table tr {
	text-align: center;
	padding-left:20px;
}
table td:first-child {
	text-align: left;
	padding-left:20px;
	border-left: 0;
}
table td {
	padding:18px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;

	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
table tr.even td {
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
	background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
table tr:last-child td {
	border-bottom:0;
}
table tr:last-child td:first-child {
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
}
table tr:hover td {
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
	background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);	
}

/******************************************************************
This class can be used to make an element look like a rounded 3D button

This is an example of expert CSS that even has proprietary code 
for supporting older versions of Microsoft Internet Explorer
******************************************************************/
.btn {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 0;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #cccccc;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}