/*///////////////////           Basics  ////////////*/

body {
	text-align: center;
	font-size: 100.01%;
	background-color: #89CCCE; /* #F9F1D2 */
	color: #0D6B84;
	text-shadow: 0px 1px 2px #fff ;
	
	}
		
a {
	color: #ffffff;
	border-bottom: 1px dotted #ffffff;
	text-shadow: none;
	}
	
a:hover, a:focus {
	color: #eeeeee;
	border-bottom: 1px dotted #eeeeee;
	}

#header ul li a {
	padding: 0;
	}
	
em {
	font-style: italic;
	}

h1 {
	font: bold 2.325em/1em helvetica, arial, sans-serif;
	}

h1 span {
	font: bold .8em georgia;
	margin: 1em 0 0 0;
	color: #ffffff;
	text-shadow: none;
	}

h2 {
	font: italic 1.5em georgia, serif;
	letter-spacing: 1px;
	margin: 1em 0em .5em 1.5em;
	}
	
#myname h2 {
	font: italic 1.25em georgia, serif;
	margin: .25em 0 0 0;
	}
#skills h2 {
	margin-left: 0;
	}
#footer h2 {
	font-size: 1.25em;
	}
h3 {
	font: italic .925em georgia, serif;
	color: #fff;
	text-shadow: none;
	}

p, li {		
	font: normal 0.925em/1.625em helvetica, arial, sans-serif;
	}
#header ul li {
	font: normal 1.25em georgia;
	}

#emailsent	{
	width: 50em;
	height: 37.5em;
	left:5em;
	top:5em;
	background: url('../img/emailsent.png') no-repeat 0 0;
	text-align: center;
	}

#emailsent h1{
	margin: 7em 0em 0em 0em;
	}

#emailsent p {
	margin: 1em 0em 0em 0em;
	}
#emailsent a {
	background-color: #fff;
	height: 2em;
	width: 12em;
	text-shadow: none;
	}
#emailsent a:hover {
	background-color: #0D6B84;
	color: #fff;
	text-shadow: none;
	}	
span.blue {
	color: #0D6B84;
	}

/*///////////////        Page Sections /////////////*/	

#pagehead, #pageabout, #pagework, #pagecontact, #pagefooter {
	position: relative;
	top: 0em; left: 0em;
	width: 100%;
	height: auto;
	margin:0;
	}
	
#pagehead {
	height:12em;
	background: url('../img/pagehead.gif') repeat-x -5% -40px;
	}

#pageabout {
	background: url('../img/contactbgclouds.gif') repeat-x -50% 100%;
	margin: 0 0 0 0;
	}

#pagework {
	background: #FFFCF0 url('../img/cloudscontact.gif') repeat-x -20% 100%;
	}

#pagecontact {
	overflow: hidden;
	}

#pagefooter {
	background-color: #89CCCE;
	}
	
div.wrap {
	position: relative;
	text-align: left;
	top: 0; left: 0;
	margin: 0em auto;
	width: 60em;
	height: auto;
	overflow: hidden;
	}
	
/*//////////////       Main Content ///////*/
	
#header, #about, #work, #contact, #footer {
	position: relative;
	float: left;
	top: 0em; left: 0em;
	width: 100%;
	height: auto;
	margin: 0em;
	overflow: hidden;
	}
		
#header {
	height:12em;
	} 

#about {
	background-color:#98D1D3;
	border-bottom: 1px solid #ABD8D8;
	-moz-border-radius-topright:10px;
	-webkit-border-radius-top-right:10px;
	-moz-border-radius-topleft:10px;
	-webkit-border-radius-top-left:10px;
	}

#work {
	border-top: 1px solid #7dbec0;
	-moz-border-radius-bottomright:10px;
	-webkit-border-radius-bottom-right:10px;
	-moz-border-radius-bottomleft:10px;
	-webkit-border-radius-bottom-left:10px;
	}

#footer {
	background-color: #89CCCE;
	}
	
/*///////////////////////////////   HEADER ///////
///////////////////////////////////////////////*/
	
