/* CSS STYLESHEET FOR CMT 421 LAB-2 */

											/* NORMALIZING CSS */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 
menu, nav, output, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: Arial;
	vertical-align: baseline;
}
									/* HTML5 display-role reset for older browsers */
									
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: open-quote;
	content: close-quote;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


								/* START CSS FOR BODY */
								
								
html {
	font-size: 100%/1 normal Lucida Sans, Arial, Helvetica, sans serif;
	line-height: 1.2rem;
	background-image: url(../images/pink-paisley.jpg);
}

						/* THIS IS THE PAGE CONTAINER */	
																					
.container {    
	width: 56.25rem;
	height: 56rem;
	border: .3rem solid #9d253e;
	background-image: url(../images/pink-paisley.jpg);
	background-repeat: repeat;
	margin: 0 auto; 
}

body {
	background-color: #f6f8c9;
	background-image: url(../images/pink-paisley.jpg);
	color: #032435;
	margin: 0;
	padding: 0;
}

							/* General formatting Element rules */
ul { 
	padding: .25rem;
	margin-left: 0;
}

h1, h2, h3, h4, p {
	margin-top: .375rem;
	padding-right: .9375rem;
	padding-left: .9375rem;
}

p  {
	font-family: Lucida Sans, Arial, Helvetica, sans serif;
	font-size: 1rem;
}

h1 {
	font-size: 35px;
	font-size: 2.1875rem;
	font-weight: 700;
	line-height: 2.19rem;
	margin-bottom: -.5rem;
}

h2 {
	font-size: 28px;
	font-size: 1.75rem;
	font-weight: 700;
	font-style: oblique;
	line-height: 1.8rem;
	margin-bottom: -.5rem;
}

h3 {
	font-size: 20px;	
	font-size: 1.25rem;
	font-weight: 900;
	margin-bottom: -.5rem;
}

h4 {
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: 600;
	font-variant: small-caps;
	margin-bottom: -.5rem;
}

h5 {
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: 400;
	padding: .5rem;
}

hr {
	background-color: #252b4c;
	-webkit-box-shadow: 
		.125rem .125rem .225rem #9d253e;
	box-shadow:
		.125rem .125rem .225rem #9d253e;		
	height: .13rem;
	width: 35rem;
}

blockquote  {
	margin-left: 3rem;
	margin-right: 3rem;
	margin-top: 1rem;
	font-family: Lucida Calligraphy, cursive, serif;
	font-size: medium;
}

cite  {
	margin-left: 14rem;
	font-size: small;
}

							/*This is the formatting for links */
a:link {
	margin-top: .625rem;	
	font-family: Lucida Calligraphy, cursive, serif;
	font-size: 1.25rem;    
	color: #9d253e;
	text-decoration: none; 
}	

a:visited {
	color: #f53a31;
	text-decoration: none;
}

a:hover, a:active, a:focus { 
	text-decoration: underline;
	color: #c49583;
}

				/*This is the formatting for the logo image */
.img {
	display: block;
	height: 9.4rem;
	float: left;
	border: .3rem solid #9d253e;
	border-radius: .3rem;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-top: 2rem;
}

				/*This is the formatting for the social media images */
li img {
	border: none;
	height: 1rem;
}

							/* START CSS FOR PAGE HEADER */

header {
	height: 11.5rem;
	width: 55.8rem;
	margin: 0;
	margin-top: -1rem;
	padding-left: .5rem;
	background-color: #11bec5;
	opacity: .95;
}

/*This is the formatting for my name in the page headers*/
.name {
	text-align: left;
	letter-spacing: .02rem;
	text-shadow: .125rem .125rem .925rem #9d253e,
		.10rem .10rem #9d253e;
	padding-top: 1rem;
	font-family: Lucida Calligraphy, cursive, serif;
	font-size: 2.5rem;
	font-style: oblique;
	color: #032435;
}

