/* CSS Document */

/*

*~*~*~*~*Main*~*~*~*~*

*/

body {background-color: #f17db1; color: #666; font-family: Verdana, Geneva, sans-serif; font-size: 16px; line-height:20px; line-height:background-image: url(../_images/gradient.png); background-repeat: repeat-x; background-attachment: fixed; background-position: bottom;}

p {padding-bottom:0.5em;}

a:link , a:visited{color: #F17DB1; text-decoration: none;}

a:hover, a:active {color: #ea5994; text-decoration: none;}

#wrapper {height: auto; width: 896px; margin-top: 32px; margin-right: auto; margin-bottom: 0px; margin-left: auto;}

#header {background-color:#FFF; padding-top: 32px; padding-left: 32px; padding-bottom: 32px;}

#main {background-color:#FFF; padding-bottom: 32px;}

#footer {color: #FFF; padding-top: 5px; font-size: 10px;}

.clear-both {clear:both;}

.button {background:#F17DB1; padding:0.5em 1em; font-size:16px;}

.button:hover, .button:active {background:#ea5994;}

.float-left {float:left; display:inline;}

.float-right {float:right; display:inline;}

hr {border:1px solid #ccc; margin:0 8% 10% 8%;}


/*

*~*~*~*~*Navigation*~*~*~*~*

*/

#nav {height: 56px; width: 832px; padding-top: 18px; padding-bottom: 14px;}

ul.menu {list-style: none; padding: 0px;}

.displace {position: relative; left: -5000px;}

ul.menu li {float: left;}

ul.menu li a {display: block; width: 208px; height: 56px; background: url(../_images/navBar.png);}

/* Normal Links */
ul.menu li.home a {background-position: 0 0;}

ul.menu li.about a {background-position: -208px 0;}

ul.menu li.portfolio a {background-position: -416px 0;}

ul.menu li.contact a {background-position: -624px 0;}

/* Hover Links */
ul.menu li.home a:hover {background-position: 0 -112px;}

ul.menu li.about a:hover {background-position: -208px -112px;}

ul.menu li.portfolio a:hover {background-position: -416px -112px;}

ul.menu li.contact a:hover {background-position: -624px -112px;}


/* Selected/Active Links */

ul.menu li.home a.selected {background-position: 0 -56px;}

ul.menu li.about a.selected {background-position: -208px -56px;}

ul.menu li.portfolio a.selected {background-position: -416px -56px;}

ul.menu li.contact a.selected {background-position: -624px -56px;}



/*
*~*~*~*~*~* Home*~*~*~*~*~*
*/

#aboutShoutout {margin-top: 57px; margin-left: 79px; float: left; width: 338px; height: 120px;}

a.aboutRollover {display: block; width: 338px; height: 120px; text-decoration: none; background: url(../_images/aboutBoxRollover.png);}

a.aboutRollover:hover {background-position: -338px 0;}

#contactShoutout {margin-top: 57px; margin-right: 79px; float: right;}

a.contactRollover {display: block; width: 338px; height: 120px; text-decoration: none; background-image: url(../_images/contactBoxRollover.png);}

a.contactRollover:hover {background-position: -338px 0;}

.displace {position: absolute; left: -1000px;}



/*
*~*~*~*~*~* About *~*~*~*~*~*
*/

ul.aboutMenu {float: left; list-style-type: none;}

ul.aboutMenu li a {display: block; font-size: 18px; line-height: 2; font-weight: bold;}

#aboutText {float: right; width: 625px; margin-right: 32px;}

#resume {float: right; width: 625px; margin-right: 32px;}

.AccordionPanelContent h1 {font-size: 18px; font-weight: bold; color: #666;}

.AccordionPanelContent h2 {font-size: 17px; font-weight: normal;}

.AccordionPanelContent h3 {font-size: 15px; font-weight: normal;}

.AccordionPanelContent p1 {font-size: 14px; color: #F17DB1;font-weight: normal;}

#resume a {font-size: 15px; font-weight: bold;}




/*
*~*~*~*~*~* Portfolio *~*~*~*~*~*
*/

.description {margin: 0 2% 32px 32px; float: left; width:50%;}

#description {padding: 0 2% 32px 32px; float:left;}

#img {width: 340px; float: right; display: inline; padding-bottom: 32px; position: relative; right: 32px;}

.main-img {float:right; width:40%; padding: 0 32px 32px 0;}


.portfolioTable {width: 832px; margin-left: 32px; font-family: Verdana, Geneva, sans-serif; font-size: 15px; clear: both;}

.photographyTable {width: 832px; margin-left: 32px; padding-top: 10px; font-family: Verdana, Geneva, sans-serif; font-size: 18px; clear: both;}

#photoGroup {width: 832px; padding-bottom: 24px;}

#portfolioNav {width: 832; padding-left: 32px; padding-right: 32px;}

#disclaimer {padding-top: 10px; font-size: 9px; text-align: center;}

.portfolioProject {float: left; width: 22%; padding: 1em 1.5%;}

.portfolioProject.first {clear:both;}

.portfolioProject img {max-width:100%;}

.portfolioProject p {text-align: center;}

.catalog-mobile {display:none;}



/*

*~*~*~*~*~* Contact *~*~*~*~*~*

*/

.info {width: 400px; float: left; display: inline; margin-bottom: 32px; margin-left: 32px; position: relative; background-color:#FFF; font-size: 17px;}

.forum {width: 416px; float: right; display: inline; position: relative; background-color:#FFF;}

.clear {clear: both;}

.button {color: #FFF;background-image: url(../contact/_images/buttonGradient.png);border:1px solid #ef6fa5;border-radius:4px;}

h2.contact-head {font-size: 1.5rem;line-height: 1.75rem;}

.icon {padding-right: 20px;}

.thankyou {margin-left: 32px; width: 832px;}



/*

*~*~*~*~*~* Mobile *~*~*~*~*~*

*/

@media only screen and (max-width: 830px) {
  #wrapper {width:100%;}
	#header {padding:2em;}
	#header img {max-width:100%; height:auto;}
	#nav {width:100%; height:auto}
	ul.menu {font-size:2em; text-align:center; display:inline-block; width:100%;}
	ul.menu li {background-color:#F17DB1; border: 1px solid #fff; float:none;}
	ul.menu li:hover, ul.menu li:active {background:#ea5994;}
	ul.menu li a {width: 100%; height: auto; color: #fff; vertical-align: middle; background:none; padding: 0.5em 0;}
	.displace {left:0; position:relative;}
	.portfolioTable {width:100%;}
	.portfolioTable {width:100%; margin:0;}
	.portfolioProject {width:90%; padding:2em 5%; text-align:center; font-size:1.6em}
	ul.aboutMenu {float:none; display:inline-block;}
	#aboutText {float:none; width:90%; margin:0 5%}
	.catalog-screen {display:none;}
	.catalog-mobile {display:block;}
  .description {width:85%;}
  h3 {font-size:2em; text-align: center;}
  .main-img {float:none; padding: 0 32px 32px 32px; width:88%; text-align:center;}

}