/**************************************************************************

              Styles for handhelds and screens less than 800px
				 
***************************************************************************/
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 799px) {
	
	#middle_bar {display: none;}

	#container2 {position: relative; padding: 0; text-align: left;}

	#container3 {background: url(../images/body_repeat.jpg) fixed; float: left; width: 100%;}
	
	/**************************************************************************
	
								   BASE Styles
	
	***************************************************************************/
	p {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.2em; font-style: italic; line-height: 1.5em; color: #1a526a; text-shadow: -1px -1px 0px #d6e2e6; margin: 0 0 15px 0;}
	
	a {font-weight: bold; color: #1a526a; text-decoration: none;}
	
	a:hover {color: #a86923; border-bottom: 1px dotted #a86923;}
	
	h2, h3, h4, h5 {text-shadow: -1px -1px 0px #d6e2e6;}
	
	h2 {font-family: Futura, "Century Gothic", AppleGothic, Arial, sans-serif; font-size: 2.8em; font-weight: bold; line-height: 1.4em; letter-spacing: -1px; text-transform: uppercase; margin: 0 0 20px 0;} 
	
	h3 {font-size: 2.2em; font-weight: bold; line-height: 1.4em; letter-spacing: -1px; margin: 0 0 20px 0;}
	
	h4 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.4em; font-weight: normal; font-style: italic; line-height: 1.2em; color: #1a526a; text-shadow: -1px -1px 0px #d6e2e6;}   
	
	/**************************************************************************
	
								  HEADER Styles
	
	***************************************************************************/
	#header {background: url(../images/header_footer_repeat.png) repeat-x top left; position: relative; width: 100%; height: 113px; z-index: 200;}
	
	#header h1 {position: relative; top: 15px; width: 206px; height: 48px; margin: 0 auto 25px;}
	
	#header h1 a {background: url(../images/logo_small.png) no-repeat top left; width: 100%; height: 100%; border: none; display: block; text-indent: -9999px;}
	
	#header h1 a:hover {background-position: bottom;}
	
	#main_nav {clear: both;}
	
	#main_nav ul {width: 100%; margin: 0; padding: 0; list-style: none; text-align: center;}
	
	#main_nav ul li {display: inline; border-left: 1px solid #e3eaed;}
	
	#main_nav ul li:first-child {border: none;}
	
	#main_nav ul li a {font-size: 1.6em; font-weight: bold; letter-spacing: -1px; line-height: 0.9em; color: #272827; padding: 0 15px 0 14px; text-decoration: none; border: none; -o-transition: color 0.2s linear;}
	
	#main_nav ul li a span, #main_nav ul li a br {display: none;}
	
	#main_nav ul li a:hover {color: #a86923; -webkit-transition: color 0.2s linear;}
	
	#main_nav ul li a.active {color: #1a526a;}
	
	/**************************************************************************
	
								 CONTENT Styles
	
	***************************************************************************/
	#content {position: relative; height: auto !important; height: 600px; min-height: 600px; margin: -3px 0 0 0; padding: 40px 36px 40px 36px; z-index: 300;}
	
	/**************************************************************************
	
								  WORK Styles
	
	***************************************************************************/
	#intro h2 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.8em; font-weight: normal; font-style: italic; line-height: 1.4em; letter-spacing: normal; word-spacing: 1px; text-transform: none; color: #1a526a; text-shadow: -1px -1px 0px #d6e2e6; max-width: 1220px; margin: -8px 0 40px 0;}
	
	.projects {position: relative; padding: 0 0 40px 0;}
	
	.projects:last-child {padding: 0;}
	
	.project_info {width: 100%; margin: 10px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid #1a526a;}
	
	.project_title {font-size: 1.6em; margin: 0 0 5px 0;}
	
	.project_info p {margin: 0 0 10px 0;}
	
	.projects img {background: #ffffff; position: relative; width: 100% !important; max-width: 1000px; border: 1px solid #e3eaed; box-shadow: 0px 0px 5px #264e5f; -moz-box-shadow: 0px 0px 5px #264e5f; -webkit-box-shadow: 0px 0px 5px #264e5f;}
	
	/**************************************************************************
	
								 FOOTER Styles
	
	***************************************************************************/
	#footer {background: url(../images/header_footer_repeat.png) repeat-x bottom left; position: relative; float: left; clear: both; width: 100%; height: 113px; margin: -3px 0 0 0; z-index: 200; text-align: center;}
	
	#footer p {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; font-style: normal; color: #6a9eb4; text-shadow: none;}
	
	#footer a {color: #6a9eb4; text-decoration: none; border: none; -o-transition: color 0.15s linear;}
	
	#footer a:hover {color: #a86923; border-bottom: 1px dotted #a86923; -webkit-transition: color 0.15s linear;}
	
	#footer strong {font-weight: normal; color: #1a526a;}
	
	#footer_left {padding: 33px 0 20px 0;}
	
	#social_links {clear: both; width: 100%; padding: 0 0 6px 0;}
	
	#social_links li {margin: 0 10px 0 10px; display: inline; }
	
	#social_links a {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.2em; font-weight: bold; font-style: italic;}
	
	#social_links a:hover {border: none;}
	
	#twitter_icon {background-position: 0px 0px;}
	
	#twitter_icon:hover {background-position: 0px -33px;}
	
	#grooveshark_icon {background-position: 0px -66px;}
	
	#grooveshark_icon:hover {background-position: 0px -99px;}
	
	#linkedin_icon {background-position: 0px -132px;}
	
	#linkedin_icon:hover {background-position: 0px -165px;}
	
	#delicious_icon {background-position: 0px -198px;}
	
	#delicious_icon:hover {background-position: 0px -231px;}
	
	#email_icon {background-position: 0px -264px;}
	
	#email_icon:hover {background-position: 0px -297px;}
	
	#footer_nav {padding: 0 0 5px 1px;}
	
	#footer_nav, #copyright {clear: both;}
	
	#footer_nav ul li {padding: 0 10px 0 11px; display: inline; border-left: 1px solid #6a9eb4;}
	
	#footer_nav ul li:first-child {padding: 0 10px 0 10px; border: none;}
	
	#footer_nav ul li a {font-size: 1.1em; font-weight: normal; text-transform: uppercase; color: #6a9eb4; text-decoration: none; border: none; -o-transition: color 0.15s linear;}
	
	#footer_nav ul li a:hover {color: #a86923; -webkit-transition: color 0.15s linear;}
	
	#copyright {padding: 0 0 0 11px;}
	
	#footer_logo {display: none;}
	
}

/**************************************************************************

                Styles for screens between 800px and 1024px
				 
***************************************************************************/
@media only screen and (min-width: 800px) and (max-width: 1023px) {
	
	#middle_bar {background: #1a526a; position: absolute; top: 44%; left: 0; width: 100%; height: 200px; margin: -100px 0 0 0;}

	#container2 {position: relative; padding: 0 0 0 30px; text-align: left;}

	#container3 {background: url(../images/body_repeat.jpg) fixed; float: left; width: 100%;}
	
	/**************************************************************************
	
								   BASE Styles
	
	***************************************************************************/
	p {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.2em; font-style: italic; line-height: 1.5em; color: #1a526a; text-shadow: -1px -1px 0px #d6e2e6; margin: 0 0 15px 0;}
	
	a {font-weight: bold; color: #1a526a; text-decoration: none;}
	
	a:hover {color: #a86923; border-bottom: 1px dotted #a86923;}
	
	h2, h3, h4, h5 {text-shadow: -1px -1px 0px #d6e2e6;}
	
	h2 {font-family: "Josefin Sans Std Light", Futura, "Century Gothic", AppleGothic, Arial, sans-serif; font-size: 2.8em; font-weight: bold; line-height: 1.4em; letter-spacing: -1px; text-transform: uppercase; margin: 0 0 20px 0;} 
	
	h3 {font-size: 2.2em; font-weight: bold; line-height: 1.4em; letter-spacing: -1px; margin: 0 0 20px 0;}
	
	h4 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.4em; font-weight: normal; font-style: italic; line-height: 1.2em; color: #1a526a; text-shadow: -1px -1px 0px #d6e2e6;}   
	
	/**************************************************************************
	
								  HEADER Styles
	
	***************************************************************************/
	#header {background: url(../images/header_footer_repeat.png) repeat-x top left; position: relative; width: 100%; height: 113px; z-index: 200;}
	
	#header h1 {position: relative; top: 20px; left: 10px; float: left; width: 262px; height: 62px;}
	
	#header h1 a {background: url(../images/logo.png) no-repeat top left; width: 100%; height: 100%; border: none; display: block; text-indent: -9999px;}
	
	#header h1 a:hover {background-position: bottom;}
	
	#main_nav {background: url(../images/header_divider.png) no-repeat top left; position: relative; float: left; width: 420px; height: 128px; margin: -14px 0 0 28px;}
	
	#main_nav ul {position: relative; top: 32px; left: 30px; margin: 0; padding: 0; list-style: none;}
	
	#main_nav ul li {float: left; border-left: 1px solid #e3eaed;}
	
	#main_nav ul li:first-child {border: none;}
	
	#main_nav ul li a {font-size: 1.8em; font-weight: bold; letter-spacing: -1px; line-height: 0.9em; color: #272827; float: left; padding: 15px 28px 15px 29px; text-decoration: none; border: none; -o-transition: color 0.2s linear;}
	
	#main_nav ul li a span {font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; font-weight: normal; font-style: italic; letter-spacing: 0; color: #1a526a; padding: 0 0 3px 0; -o-transition: color 0.2s linear;}
	
	#main_nav ul li a:hover, #main_nav ul li a.active {color: #1a526a; -webkit-transition: color 0.2s linear;}
	
	#main_nav ul li a:hover span {border-bottom: 1px dotted #a86923;}
	
	#main_nav ul li a:hover span, #main_nav ul li a.active span {color: #a86923; -webkit-transition: color 0.2s linear;} 
	
	/**************************************************************************
	
								 CONTENT Styles
	
	***************************************************************************/
	#content {background: url(../images/content_repeat.png) repeat-y top left; position: relative; height: auto !important; height: 600px; min-height: 600px; margin: -3px 0 0 0; padding: 40px 36px 40px 50px; z-index: 300;}
	
	/**************************************************************************
	
								  WORK Styles
	
	***************************************************************************/
	#intro h2 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 2.2em; font-weight: normal; font-style: italic; line-height: 1.4em; letter-spacing: normal; word-spacing: 1px; text-transform: none; color: #1a526a; text-shadow: -1px -1px 0px #d6e2e6; max-width: 1220px; margin: -8px 0 55px 0;}
	
	.projects {position: relative; padding: 0 0 40px 299px;}
	
	.projects:last-child {padding: 0 0 0 299px;}
	
	.project_info {position: absolute; top: 0; left: 0; width: 259px; margin: 0 20px 0 0; padding: 0 20px 0 0; border-right: 1px solid #1a526a;}
	
	.project_title {font-size: 1.8em; margin: 0 0 5px 0;}
	
	.project_info p {margin: 0 0 10px 0;}
	
	.projects img {background: #ffffff; position: relative; width: 100% !important; max-width: 1000px; border: 1px solid #e3eaed; box-shadow: 0px 0px 5px #264e5f; -moz-box-shadow: 0px 0px 5px #264e5f; -webkit-box-shadow: 0px 0px 5px #264e5f;}
	
	/**************************************************************************
	
								 FOOTER Styles
	
	***************************************************************************/
	#footer {background: url(../images/header_footer_repeat.png) repeat-x bottom left; position: relative; float: left; clear: both; width: 100%; height: 113px; margin: -3px 0 0 0; z-index: 200;}
	
	#footer p {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; font-style: normal; color: #6a9eb4; text-shadow: none;}
	
	#footer a {color: #6a9eb4; text-decoration: none; border: none; -o-transition: color 0.15s linear;}
	
	#footer a:hover {color: #a86923; border-bottom: 1px dotted #a86923; -webkit-transition: color 0.15s linear;}
	
	#footer strong {font-weight: normal; color: #1a526a;}
	
	#footer h3 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 2.4em; font-weight: normal; font-style: italic; line-height: 1em; letter-spacing: normal; color: #1a526a; text-shadow: none; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #e3eaed;}
	
	#footer_left {float: left; clear: left; width: 610px; padding: 34px 20px 20px 10px;}
	
	#social_links {float: left; clear: both; padding: 0 0 15px 0;}
	
	#social_links li {float: left; padding: 0 30px 0 0;}
	
	#social_links li.last {padding: 0;}
	
	#social_links a {background-image: url(../images/social_icons.png); background-repeat: no-repeat; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.2em; font-weight: bold; font-style: italic; line-height: 33px; height: 33px; padding: 0 0 0 38px; display: block;}
	
	#social_links a:hover {border: none;}
	
	#twitter_icon {background-position: 0px 0px;}
	
	#twitter_icon:hover {background-position: 0px -33px;}
	
	#grooveshark_icon {background-position: 0px -66px;}
	
	#grooveshark_icon:hover {background-position: 0px -99px;}
	
	#linkedin_icon {background-position: 0px -132px;}
	
	#linkedin_icon:hover {background-position: 0px -165px;}
	
	#delicious_icon {background-position: 0px -198px;}
	
	#delicious_icon:hover {background-position: 0px -231px;}
	
	#email_icon {background-position: 0px -264px;}
	
	#email_icon:hover {background-position: 0px -297px;}
	
	#footer_nav, #copyright {float: left;}
	
	#footer_nav {margin: 0 0 0 -9px; padding: 0 30px 0 0;}
	
	#footer_nav ul li {padding: 0 10px 0 11px; display: inline; border-left: 1px solid #6a9eb4;}
	
	#footer_nav ul li:first-child {padding: 0 10px 0 10px; border: none;}
	
	#footer_nav ul li a {font-size: 1.1em; font-weight: normal; text-transform: uppercase; color: #6a9eb4; text-decoration: none; border: none; -o-transition: color 0.15s linear;}
	
	#footer_nav ul li a:hover {color: #a86923; -webkit-transition: color 0.15s linear;}
	
	#footer_logo {display: none;}

}

/**************************************************************************

                 Styles for screens 1024px res or larger
				 
***************************************************************************/
@media only screen and (min-width: 1024px) {
	
	#middle_bar {background: #1a526a; position: absolute; top: 44%; left: 0; width: 100%; height: 200px; margin: -100px 0 0 0;}

	#container2 {position: relative; padding: 0 0 0 30px; text-align: left;}

	#container3 {background: url(../images/body_repeat.jpg) fixed; float: left; width: 100%;}
	
	/**************************************************************************
	
								   BASE Styles
	
	***************************************************************************/
	p {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.4em; font-style: italic; line-height: 1.5em; color: #1a526a; text-shadow: -1px -1px 0px #d6e2e6; margin: 0 0 15px 0;}
	
	a {font-weight: bold; color: #1a526a; text-decoration: none;}
	
	a:hover {color: #a86923; border-bottom: 1px dotted #a86923;}
	
	h2, h3, h4, h5 {text-shadow: -1px -1px 0px #d6e2e6;}
	
	h2 {font-family: "Josefin Sans Std Light", Futura, "Century Gothic", AppleGothic, Arial, sans-serif; font-size: 3em; font-weight: bold; line-height: 1.4em; letter-spacing: -1px; text-transform: uppercase; margin: 0 0 20px 0;} 
	
	h3 {font-size: 2.4em; font-weight: bold; line-height: 1.4em; letter-spacing: -1px; margin: 0 0 20px 0;}
	
	h4 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.6em; font-weight: normal; font-style: italic; line-height: 1.2em; color: #1a526a; text-shadow: -1px -1px 0px #d6e2e6;}   
	
	/**************************************************************************
	
								  HEADER Styles
	
	***************************************************************************/
	#header {background: url(../images/header_footer_repeat.png) repeat-x top left; position: relative; width: 100%; height: 113px; z-index: 200;}
	
	#header h1 {position: relative; top: 20px; left: 10px; float: left; width: 262px; height: 62px;}
	
	#header h1 a {background: url(../images/logo.png) no-repeat top left; width: 100%; height: 100%; border: none; display: block; text-indent: -9999px;}
	
	#header h1 a:hover {background-position: bottom;}
	
	#main_nav {background: url(../images/header_divider.png) no-repeat top left; position: relative; float: left; width: 420px; height: 128px; margin: -14px 0 0 28px;}
	
	#main_nav ul {position: relative; top: 32px; left: 30px; margin: 0; padding: 0; list-style: none;}
	
	#main_nav ul li {float: left; border-left: 1px solid #e3eaed;}
	
	#main_nav ul li:first-child {border: none;}
	
	#main_nav ul li a {font-size: 1.8em; font-weight: bold; letter-spacing: -1px; line-height: 0.9em; color: #272827; float: left; padding: 15px 28px 15px 29px; text-decoration: none; border: none; -o-transition: color 0.2s linear;}
	
	#main_nav ul li a span {font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; font-weight: normal; font-style: italic; letter-spacing: 0; color: #1a526a; padding: 0 0 3px 0; -o-transition: color 0.2s linear;}
	
	#main_nav ul li a:hover, #main_nav ul li a.active {color: #1a526a; -webkit-transition: color 0.2s linear;}
	
	#main_nav ul li a:hover span {border-bottom: 1px dotted #a86923;}
	
	#main_nav ul li a:hover span, #main_nav ul li a.active span {color: #a86923; -webkit-transition: color 0.2s linear;} 
	
	/**************************************************************************
	
								 CONTENT Styles
	
	***************************************************************************/
	#content {background: url(../images/content_repeat.png) repeat-y top left; position: relative; height: auto !important; height: 600px; min-height: 600px; margin: -3px 0 0 0; padding: 40px 36px 40px 50px; z-index: 300;}
	
	/**************************************************************************
	
								  WORK Styles
	
	***************************************************************************/
	#intro h2 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 2.6em; font-weight: normal; font-style: italic; line-height: 1.4em; letter-spacing: normal; word-spacing: 1px; text-transform: none; color: #1a526a; text-shadow: -1px -1px 0px #d6e2e6; max-width: 1220px; margin: -8px 0 55px 0;}
	
	.projects {position: relative; padding: 0 0 40px 299px;}
	
	.projects:last-child {padding: 0 0 0 299px;}
	
	.project_info {position: absolute; top: 0; left: 0; width: 259px; margin: 0 20px 0 0; padding: 0 20px 0 0; border-right: 1px solid #1a526a;}
	
	.project_title {font-size: 2em; margin: 0 0 5px 0;}
	
	.project_info p {margin: 0 0 10px 0;}
	
	.projects img {background: #ffffff; position: relative; width: 100% !important; max-width: 1000px; border: 1px solid #e3eaed; box-shadow: 0px 0px 5px #264e5f; -moz-box-shadow: 0px 0px 5px #264e5f; -webkit-box-shadow: 0px 0px 5px #264e5f;}
	
	/**************************************************************************
	
								 FOOTER Styles
	
	***************************************************************************/
	#footer {background: url(../images/header_footer_repeat.png) repeat-x bottom left; position: relative; float: left; clear: both; width: 100%; height: 113px; margin: -3px 0 0 0; z-index: 200;}
	
	#footer p {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; font-style: normal; color: #6a9eb4; text-shadow: none;}
	
	#footer a {color: #6a9eb4; text-decoration: none; border: none; -o-transition: color 0.15s linear;}
	
	#footer a:hover {color: #a86923; border-bottom: 1px dotted #a86923; -webkit-transition: color 0.15s linear;}
	
	#footer strong {font-weight: normal; color: #1a526a;}
	
	#footer h3 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 2.4em; font-weight: normal; font-style: italic; line-height: 1em; letter-spacing: normal; color: #1a526a; text-shadow: none; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #e3eaed;}
	
	#footer_left {float: left; clear: left; width: 610px; padding: 34px 20px 20px 10px;}
	
	#social_links {float: left; clear: both; padding: 0 0 15px 0;}
	
	#social_links li {float: left; padding: 0 30px 0 0;}
	
	#social_links li.last {padding: 0;}
	
	#social_links a {background-image: url(../images/social_icons.png); background-repeat: no-repeat; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.2em; font-weight: bold; font-style: italic; line-height: 33px; height: 33px; padding: 0 0 0 38px; display: block;}
	
	#social_links a:hover {border: none;}
	
	#twitter_icon {background-position: 0px 0px;}
	
	#twitter_icon:hover {background-position: 0px -33px;}
	
	#grooveshark_icon {background-position: 0px -66px;}
	
	#grooveshark_icon:hover {background-position: 0px -99px;}
	
	#linkedin_icon {background-position: 0px -132px;}
	
	#linkedin_icon:hover {background-position: 0px -165px;}
	
	#delicious_icon {background-position: 0px -198px;}
	
	#delicious_icon:hover {background-position: 0px -231px;}
	
	#email_icon {background-position: 0px -264px;}
	
	#email_icon:hover {background-position: 0px -297px;}
	
	#footer_nav, #copyright {float: left;}
	
	#footer_nav {margin: 0 0 0 -9px; padding: 0 30px 0 0;}
	
	#footer_nav ul li {padding: 0 10px 0 11px; display: inline; border-left: 1px solid #6a9eb4;}
	
	#footer_nav ul li:first-child {padding: 0 10px 0 10px; border: none;}
	
	#footer_nav ul li a {font-size: 1.1em; font-weight: normal; text-transform: uppercase; color: #6a9eb4; text-decoration: none; border: none; -o-transition: color 0.15s linear;}
	
	#footer_nav ul li a:hover {color: #a86923; -webkit-transition: color 0.15s linear;}
	
	#footer_logo {background: url(../images/header_divider.png) no-repeat top left; position: relative; float: left; width: 260px; height: 73px; margin: -1px 0 0 0; padding: 35px 20px 20px 50px;}
	
	#footer_logo h4 {position: absolute; bottom: 30px; left: 50px; width: 262px; height: 62px;}
	
	#footer_logo h4 a {background: url(../images/logo.png) no-repeat bottom left; width: 100%; height: 100%; display: block; border: none; text-indent: -9999px;}
	
	#footer_logo h4 a:hover {background-position: top; border: none;}

}