WiT-Assignment_1.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; }
	body{background-color: #eeeeee; font-family: Georgia, Times, serif; }
		a{ text-decoration: none; color: #2b2b2b; }


header { width: 100%; height: 470px; background-image: url('../images/header_img.png'); color: #eeeeee; border-bottom: 7px solid #e63702; }
	header h1 { margin: 0px auto 0px auto; width: 380px; padding: 10px 20px 10px 20px; clear: both; font-size: 40px; border: 3px solid #eeeeee; border-radius: 5px;}

	header .aboutme { clear: both; width: 209px; text-align: center; padding-right: 20px; margin:0 auto; }
		header .aboutme img { width: 160px; margin: auto 0; border-radius: 50%; border: 5px solid #e2e2e2;  }
		header .aboutme img:hover{ width: 190px;}
			header .aboutme dt { font-weight: 700; font-size: 18px; }
			header .aboutme dd { font-size: 12px; }
				header .aboutme a { margin: 5px 10px 0px 0px; color: #eeeeee; }


nav{ float: right; font-weight: 600; margin-bottom: 70px; }
	nav li{ display:inline; }
		nav a{display:inline-block; padding: 15px 30px 15px 30px; margin-left: -4px; color: #eeeeee;  font-size: 12px; }
			nav a:hover { background-color: #e63702; }
				nav a:visited, nav a:link { }
					nav a:active { background-color: #e63702; color: #eeeeee; }


main{ max-width: 900px; min-height: 300px; margin: 20px auto 0 auto; }
	main article.alignLeft{ float: left; width: 70%; }
	main article.alignRight{ float: right; width: 25%; }
		main article.alignRight ul { margin-bottom: 60px; }
			main article li { list-style: none; }
				main article i { color: #e63702; }

	main table { border: 1px solid #d2d2d2; width: 100%; border-collapse: collapse; }
		main table thead th { text-align: left; padding: 10px; background-color: #d1d1d1; }
			main table td { padding: 5px 10px 5px 10px; }
				main table tbody tr:nth-of-type(odd) { background-color: #e2e2e2; }
				main table tbody tr:hover{ font-weight: 800; }
					main table caption {text-align: left; font-size: 18px; font-weight: 600; }


footer { clear: both; width: 100%; margin: 0 auto; font-size: 12px; padding: 10px 0px 10px 0px;}
	footer address { text-align: center; }

/* CSS Transition */
.transition { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}


/* Responsive for Mobiles. 320x */
@media only screen and (max-width: 320px){
	header .aboutme { width: 200px; margin: 0px auto 0px auto; }
		header .aboutme img:hover{ width: 180px; }

	nav { width: 100%;margin-bottom: 30px; }
		nav a { width: 80%; text-align: center; }

	main article{ margin: 0 auto; }
		main article.alignLeft{ width: 80%; float: none; clear: both; }
			main article.alignRight { width: 80%; float: none; clear: both;   }
			main article.alignRight ul { margin-bottom: 30px; }
}


/* Responsive for Mobiles. 720x */
@media only screen and (max-width: 720px){
	main article{ margin: 0 auto; width: 100%; }
		main article.alignLeft{ width: 90%; float: none; clear: both; margin-bottom: 30px; }
			main article.alignRight { width: 90%; float: none;  }
			main article.alignRight ul { margin-bottom: 30px; }
}