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

/*COLOR SCHEME
 *rgb(125,105,105) - BROWN
 * rgb(237,234,221) - LIGHT ASH
 * rgb(242,240,231) - SUPER LIGHT ASH
 * rgb(218,207,179) - ASH COLOR
 * rgb(89,126,142) - MUSKY BLUE
 * rgb(80,114,129) - DARK MUSKY BLUE
 * rgb(180,197,191) - PALE MUSKY GREEN
 * rgb(209,232,208) - LIME GREEN
 * rgb(120,152,141) - DARK GREEN
 */


html, body, div, span, 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, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
html { 
	background: url('../images/dot_bg_temp.png') repeat; 
}
ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: rgb(120,152,141);
}
body {
	width: 960px;
	margin: 0 auto 35px;
	color: rgb(120,152,141);
	text-align: center;
	font-size: 16px;
}
/********************LOGO TREATMENT***************************************************/
.halfCircle {
	float: left;
	background-color: rgba(0,86,114,.5);
	width: 331.5px;
	height:331.5px;
	margin-top: -140px;
	margin-left: -73px;
	margin-right: auto;
	border-top-left-radius: 165.75px;
	border-top-right-radius: 165.75px;
	border-bottom-left-radius: 165.75px;
	border-bottom-right-radius: 165.75px;
	-webkit-border-radius: 165.75px;
	-moz-border-radius: 165.75px;
	position: relative;
}
.halfCircle .dsdLogoRev {
	position: absolute;
	width: 170px;
	height: 137px;
	left: 77px;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	margin-top: 155px;
}
.dsdLogoRev {
	background-image: url("../images/dsd-logo-green-ds-white-design.png");
	background-position:center;
	background-repeat: no-repeat;
	height: 137px;
	width: 170px;
	margin: 20px auto 0;
}
/********************MAIN TOP NAV***************************************************/
#mainNav {
	margin-top: 105px;
	display: inline-block;
 }
#mainNav ul{
	display: inline-block;
	text-align: left;
	list-style-type: none;
	padding: 0;
}
#mainNav li{
	display: inline-block;
   	border-bottom: 1px dotted rgb(89,126,142);
	padding-bottom: 7px;
	margin-right: 16px;
}

#mainNav a:link, #mainNav a:visited{
	display: inline;
	text-transform: uppercase;
	font-size: 1.2em;
	line-height: 1.2em;
	padding: 10px 10px 15px 10px;
	color: rgb(89,126,142) ;
	font-family: 'ChunkFiveRegular', Georgia, serif;
    transition: color 500ms ease-out;
    -moz-transition: color 500ms ease-out; 
    -webkit-transition: color 500ms ease-out;
    -o-transition: color 500ms ease-out;
     transition: color 500ms ease-in;
    -moz-transition: color 500ms ease-in; 
    -webkit-transition: color 500ms ease-in;
    -o-transition: color 500ms ease-in;
   	border-top: 1px dotted rgb(89,126,142);
   	border-bottom: 1px dotted rgb(89,126,142);

}

#mainNav a:hover, #mainNav a:active {
	display: inline;
	background-color: rgba(120,152,141,.3);
	color: rgb(125,105,105);
}

/********************GENERAL TYPOGRAPHY***************************************************/
section.portfolioPage h1{
	clear: both;
	font-family: 'ChunkFiveRegular', Georgia, serif;
	text-transform: uppercase;
	font-size: 1em;
	text-align: left;
   	border-bottom: 1px dotted rgb(89,126,142);
   	padding-bottom: 16px;
	letter-spacing: 1px;
	color: rgb(89,126,142) ;
	margin: 20px 8px 16px;
}
section.portfolioPage h2{
	clear: both;
	display: block;
	font-family: 'ChunkFiveRegular', Georgia, serif;
	text-transform: uppercase;
	font-size: .8em;
	text-align: left;
   	border-bottom: 1px dotted rgb(89,126,142);
   	padding-bottom: 8px;
	letter-spacing: 1px;
	color: rgb(89,126,142) ;
	margin: 20px 8px 8px;
}
section.portfolioPage h2 span{
	display: block;
	float: right;
	margin-right: 8px;
}
.portfolioPage p{
	font-family: 'ArvoRegular', Georgia, serif;
	font-size: 1em;
	margin-bottom: 16px;
}
.portfolioPage p.linksBody{
	text-align: left;
	font-family: 'ArvoRegular', Georgia, serif;
	font-size: .8em;
	margin-bottom: 16px;
	margin-left: 8px;	
}
/********************GENERAL FLEXSLIDER***************************************************/
.flexslider{
	clear: both;
}