#header {
	background: url('../img/header_up2.png') no-repeat 0 -55px; 
	}

/******** NAV *******/	
#header ul {
	float: right;
	margin: 6em 2em 0em 0em;
	}
	
#header ul li {
	float: left;
	margin-left: 1em;
	text-align: center;
	}
#header ul li a {
	color: #0D6B84;
	font-style: italic;
	font-size: .9em;
	display: block;
	width: 5em;
	height: 2em;
	line-height: 2em;
	background-color: #fefceb;
	text-shadow: 0px 1px 2px #fff ;
	border:1px solid #80C1C1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	}
#header ul li a:hover {
	color: #fff;
	text-shadow: 0px 1px 2px #0D6B84 ;
	background-color: #0d6b84;
	}
#myname {
	float: left;
	width: auto;
	margin: 6em 0em 0em 2em;
	}

/*///////////////////////////////   ABOUT ///////
///////////////////////////////////////////////*/

#skills, #likes {
	float: left;
	width: 23em;
	margin-bottom: 1em;
	}

#about p, #skills li{
	list-style-type: disc;
	margin: 0em 0em 0em 2.5em;
	}

#skills {
	float: right;
	width: 21em;
	margin: 0em 0 1em 0;
	}
	
#skills li {
	margin: 0 0 .325em 1em;
	}	
#bio {
	float: left;
	width: 36em;
	height: auto;
	}
	
#bio p {
	margin-bottom: 1em;
	padding-right: 1em;
	}
	
#likes p {
	padding-right: 1em;
	}
	
/*///////////////////////////////   WORK ///////
//////////////////////////////////////////////*/

#work {
	background-color: #98D1D3;
/*	background: #98D1D3 url('../img/workback.gif') no-repeat bottom left;*/
	height: auto;
	}
	
#work h2 {
	margin: 1em 0 1em 1.75em;
	}
	
p.phead {
	margin: 0.5em 0em .75em 2.5em;
	}
	
/*//////work samples////*/

#worksample {
	height: 35em;
	}
	
div.projects {
	float: left;
	width: 26.5em;
	height: 9.5em;
	margin: 0em 0em 2.25em 2.25em;
	background-color:  #89CCCE; /* #F9F1D2; */
	display: inline;
	border-top: 1px solid #ABD8D8;
	border-bottom: 1px solid #ABD8D8;
	}

div.info {
	float: left;
	width: 11em;
	margin: 1em 0em 0em 1em;
	display: inline;
	}

div.info p {
	font: normal 0.75em/1.55em helvetica, arial, sans-serif;
	margin-top: 0.5em;
	line-height: 1.325em;
	}
	
div.info p.detail {	
	margin-top: 1em;
	}
	
div.info span {
	font: bold 1.125em helvetica, arial, sans-serif;
	}
div.info .detail span {
	font: bold 1em helvetica, arial, sans-serif;
	}
	
#worksample img {
	position: relative;
	float: right;
	margin: 1.125em 1em .5em 0em;
	border: .125em solid #D3E5E4;
	width:13em;
	height:7em;
	}

#worksample p a {
	font-size: 1em;
	}
/*///////    popup txt//
////////////////////*/  

.popup {
	position: absolute;
	width: 29em;
	height: 9.5em;
	background-color: #0d6b84;
	border-bottom: 1px solid #ABD8D8;
	}

.pop-left {
	background: #0d6b84 url('../img/pop-left-bg.png') no-repeat top right;
	}
.pop-right {
	background: #0d6b84 url('../img/pop-right-bg.png') no-repeat top left;
	}
	
.pop-right p, .pop-left p {
	font: normal 0.72em/1.55em verdana;
	margin: 1.325em 3em 0em .5em;
	padding: 0em .5em;
	color: #fff;
	text-shadow: none;
	}
	
.pop-right p {
	margin: 1.325em 1em 0em 1em;
	}
	
.popup .flash {
	position: relative;
	float: left;
	margin: .825em 0em 0em 0.5em;
	}

