@charset "utf-8";

*{margin: 0px; padding: 0px; font-family: Helvetica,Arial,sans-serif; outline: none;}
html{}
body{background: #E7EEF7; font-family: Helvetica,Verdana;}

/* typography */
p{font-size: 14px; font-style: normal; color: #191919; font-weight: normal; line-height: 20px; margin: 5px 0px 5px 0px;  }
.footer p{color: #E7EEF7;}
.contactContent p{color: #E7EEF7;}
.contactContent2 p{color: #E7EEF7;}
a{color: #00ADEE; text-decoration: none;}
a:hover{}
a img{border: none; margin: 0px; padding: 0px;}
h1{font-size: 30px; font-style: italic; color: #00ADEE; font-weight: normal; margin: 0px 0px 10px 0px; }
h2{font-size: 18px; color: #191919; font-weight: normal; margin: 0px 0px 10px 0px;}
h3{font-size: 18px; font-style: italic; color: #00ADEE; font-weight: normal; margin: 20px 0px 0px 0px;}
h4{font-size: 20px; font-style: italic; color: #191919; font-weight: normal; margin: 5px 0px 0px 0px;}
h5{font-size: 14px; font-weight: bold; margin: 10px 0px 0px 0px;}
a h6{font-size: 12px; font-weight: normal; margin: 5px 0px 0px 0px;}



.resumeInfo{font-size: 13px; font-weight: normal; margin: 5px 0px 0px 0px; font-style: italic; font-weight: bold; }
/* custom typography */

/*forms*/
.footer input{width:300px; height: 20px; border: solid 2px #C1C1C1; margin: 2px 0px 15px 0px; color:#191919; font-size: 14px; text-indent: 5px; float: right; }
.formBox{width:350px; height: 20px; border: solid 2px #C1C1C1; margin: 2px 0px 10px 0px; color:#191919; font-size: 14px; text-indent: 5px; }
.footer textarea{width: 300px; height: 150px; border: solid 2px #C1C1C1; margin: 2px 0px 10px 0px; color:#191919; font-size: 14px; text-indent: 5px; float: right;}
.messageAlert{width: 300px; height: auto; float: right; margin: 0px 0px 10px 0px; color: #00ADEE;}
.contactContent2  input{width:350px; height: 20px; border: solid 2px #C1C1C1; margin: 2px 0px 15px 0px; color:#191919; font-size: 14px; text-indent: 5px; float: right; }

.contactContent textarea{width: 350px; height: 150px; border: solid 2px #C1C1C1; margin: 2px 0px 10px 0px; color:#191919; font-size: 14px; text-indent: 5px; float: right;}
.contactContent2 textarea{width: 350px; height: 150px; border: solid 2px #C1C1C1; margin: 2px 0px 10px 0px; color:#191919; font-size: 14px; text-indent: 5px; float: right;}
.footer .sendMessageBtn{width:164px; height: 30px; background: url(images/sendMessageBtn.png); margin: 8px 0px 0px 0px; border: none; float: right; text-align: left; font-size: 14px; font-style:italic; color: #E7EEF7; padding: 0px 0px 0px 15px; cursor: pointer; }
.contactContent .sendMessageBtn{width:164px; height: 30px; background: url(images/sendMessageBtn.png); margin: 8px 0px 0px 0px; border: none; float: right; text-align: left; font-size: 14px; font-style:italic; color: #E7EEF7; padding: 0px 0px 0px 15px; cursor: pointer; }
.contactContent2 .sendMessageBtn{width:164px; height: 30px; background: url(images/sendMessageBtn.png); margin: 8px 0px 0px 0px; border: none; float: right; text-align: left; font-size: 14px; font-style:italic; color: #E7EEF7; padding: 0px 0px 0px 15px; cursor: pointer; }

.none {
	display: none;
}

.clear{clear: both;}
.right{float: right;}

/* wrapper */
.headerWrapper{width: 100%; min-height: 110px; margin: 0px;}
.contentWrapper{width: 100%; min-height: 600px; margin: 0px 0px 0px 0px;}
.contentWrapperMissingPage{width: 100%; min-height: 400px; margin: 0px 0px 0px 0px;}
.footerWrapper{width: 100%; min-height: 100px; margin: 0px; background: #191919; clear: both;}
.contactWrapper{width: 100%; min-height: 600px; margin: 0px 0px 0px 0px; background: #191919; margin: 15px 0px 0px 0px;}

/* header */
.header{height: 110px; width:900px; margin: 0 auto; background: url(images/headBkg.png) no-repeat top right;}
.logo{float: left; height: 65px; width: 385px; margin: 40px 0px 0px 0px;}


/* navigation */
/* navigation */
#primaryNav{width:500px; float: right; margin: 62px 0px 0px 0px; }
#primaryNav ul{list-style: none; margin: 0px 0px 0px 0px; padding:  0px 0px 0px 0px; display: inline-block; float: right;}
#primaryNav a{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#primaryNav li{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left;}
#primaryNav li, #primaryNav a{display: block; margin: 0px 5px 0px 0px; padding: 0px; text-indent: -9999px;}

#home a{width: 76px; height: 40px; background: url(images/primaryNav/home.png) 0px 0px;}
#home a:hover{width: 76px; height: 40px; background: url(images/primaryNav/home.png) 0 -40px;}
#currentlyHome a{width: 76px; height: 40px; background: url(images/primaryNav/home.png) 0px -80px;}

#portfolio a{width: 106px; height: 40px; background: url(images/primaryNav/portfolio.png) no-repeat;}
#portfolio a:hover{width: 106px; height: 40px; background: url(images/primaryNav/portfolio.png) 0px -40px no-repeat;}
#currentlyPortfolio a{width: 106px; height: 40px; background: url(images/primaryNav/portfolio.png) 0px -80px no-repeat;}

#experience a{width:106px; height: 40px; background: url(images/primaryNav/experience.png) 0px 0px;}
#experience a:hover{width: 106px; height: 40px; background: url(images/primaryNav/experience.png) 0px -40px no-repeat;}
#currentlyExperience a{width:106px; height: 40px; background: url(images/primaryNav/experience.png) 0px -80px no-repeat;}

#contact a{width: 90px; height: 40px; background: url(images/primaryNav/contact.png) 0px 0px;}
#contact a:hover{width: 90px; height: 40px; background: url(images/primaryNav/contact.png) 0px -40px;}
#currentlyContact a{width: 90px; height: 40px; background: url(images/primaryNav/contact) 0px -80px;}


/* content */
.content{min-height: 300px; width:900px; margin: 0 auto;}

/* footer */
.footer{min-height: 300px; width: 900px; margin: 0 auto; background: url(images/footerBkg.png) no-repeat 340px 0px; #191919; clear: both; padding: 30px 0px 50px 0px; overflow: auto;}
.footerLeftSide{width:450px; height: 100%; float: left; }
.footerRightSide{width: 350px; height: 100%; float: right; margin: 0px 15px 0px 0px; }
.socialList{width: 450px; height: 50px;}

.socialList ul{list-style: none; margin: 0px 0px 0px 0px; padding:  0px 0px 0px 0px; display: inline-block; float: left;}
.socialList a{margin: 0px 0px 0px 0px; padding: 10px 3px 2px 3px;}
.socialList li{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left;}
.socialList li, #socialList a{display: block; margin: 8px 0px 0px 0px; padding: 0px;}

.formWrapper strong{color: #00ADEE;}

.bottomFooter{ clear: both; color: white; font-size: 13px;}
.bottomFooter img{padding-top: 5px;}
/* homepage */
.featuredContent{min-height: 370px; width:100%; margin: 20px 0px 0px 0px;}
.recentContent{min-height: 200px; width:100%;}
.blogContent{min-height: 200px; width:100%; margin: 0px 0px 40px 0px;}

.featureLeft{width: 480px; height: auto; float: left;}
.featureRight{width: 420px; height: auto; float: right;}
.intro{width:480px; height: auto; margin: 20px 0px 0px 0px; float: left;}
.mobileIntro{width: 480px; height: auto; margin: 20px 0px 0px 0px; float: left;}
.largePhone{width: 170px; height: 360px; margin: 30px 20px 0px 0px; float: right; background: url(images/largephone.png);}
.smallPhones{width: 220px; height: 80px; margin: 100px 0px 0px 0px; float: left;}
.featureMobileList{width: 220px; height: 105px; float: right; font-size: 16px; font-style: italic;}

.featureMobileList ul{list-style: none; margin: 0px 0px 0px 0px; padding:  0px 0px 0px 0px; display: inline-block; float: left;}
.featureMobileList a{margin: 0px 0px 0px 0px; padding: 8px 0px 2px 15px; color: #E7EEF7;}
.featureMobileList li{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left;}
.featureMobileList li, #featureMobileList a{display: block; margin: 2px 0px 2px 0px; padding: 0px;}

.featureList a{width: 205px; height: 20px; background: url(images/featureListBar.png) no-repeat; display: block;}
.featureList a:hover{color: #191919;}

.homeBarLeft{width:590px; height: 30px; background: url(images/recentWork.png) no-repeat; float: left; font-size: 16px; font-style:italic; color: #E7EEF7; padding: 8px 0px 0px 15px; }
.homeBarRight{width:295px; height: 30px; float: right; color: #E7EEF7;}
.homeBarRight a{color: #E7EEF7;}

a.button{width:295px; height: 30px; background: url(images/viewPortfolio.png) no-repeat; display: block; padding: 8px 0px 0px 15px; font-size: 16px; color: #E7EEF7; font-style: italic;}
a.button:hover{color: #191919; font-size: 16px; font-style: italic; }

a.launchButton{width:140px; height: 30px; background: url(images/launchButton.png) no-repeat; display: block; padding: 8px 2px 2px 9px; font-size: 15px; color: #E7EEF7; font-style: italic; margin: 0 auto;}
a.launchButton:hover{color: #191919; font-size: 15px; font-style: italic; }


.recentWorkThumbnails{height: 200px; width: 900px; clear: both;}
.recentWorkThumbnails ul{list-style: none; margin: 0px 0px 0px 0px; padding:  0px 0px 0px 0px; display: inline-block; float: left;}
.recentWorkThumbnails a{margin: 0px 0px 0px 0px; padding: 10px 0px 0px 0px; color: #C1C1C1;}
.recentWorkThumbnails a:hover{color: #00ADEE;}
.recentWorkThumbnails li{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left; border: solid 2px #C1C1C1; width:200px; height: 150px;}
.recentWorkThumbnails li, #recentWorkThumbnails a{display: block; margin: 10px 10px 0px 10px; padding: 0px; font-style: italic; font-size: 13px;  }


.blogDescription{width:420px; min-height: 100px; float: left; margin: 10px 0px 0px 0px;}
.blogImage{width: 420px; height: 150px; border: 2px solid #c1c1c1; float: right; margin: 10px 13px 0px 0px;}

.benifitsText{font-size: 16px; font-style: italic; font-weight: bold; }
.homeList{ font-size: 14px; font-style: italic;  margin: 5px 0px 0px 20px;}
.homeList li{margin: 0px 0px 0px 0px; line-height: 20px;}

/* portfolio */
.project{width: 900px; min-height: 200px; clear: both; margin: 30px 0px 0px 0px;}
.projectRightSide{width: 450px; height: auto; float: right;}
.portfolio{width: 900px; height: auto; clear: both; margin: 0px 0px 6g0px 0px;}
.clickProject{ width: 250px; margin: 0 auto; clear: both;}
.portfolioBar{width:900px; height: 30px; background: url(images/portfolioTop.png) no-repeat; font-size: 16px; font-style:italic; color: #E7EEF7; padding: 8px 0px 0px 15px; margin: 50px 0px 20px 0px;}

.portfolioTitle{color: #00ADEE; font-size: 14px; margin: 0px 0px 0px 0px;}
.portfolioCaption{color: #191919; font-style: italic; font-size: 11px; margin: 0px; }

#project1{width: 220px; margin: 75px auto 0px auto;}
#project2{width: 400px; margin: 75px auto 0px auto;}
#project3{width: 300px; margin: 75px auto 0px auto;}
#project4{width: 220px; margin: 75px auto 0px auto;}
#project5{width: 300px; margin: 75px auto 0px auto;}
#project6{width: 300px; margin: 75px auto 0px auto;}
#project7{width: 220px; margin: 75px auto 0px auto;}
#project8{width: 220px; margin: 75px auto 0px auto;}
#project9{width: 400px; margin: 75px auto 0px auto;}
#project10{width: 450px; margin: 75px auto 0px auto;}
#project11{width: 300px; margin: 75px auto 0px auto;}
#project12{width: 300px; margin: 75px auto 0px auto;}
#project13{width: 450px; margin: 75px auto 0px auto;}
#project14{width: 220px; margin: 75px auto 0px auto;}
#project15{width: 300px; margin: 75px auto 0px auto;}

.projectInfo{width:400px; height: auto; float: left; margin: 30px auto 0px auto;}
.thumbnails{width:450px; height: auto; clear: both; margin: 100px 0px 0px 0px; text-align: center;}
.thumbnails ul{list-style: none; margin: 0px auto 0px auto; padding:  0px 0px 0px 0px; display: inline-block; float: left;}
.thumbnails a{margin: 0px 0px 0px 0px; padding: 10px 0px 0px 15px; color: #E7EEF7;}
.thumbnails li{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left;}
.thumbnails li, #thumbnails a{display: block; margin: 2px 0px 2px 0px; padding: 0px; }


.thumbnails img{border: solid 2px #C1C1C1;}

/* experience */

.experienceLeftSide{ width: 380px; height:auto; float: left; padding: 0px 70px 50px 0px; margin: 40px 0px 0px 0px;}
.experienceRightSide{ width: 415px; height: auto; float: right; margin: 40px 0px 0px 35px;}
.resumeBox{ width: 450px; min-height: 200px; clear: both; color: #E7EEF7; margin: 40px 0px 0px 0px; float: left;}


.experienceLeftSide ul{ font-size: 14px; margin: 0px 0px 0px 20px;}
.experienceLeftSide li{ margin: 0px 0px 0px 0px; line-height: 20px; }

.expHeader{clear: both; width: 263px; height: 22px; padding: 8px 0px 0px 20px; background: url(images/expListBlue.png); color: #E7EEF7 }
.experienceList{float: left; width:450px; min-height: 400px; margin: 0px 0px 0px 0px;}
.experienceList ul{list-style: none; margin: 0px 0px 0px 0px; padding:  0px 0px 0px 0px; display: block; float: left;}
.experienceList li{ font-size: 13px; color: #E7EEF7; width: 230px; height: 16px; margin: 2px 0px 2px 0px; padding: 5px 0px 0px 50px; background: url(images/expListBlack.png) no-repeat 35px;}

/* resume page */
.resume{width: 450px; height: auto; margin: 40px 0px 60px 0px; float: left;}
.resume ul{ font-size: 14px; margin: 10px 0px 0px 20px;}
.resume li{margin: 3px 0px 3px 0px; line-height: 20px; line-height: 18px; }
.floatRight{float: right; margin: 120px 0px 0px 0px;}

/* contact */
.contactContent{min-height: 300px; overflow: auto; width: 900px; margin: 0 auto; background: url(images/footerBkg.png) no-repeat 340px 0px #191919; clear: both; padding: 30px 0px 50px 0px;}
.contactContent2{min-height: 300px; overflow: auto; width: 900px; margin: 0 auto; background: url(images/footerBkg.png) no-repeat 340px 0px #191919; clear: both; padding: 30px 0px 50px 0px;}
.contactLeftSide{width:450px; height: 100%; float: left; }
.contactRightSide{width: 350px; height: 100%; float: right; margin: 0px 15px 0px 0px; }
.socialList{width: 450px; height: 50px;}

.contactChoice{width: 350px; height: 40px; margin: 10px 0px 0px 0px;}

a.contactChoice1{float: left; width:145px; height: 20px; background: url(images/contactButton.png) no-repeat; display: block; padding: 8px 2px 2px 13px; margin: 0px 0px 0px 5px; font-size: 15px; color: #E7EEF7; font-style: italic;}
a.contactChoice1:hover{color: #191919; font-size: 15px; font-style: italic; }

a.contactChoice3{float: left; width:145px; height: 20px; background: url(images/contactButton.png) no-repeat; display: block; padding: 8px 2px 2px 13px; margin: 0px 5px 0px 0px; font-size: 15px; color: #E7EEF7; font-style: italic;}
a.contactChoice3:hover{color: #191919; font-size: 15px; font-style: italic; }


.contactChoice2{float: left; width:145px; height: 40px; background: url(images/contactButton2.png) no-repeat; display: block; padding: 8px 2px 2px 13px; margin: 0px 5px 0px 0px; font-size: 15px; color: #E7EEF7; font-style: italic;}


.contactChoice4{float: left; width:145px; height: 40px; background: url(images/contactButton2.png) no-repeat; display: block; padding: 8px 2px 2px 13px; margin: 0px 0px 0px 5px; font-size: 15px; color: #E7EEF7; font-style: italic;}

.contactMessageForm{clear: both;}
.checkBoxes{color: #00ADEE; line-height: 20px; }







/* mobile examples */
.mobileContent{min-height: 300px; overflow: auto; width: 900px; margin: 0px; padding: 30px 0px 50px 0px; overflow-x: hidden;}
.pageWide{float: left; width:900px; height: auto;}
.twoThird{float: left; width:595px; height: auto; padding: 0px 0px 5px 0px;}
.oneThird{float: left; width:300px; height: auto;}


a.mobileButton{width:235px; height: 20px; background: url(images/mobileButton.png) no-repeat; display: block; padding: 8px 0px 2px 15px; font-size: 15px; color: #E7EEF7; font-style: italic; margin: 0px 0px 5px 0px; float: right; }
a.mobileButton2{width:235px; height: 20px; background: url(images/mobileButton2.png) no-repeat; display: block; padding: 8px 0px 2px 15px; font-size: 15px; color: #191919; font-style: italic; margin: 0px 0px 5px 0px; float: right;}
a.mobileButton:hover{color: #191919; font-size: 15px; font-style: italic; float: right;}

.oneThirdExample1{float: left; width:270px; height: auto; margin: 30px 0px 0px 0px; padding: 275px 20px 0px 10px; background: url(images/mobileexample1.png) no-repeat center top;}
.oneThirdExample2{float: left; width:270px; height: auto; margin: 30px 0px 0px 0px; padding: 275px 20px 0px 10px; background: url(images/mobileexample2.png) no-repeat center top;}
.oneThirdExample3{float: left; width:270px; height: auto; margin: 30px 0px 0px 0px; padding: 275px 20px 0px 10px; background: url(images/mobileexample3.png) no-repeat center top;}

.mobileContent ul{font-size: 14px; margin: 5px 0px 0px 20px;}

.mobileContent li{margin: 0px 0px 0px 0px; line-height: 20px; line-height: 18px;}

.examples{width:300px; height: auto; clear: both; margin: 100px 0px 0px 0px;}
.examples ul{list-style: none; margin: 10px auto 10px auto; padding:  0px 0px 0px 0px; display: inline-block; float: left;}
.examples a{margin: 0px 0px 0px 0px; padding: 10px 0px 0px 10px; color: #E7EEF7;}
.examples li{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left;}
.examples li, #examples a{display: block; margin: 2px 0px 2px 0px; padding: 0px; }
.examples img{border: solid 2px #C1C1C1;}

#restaurant{width: 300px; margin: 0px auto 0px auto;}
#entertainment{width: 300px; margin: 0px auto 0px auto;}
#lodging{width: 300px; margin: 0px auto 0px auto;}

.beforeAfter{width: 300px; height: auto;}
.before{float: left; width: 90px; height: auto; padding: 0px 0px 0px 60px;}
.after{float: right; width: 85px; height: auto; padding: 0px 0px 0px 65px;}

.easyImages{width:600px; height: auto; margin: 30px 0px 0px 0px;}
.easyImages p{font-size: 13px; font-style: italic;}
.easyOne{width: 180px; min-height: 100px; background: url(images/mobile/easyone.png) center top no-repeat; float: left; padding: 270px 10px 0px 10px; text-align: center; }
.easyTwo{width: 180px; min-height: 100px; background: url(images/mobile/easytwo.png) center top no-repeat; float: left;  padding: 270px 10px 0px 10px; text-align: center;}
.easyThree{width: 180px; min-height: 100px; background: url(images/mobile/easythree.png) center top no-repeat; float: left;  padding: 270px 10px 0px 10px; text-align: center;}



.missingPage{min-height: 300px; width:900px; margin: 75px auto 0px auto; text-align: center;}
.missingPage h1{font-size: 50px;}

.missingPage h2{line-height: 30px;}

/* site map */
.sitemap{ margin: 30px 0px 0px 0px; color: gray; font-size: 13.5px; }
.column{float: left; min-width: 215px;}

.sitemap ul{ padding-left: 20px;}
.sitemap li{ margin: 2px 0px 2px 0px;}