/********************SLIDE 1***************************************************/
.firstSlide{
	width: 527px;
	height: 273px;
	margin: 0 auto;
	background-repeat: no-repeat;
}
.firstSlide img{
	width: 527px;
	height: 273px;
	margin: 0 auto;
	background-repeat: no-repeat;
}

/********************SLIDE 2**************************************************/

.secondSlide{
	width: 475px;
	height: 273px;
	margin: 0 auto;
	background-repeat: no-repeat;
}
.secondSlide img{
	width: 475px;
	height: 273px;
	margin: 0 auto;
	background-repeat: no-repeat;
}
/********************SLIDE 3***************************************************/
.thirdSlide{
	margin-top: 50px;
}
.thirdSlide h1{
	font-family: 'ArvoRegular', Georgia, serif;
	font-size: 3em;
	color: rgb(89,126,142);
	text-align: center;
}
.thirdSlide span a{
	color: rgb(126,181,194);
	border-bottom: 2px rgb(126,181,194) dotted;
}
.thirdSlide span a:hover {
	color: #ffffff;
}
/********************FOURTH SLIDE******************************************/
.fourthSlide{
	width: 475px;
	height: 211px;
	margin: 40px auto 0;
	background-repeat: no-repeat;
}
.fourthSlide img{
	width: 475px;
	height: 211px;
	margin: 0 auto;
	background-repeat: no-repeat;
}
.divider{
	background-image: url("../images/curly-brace-horiz-96x11px.png");
	height: 11px;
	width: 960px;
	background-repeat: repeat-x;
	margin-bottom: 14px
}
div.divider{
	opacity: .7;
}
/********************MAIN SECTION**************************************************/
aside{
	margin-bottom: 16px;
}

/********************LEFT ASIDE - ABOUT ME**************************************************/
.aboutMe{
	width: 320px;
	height: 498px;
	float: left;
	margin-right: 16px;
	text-align: left;
}
.aboutMe p {
	font-family: 'ArvoRegular', Georgia, serif;
	font-size: 0.85em;
	letter-spacing: 2px;
}
.aboutMe h1 {
	font-family: 'ArvoRegular', Georgia, serif;
	font-size: 2.6em;
	color: rgb(89,126,142);
	margin-bottom: 10px;
}
.aboutMe strong {
	font-family: 'ChunkFiveRegular', Georgia, serif;
	color: rgb(89,126,142);
}
.myMugLine {
	background-image: url("../images/my-mug-shot-48x87px.png");
	margin: 16px 0 0 16px;
	width: 48px;
	height: 87px;
}

/********************MAIN SECTION*************************************************/

.mainSection p{
	font-family: 'ChunkFiveRegular', Georgia, serif;
    text-shadow: none;
}
.topRow {
	height: 257px;
	position: relative;
}
.topLeftThumb{
	background-image: url("../images/print-portfolio-button.jpg");
	width: 303px;
	height: 241px;
	background-repeat: no-repeat;
	float: left;
	margin-right: 16px;
	z-index: 3;
}
.topLeftThumb div{
	background-image: url("../images/fish_sprite-181x234.png");
	width: 181px;
	height: 112px;
	overflow: hidden;
	margin:60px auto 0;
	z-index: 1;
}
a .topLeftThumb div:hover{
	background-image: url("../images/fish_sprite-181x234.png");
	background-position: 0 -112px;
}
	
.topRightThumb{
	background-image: url("../images/web-portfolio-button.jpg");
	width: 303px;
	height: 241px;
	background-repeat: no-repeat;
	z-index: 3;
	position: relative;
	float: left;
}

.topRightThumb div{
	background-image: url("../images/fish_sprite-181x234.png");
	background-position: 0 -112px;
	width: 181px;
	height: 112px;
	overflow: hidden;
	margin:60px auto 0;
	z-index: 1;
}
a .topRightThumb div:hover{
	background-image: url("../images/fish_sprite-181x234.png");
	background-position: 0 0;
}

/******************** BUTTONS AND TYPE*************************************************/
.topRow p {
	margin-top:50px;
	text-transform: uppercase;
	font-size: 1.2em;
	color:  rgb(237,234,221);
	letter-spacing: 1px;
}