/*//////////  POPUPS //////
////////////////////////*/	

#popOne,#popTwo,#popThree,#popFour,#popFive,#popSix,#popSeven,#popEight {
		position: relative;
		z-index: 5;
		}
		
#popOne {
	top: 0em; left: 28.5em;
	}
#popTwo {
	top: 0em; left: 2.25em;
	}
#popThree {
	top: 11.75em; left: 28.5em;
	}
#popFour {
	top: 11.75em; left: 2.25em;
	}
#popFive {
	top: 23.5em; left: 28.5em;
	}
#popSix {
	top: 23.5em; left: 2.25em;
	}
#popSeven {
	top: 35.25em; left: 28.5em;
	}
#popEight {
	top: 35.25em; left: 2.25em;
	} 
	
/*///////////////////////////////   CONTACT ///////
////////////////////////////////////////////////*/

#contact {
	height: auto;
	margin-left: 0em;
	background: url('../img/formcloud.png') no-repeat bottom left;
	}
	
#contact p {
	width: 75%;
	margin: 0.5em 0em .75em 2.5em;
	}
#contact a {
	text-shadow: none;
	}	
span.email_link {
	color:#0D6B84;
	border-bottom: 1px dotted #0D6B84;
	}

#formkck {
	width: 36em;
	height: auto;
	margin: 1em 0em 0em 2em;
	overflow: hidden;
	}

#formkck ul {
	overflow: hidden;
	margin-bottom: 2em;
	}
	
#formkck li {
	width: 30em;
	height: auto;
	padding: 0;
	margin: 0;
	display: block;
	line-height: 1em;
	}

label {
	font-weight:bold;
	width: 10em;
	height: auto;
	margin: 0em 1.125em 0em .145em;
	}
	
input, textarea {
	float:left;
	background-color: #98D1D3; /*#98D1D3;*/
	border: solid 1px #fffcf0;
	width: 22em;
	height: 1.5em;
	margin: 0.125em 6.75em 1em 0em;
	padding: .5em;
	color: #fff;
	font: normal 0.9em/1.55em helvetica, arial, sans-serif;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	text-shadow: none;
	}

textarea {
	height: 10em;
	width: 22em;
	margin-right: 4em;
	}

button {
	border: none; 
	width: auto;
	height: 3em;
	width: 8em;
	font-size: 1em;
	background-color: #0D6B84;
	border-top: 1px solid #98D1D3;
	border-right: 1px solid #98D1D3;
	border-bottom: 2px solid #229eb2;
	border-left: 1px solid #229eb2;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	color: #fff;
	cursor: pointer;
	text-shadow: none;
	}

/*///////////////////////////////   FOOTER ///////
///////////////////////////////////////////////*/

#footer {
	height: 12.5em;
}
#footer h2 {
	margin: .5em 0em 0em 1em;
	}
	
h2#happenings {
	margin: 3em 0em .5em 1em;
	}
	
#footer p, #footer li {
	font: normal 0.8em/1.5em helvetica, arial, sans-serif;
	margin: .5em .5em .5em 1.5em;
	}
	
#moreinfo, #friends {
	position: relative;
	float: left;
	top: 2em;
	width: 24em;
	height: auto;
	background-color: #98D1D3;
	padding:.5em 0 .75em 0;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	}

#friends {
	float: right;
	width: 33em;
	overflow: hidden;
	height: auto;
	}
	
#friends ul {
	margin: .5em 1em 1em 1em;
	overflow: hidden;
	}

#friends ul li {
	float: left;
	font: normal 0.8em/1.5em helvetica, arial, sans-serif;
	text-align: left;
	margin: 0em 1em .25em 0em;
	}

#friends img {
	float: left;
	height: 2.325em;
	width: 2.325em;
	margin: 0em .5em .25em 0em;
	}
	
span.top {
	position: relative;
	float: right;
	text-align: right;
	margin: 0.25em 1.5em .25em 0em;
	}
	
#work span.top {
	font-size: .8em;
	}