/*This is the formatting for my title in the page headers*/
.title {
	font-family: Lucida Sans, Arial, sans serif;
	font-size: 2.5rem;
	font-variant: small-caps;
	font-weight: bold;
	text-shadow: .10rem .10rem #9d253e;
	color: #032435;
	margin-top: 0;
	text-align: left;
}

/*This is the formatting for the social media links*/
.smcontacts {
	margin-top: 1rem;
	margin-left: 41rem;
	margin-bottom: 1rem;
	padding: .1rem;
	background-color: #f6f8c9;
	opacity: .95;
	border: none;
}
.smcontacts img {
	height: 1.5rem;
	margin-top: .1rem;
	padding: .1rem;
	background-color: #f6f8c9;
	opacity: .95;
	border: none;
	
}
								/* START CSS FOR PAGE NAVIGATION SIDEBAR */	

				/*This is the formatting for the sidebar background*/
aside {
	width: 12.5rem;
	height: 37.5rem;
	float: left;
	background-color: #11bec5;
	opacity: .95;
}

				/*This is the formatting for the top text box in the sidebar*/
.specialist {
	font-family: Lucida Sans, Arial, sans serif;
	font-size: .875rem;
	color: #032435;
	font-variant: small-caps;
	line-height: 1.1rem;
	float: left;
	width: 9rem;
	border-radius: .5rem;
	margin-left: 1.25rem;
	padding-left: .825rem;
	padding-top: .5rem;
	text-align: left;
	height: 9rem;
	border: .1875rem solid #9d253e;	
	background-color: #f6f8c9;
}

				/*This is the formatting for the navigation sidebar*/

nav {
	float: left;
	width: 9.375rem;
	height: 25rem;
	margin-left: .625rem;
}
								/*--- ===START CSS FOR NAV BUTTON FORMATTING=== ---*/

				/*  This div is the text box under the picture in the sidebar  */
div  {
    border-radius: .5rem;
    margin: .625rem;
    text-align: center;
	padding-top: .625rem;
    height: 3.75rem;
    width: 10rem;
    background-color: #f6f8c9;
    border: .1875rem solid #9d253e;
}

				/*--- ===START CSS FOR MAIN SECTION FORMATTING=== ---*/

/*This is the formatting for the main text window background/framework*/
main {
	font-family: Lucida Sans, Arial, sans serif;
	font-size: 1.25rem;
	float: right;
	width: 41.875rem;
	height: 35.55rem;
	background-color: #f6f8c9;
	opacity: .95;
	padding-left: .9375rem;
	padding-right: .9375rem;
	padding-top: 1rem;
	padding-bottom: .9375rem;
	color: #032435;
	text-align: left;
	overflow-y: auto;
	}

.hello {
	font-family: Lucida Calligraphy, cursive, serif; 
	font-size: 1.625rem;
}
	
.intro {
	margin-top: .4rem;
	margin-bottom: .5rem;
	font-size: 1.25rem;
	line-height: 1.7rem;

}
	
.note {
	font-size: .875rem;
	font-style: italic;
	margin-bottom: .5rem;
}




/* ---------------THIS IS THE CSS FOR SECTIONS ON MY RESUME PAGE----------------*/

.skills {
	font-size: 1.25rem;
	font-family: Lucida Sans, Arial, sans serif;
	padding-right: .9375rem;
	padding-left: .3125rem; 
}

.right-date  {
	display: block;
	text-align: right;
	font-size: .875rem;
	font-variant: small-caps;
	margin-top: -1rem;
}

.res-list  {
	font-size: 1rem;
	margin-left: 1.5rem;
	list-style-type: square;
}

.resume  {
	height: 18rem;
	text-align: center;
}

.res-intro  {
	font-variant: small-caps;
}

a.res-link  {
	font-family: Lucida Sans, Arial, sans serif;
	font-size: 1rem;
	font-style: italic;
	font-variant: small-caps;
	display: block;
	text-align: right;
	margin-top: -1rem;
}


