/* Text Formatting with CSS */

* {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 18px;
}

body {
    padding: 40px;
    font-family: Georgia, Times, serif;
    color: #373737;
}

h1,h2,h3,h4,h5,h6 {
    margin: 10px 0;
    font-family: Helvetica, Arial, sans-serif;
    
    font-weight: bold;
    
    /*
		A Note on Font Weight
		=====================
		The other values you can use are:
		- bolder
		- lighter
		
		The following are equivalent to "normal"
		- 100
		- 200
		- 300
		- 400
		
		The following are equivalent to "bold"
		- 500
		- 600
		- 700
		
		For heavier weights (not supported in all fonts)
		- 800
		- 900
	*/
}

h1 {
    font-size: 3.6em; /* 3.6x the base font size (which is 18px in our case) */
}

h2 {
    font-size: 2.6em; /* 2x the base font size */
}

h3 {
    font-size: 1.6em; /* 1.6x the base font size */
    letter-spacing: -1px; /* Can be "normal" or a numerical value */
    text-indent: 80px; /* Indents the first line of the paragraph. Can be numerical value, or % */
    line-height: 1.3;
    /*
		A Note on Line Height
		=====================
		Line height is how tall the lines of text are within an element.
		
		You can use a simple numeric value, like "3",
		which will make the line height 3x the height of the font-size
		
		You may also use a length, like "px" or "em"
		
		Percentages are also accepted
	*/
}

span {
    text-decoration: line-through;
    /*
		A Note on Text Decoration
		=========================
		You may use the following values:
		- underline
		- overline
		- line-through
		- none
		
		Underlines are usually best left for links only
	*/
}

em {
    text-transform: capitalize;
    /*
		A Note on Text Transform
		=========================
		You may use the following values:
		- uppercase
		- lowercase
		- capitalize
		- none
	*/
}

strong {
    text-transform: uppercase;
    font-weight: bold;
}

/* CSS Borders Lecture */

.border-box {
    background: #fc3;
    margin: 0 0 20px;
    padding: 40px;
    width: 320px;
    text-align: center;
}

#box1 { border: solid 1px black; }
#box2 { border: dashed 1px black; }
#box3 { border: dotted 1px black; }
#box4 { border: double 3px black; }
#box5 { border: solid 4px black; }
#box6 { border: dashed 4px black; }
#box7 { border: dotted 4px black; }
#box8 { border: double 6px black; }

/* Styling Links Lecture */

#styling-links {
    background: #333;
}

#styling-links #container {
    background: white;
    text-align: center;
    width: 640px;
    margin: 0 auto;
    padding: 40px;
}

a {
   display: inline-block;
}

/* unvisited */
a:link {
    color: #fc3;
}

/* visited */
a:visited {
    color: #fc3;
}

/* hover / mouse-over */
a:hover {
    color: green;
}

/* active / mouse-down */
a:active {
    color: black;
}

a#link-1:link {
    background: #333;
    padding: 10px;
    text-decoration: none;
}

a#link-1:hover {
    background: #f3c;
    color: white;
}

a#link-1:active {
    background: #777;
}

/* Styling Web Forms Lecture */

#container {
    width: 600px;
    margin: 0 auto;
}

form {
    margin-top: 40px;
}

fieldset {
    padding: 40px;
    border: solid 1px #aaa;
    background: url('images/blue_background.jpg');
}

fieldset legend {
    background: white;
    padding: 10px;
    border: solid 1px #aaa;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
    padding: 10px;
    margin: 0 0 20px;
    border: solid 1px #454545;
    border-top: none;
    display: block;
    width: 50%;
    font-size: 14px;
    color: #777;
    font-family: Monaco, monospace;
    text-transform: uppercase;
}

textarea {
    resize: none;
}

label {
    font-size: 12px;
    text-transform: uppercase;
    background: url('images/red_background.jpg');
    display: block;
    width: 46%;
    padding: 2%;
    color: white;
}

input[type="submit"] {
    background: none;
    background: url('images/button_background.jpg') repeat-x;
    height: 40px;
    border: solid 1px #777;
    padding: 0 40px;
    color: white;
}

input[type="submit"]:hover {
    cursor: pointer;
    border-color: #444;
}

input[type="submit"]:active {
    border-color: #111;
    outline-color: red;
}

/* CSS Floats */

#floats {
    background: #d41
}

#floats #container {
    background: white;
    padding: 20px;
}

#brad1 {
    float: right;
    margin: 0 0 10px 20px;
}

#box1 {
    width: 200px;
    height: 200px;
    background: red;
    float: right;
}

#mainColumn {
    width: 250px;
    float: left;
    background: #555;
    color: white;
    padding: 50px;
    margin-bottom: 20px;
}

#sidebar {
    width: 140px;
    float: right;
    background: #fc3;
    margin-bottom: 20px;
    padding: 40px;
}

#footer {
    clear: both;
    background: #333;
    color: white;
    padding: 20px;
    margin: 20px 0;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

#paragraph1 {
    clear: right;
}

/*  Positioning Lecture */

#positioning {
    background: #1b4e5e;
}

#positioning #container {
    background: white;
    padding: 20px;
    height: 2000px;
}

#positioning h2 {  
    font-size: 18px;
}

.box {
    background: #db4e3e;
    color: white;
    height: 200px;
    width: 200px;
    text-align: center;
    line-height: 200px;
    text-transform: uppercase;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
}

#relative {
    position: relative;
    top: -10px;
    left: -50px;
}

#absolute {
    position: absolute;
    bottom: 0;
    right: 0;
}

#fixed {
    position: fixed;
    right: 100px;
    top: 300px;
}