.bottomRow{
	margin-bottom:16px;
}
.bottomRow p{
	letter-spacing: 1px;
	padding-top: 205px;
}
.bottomLeftThumb{
	background-image: url("../images/tall-beige-dandy-button.jpg");
	width: 142px;
	height: 241px;
	background-repeat: no-repeat;
	float: left;
	margin-right: 17px;
}
.bottomMiddleThumb{
	background-image: url("../images/links-button-1.jpg");
	width: 303px;
	height: 241px;
	background-repeat: no-repeat;
	float: left;
	margin-right: 17px;
}
.bottomMiddleThumb p{
	padding-top: 185px;
}
.bottomRightThumb{
	background-image: url("../images/tall-beige-bear-button.jpg");
	width: 142px;
	height: 241px;
	background-repeat: no-repeat;
	float: left;
}


/********************PORTFOLIO PAGE LAYOUT STYLES*************************************************/
.portfolioPage{
	padding: 7.3px;
	width: 100%;
	margin-top: 64px;
	padding-bottom: 16px;
}
.portfolioPage ul{
	width: 100%;
	padding: 0;
	margin: 0;
	display: inline;
}
.portfolioPage li{
	margin: 7.3px;
}

/********************PAGE FOOTER*************************************************/

footer div.basePlate{
	clear:both;
}
.contactInfo{
	float:left;
	margin-left: 16px;
	font-family: 'ArvoRegular', Georgia, serif;
	font-size: 1em;
	color: rgb(89,126,142);
}
.myName{
	font-family: 'ChunkFiveRegular', Georgia, serif;
	font-size: 1.2em;
}
.contactInfo a{
	font-size: 1em;
	font-family: 'ArvoRegular', Georgia, serif;
	color: rgb(89,126,142);
}
.contactInfo a:hover{
	font-size: 1em;
	font-family: 'ArvoRegular', Georgia, serif;
	color: rgb(120,152,141);
}

.basePlate{
	width: 960px;
	height: 240px;
	background: rgb(205,222,216);
	background: rgba(205,222,216,.4);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 45px;
	border-bottom-right-radius: 45px;
	-webkit-border-bottom-left-radius: 45px;
	-webkit-border-bottom-right-radius: 45px;
	-moz-border-bottom-left-radius: 45px;
	-moz-border-bottom-right-radius: 45px;
}
.basePlate p{
	text-align: left;
	margin-right: 45px;
}
.contactInfo h3{
	margin-top: 55px;
	margin-bottom: 5px;
	width: 355px;
	text-transform: uppercase;
	font-size: 1.2em;
	line-height: 1.2em;
	color: rgb(125,105,105);
	font-family: 'ChunkFiveRegular', Georgia, serif;
	text-align: left;
}

.dsdLogo {
	background-image: url("../images/dsd_logo_temp.png");
	background-position:center;
	background-repeat: no-repeat;
	height: 165px;
	width: 201px;
	line-height: 165px;
	margin: 0 auto;
	padding-top: 55px;
	float: left;
}
div.skillsListInner {
	margin-top: 65px;
	margin-left: 112px;
	float: left;
}
.skillsListInner h4 {
	text-transform: uppercase;
	font-size: 1.2em;
	line-height: 1.5em;
	color: rgb(80,114,129);
	font-family: 'ChunkFiveRegular', Georgia, serif;
	text-align: right;
}
div.skillsList {
	float:left;
	margin-top: 55px;
	margin-left: 16px;
	padding-left: 16px;
	border-left: 1px dotted rgb(125,105,105);
}
.skillsList h4 {
	text-transform: uppercase;
	font-size: 1.2em;
	line-height: 1.5em;
	color: rgb(125,105,105);
	font-family: 'ChunkFiveRegular', Georgia, serif;
	text-align: left;
}
footer p.copyRight{
	padding-top: 16px;
	font-size: .6em;
	font-family: 'ArvoRegular', Georgia, serif;
	color: rgb(120,152,141);
}
/*COLOR SCHEME
 * rgb(125,105,105) - BROWN
 * rgb(242,240,231) - SUPER LIGHT ASH
 * rgb(237,234,221) - LIGHT ASH
 * rgb(218,207,179) - ASH COLOR
 * rgb(89,126,142) - MUSKY BLUE
 * rgb(80,114,129) - DARK MUSKY BLUE
 * rgb(180,197,191) - PALE MUSKY GREEN
 * rgb(209,232,208) - LIME GREEN
 * rgb(120,152,141) - DARK GREEN
 */

@media screen and (max-width: 860px){
	.thirdSlide h1 { font-size: 2.5em;}
}
@media screen and (max-width: 750px) {
	br{
		display:none;
	}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

	.stretch {
		max-width: 100%;
		height: auto;
		}
	.fourthSlide img {
		max-width: 100%;
		height: auto;
		}

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px)
and (orientation : landscape) {

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px)
and (orientation : portrait) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

}