a.pdf-res  {
	font-family: Lucida Sans, Arial, sans serif;
	font-size: 1.2rem;
	font-variant: small-caps;
}		

.mainHeading  {
	font-size: 2rem;
	font-variant: small-caps;
	text-align: center;
	text-shadow: .125rem .125rem .625rem gray;
}

.portfolio  {
	height: 30rem;
	text-align: center;
}
	
								/*--- ===START CSS FOR PAGE FOOTER FORMATTING=== ---*/

		/*This is the formatting for the footer background*/

footer {
	height: 7rem;
	width: 55rem;
	margin-top: 35rem;
	margin-bottom: 43.75rem;
	background-color: #11bec5;
	opacity: .95;
	font-family: Lucida Sans, sans serif;
	font-size: .75rem;
	font-style: italic;
	color: #032435;
	align: bottom;
	position: relative;
	clear: both;
	padding-top: .625rem;
	padding-left: 1.25rem;
}

		/*This is the formatting for the social media link labels in the footer*/

.labels {
	font-size: 1rem;
	color: #11bec5;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

		/* This is the formatting for the footer social media icon box */

.socmed {
	margin-top: -2rem;
	margin-left: .3rem;
	background-color: #f6f8c9;
	opacity: .95;
	border: none;
}

td {
	text-align: center;
	font-size: .675rem;
	color: #032435;
	height: .5rem;
	margin-top: .1rem;
	padding: .2rem;
	background-color: #f6f8c9;
	opacity: .95;
	border: none;
}

td img {
	height: 1.5rem;
}

		/* This is the formatting for the Search bar in the footer */

form {
	font-family: 100%/1 normal Lucida Sans, Arial, Helvetica, sans serif;
	text-shadow: .125rem .125rem .425rem #032435;
	color: #9d253e;
	margin-left: 28rem;
}
input {
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	color: #9d253e;
	border-radius: .5rem;
}

		/* This is the formatting for the copyright and designer */
.address {
	padding-left: 7rem;
	margin-top: .5rem;
	margin-bottom: .125rem;
	margin-left: 6.375rem;
	color: #032435;
}

		/* this is the formatting for the site update js */

.update {
	font-family: 100%/1 normal Lucida Sans, Arial, Helvetica, sans serif;
	margin-left: -36rem;
	margin-top: -.5rem;
	padding-top: .875rem;
	color: #032435;
}

/* ---------------------------------------------------------------------------------------------------------- 
-----------------04 Media queries (using a mobile-first approach) -------------------------------------------
---------------------------------------------------------------------------------------------------------- */

					/* 1 and up */	
@media screen and (min-width:1px) {
	body {
		font-size:85%; 
}
}
					/* 550 and up */	
@media screen and (min-width:550px) {
	h2 { 
		font-size:.5rem; 
		}

	section.intro { 
					width:66.6%; 
					}

	aside.sidebar {
					position:absolute; left:0;
					top:2.5%; 
					width:32.75%; 
					}
}

					/* 650 and up */	

@media screen and (min-width:650px) {
	div.benefits {
				margin-top:12%; 
				width:30%; 
				}

	div.requirements {
					width:69%;
					}
}
					/* 700 and up */	

@media screen and (min-width:700px) {
	body {
		font-size:90%; 
		}
}
					/* 800 and up */	

@media screen and (min-width:800px) {
	body {
		font-size:100%; 
		}
}
					/* 900 and up */	

@media screen and (min-width:900px) {
	body {
		font-size:110%; 
		}
}
					/* 1500 and up */	

@media screen and (min-width:1500px){
	body {
		font-size:125%; 
		}
}
					/* 1800 and up */	

@media screen and (min-width:1800px) {
	body {
		font-size:150%; 
		}
}
					/* 2100 and up */	

@media screen and (min-width:2100px) {
	body {
		font-size:175%; 
}
}
					/* 2500 and up */	

@media screen and (min-width:2500px) {
	body {
		font-size:200%; 
		}
}
.res-list {
}