@import url("resetAdvanced.css");

/* Primary Styles
Author: Bryce Looms

Background:
	Light Green Shade : #a3dad6 
	Light Green Highlight : #a3dad6
Links:
	Blue : #013455
	White : #fff
	Grey : #c6ced1
Nav:
	Current Light Green : #73aab4
	Dark Blue : #013455
*/
/*body, #wrapper {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}*/

html { height:100%; max-height:100%; overflow:auto; background:#a3dad6; }
html#portfolio { background:#fff; }
body { height:100%; max-height:100%; font:62.5% Helvetica, Arial, sans-serif; color:#013455; background:#a3dad6; }
a:link {}
a, a:active { color:#73aab4; }
a:visited { color:#73aab4; }
a:hover { color:#608f97; }
p { font-size:1.3em; }
h2 { font-size:1.6em; }
h3 { font-size:1.3em; }
h4 { font-size:1.3em; }
h5 { font-size:1.2em; }
h6 { font-size:1.2em; }

#wrapper { height:100%; max-height:100%; position:relative;
	min-width:960px;
	background:#a3dad6;
	background-image: -moz-linear-gradient(45deg, #a3dad6, #72aab4);
	background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #a3dad6), color-stop(1, #72aab4));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#a3dad6', endColorstr='#72aab4');
}
#portfolio #wrapper { background:#fff; filter:none; }

#nav { position:absolute; bottom:15px; left:15px; margin:0; list-style:none; z-index:9000; }
#nav li { font-size:2.0em; line-height:1; }
#nav li a { color:#013455; font-weight:bold; text-decoration:none; }
#nav li a:hover { color:#608f97; }
/* navigation current page */
#home .home, #about .about, #portfolio .portfolio, #contact .contact { color:#73aab4; }

#logo { position:absolute; top:15px; left:50%; margin-left:-445px; }

#main { position:relative; width:370px; min-height:300px; margin:0 auto; padding:75px 225px 0 365px; overflow:hidden; }
#main p { font-size:1.6em; line-height:1.163; border-top:1px solid #013455; padding:8px 2px; }
#main p.first { border-top:8px solid #013455; }
#main .small { font-size:1.2em; font-weight:bold; }
#main .small-bigger { font-size:1.5em; font-weight:bold; }
#main br { margin-bottom:0.2em; }

#main #myform ul { list-style:none; overflow:hidden; margin:0 0 5px; padding:10px 0 0; border-top:2px solid #013455; }
#main #myform li { margin-bottom:10px; font-size:108%; }
#main #myform .text, form textarea { width:100%; font-size:108%; padding:3px; margin:0; color:#013455; }
#main #myform textarea { height:156px; overflow:auto; }
#main #myform .formBtn { float:right; margin:0; }
#main #myform #sneaky { display:none; }
#main #myform #feedback { color:#013455; margin:0 0 5px; }
#main #myform #feedback p { margin:0; padding:0; font-size:1.3em; border:none; }

#main .person { width:115px; padding:4px 4px 0; float:left; color:#fff; }
#main .person p { border:none; font-size:1.2em; padding:0; }
#main .person h3 { font-size:1.2em; }
#main .person h4 { font-size:1.2em; }

#portfolio #main p { background:#FFF }

#aside { width:150px; color:#fff; position:absolute; left:50%; top:90px; margin-left:295px; }
#aside ul { margin-left:0; }
#aside li { list-style:none; padding:0 2px; }
#aside a { color:#fff; }
#aside h3 { font-size:1.2em; }
#aside h4 { font-size:1.2em; }
#aside h5 { font-size:1.2em; }
#aside p { font-size:1.2em; }
#portfolio #aside  { color:#013455;  }
#portfolio #aside a { color:#013455; text-decoration:none; }
#portfolio #aside a:hover { color:#9ca9af; text-decoration:underline; }
#portfolio #aside h3  { color:#013455; border-bottom:1px solid #013455; padding-bottom:3px; }
#portfolio #aside ul  { border-bottom:1px solid #013455; padding:3px 0 5px 0; background:#fff; }
#contact #aside li { margin-bottom:0.5em; padding-bottom:0.5em; border-bottom:1px solid #fff;  }

#gallery { width:620px; margin:0 auto; position:relative; }
#gallery ul { list-style:none; margin:0; }
#gallery li { margin:20px 0; }

#gallery.loaded { height:485px; position:absolute; top:60px; left:50%; margin-left:-355px; overflow:hidden; }
#gallery.loaded ul { position:relative; }
#gallery.loaded li { position:absolute; top:0; left:0; margin:0; }
#gallery.loaded li img { position:absolute; top:0; left:0; }
#gallery.loaded .title { display:none; }

#galBtns { position:absolute; top:550px; right:50%; margin-right:-274px; }
#galBtns span, #galBtns a { cursor:pointer; padding:0 5px; -moz-user-select:none; -webkit-user-select:none; user-select:none; background:#fff; }
#itemInfo { color:#999; font-size:1.0em; padding:6px 2px; position:relative; }
.infoHover { color:#333 !important; }


#footer { display:none; position:absolute; bottom:5px; right:5px; font-size:1.0em; color:#333; }

#hopper { display:block; position:absolute; width:115px; height:200px; bottom:0px; left:50%; margin-left:-220px; background:url(imgs/hopperHome.png) 0 0 no-repeat; }
#about #hopper { width:76px; height:119px; bottom:30px; left:50%; margin-left:270px; background-image:url(imgs/hopperSmallHop.png); }
#portfolio #hopper { width:76px; height:119px; bottom:96px; left:15px; margin-left:0; background-image:url(imgs/hopperSmall.png); }
#contact #hopper { width:76px; height:119px; top:-33px; left:50%; margin-left:-106px; background-image:url(imgs/hopperSmall.png); }

/* 
 * Non-semantic helper classes 
 */
.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; }
.hidden { display:none; visibility:hidden; } 
.visuallyhidden { position:absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/* 
 * print styles
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

@media all and (orientation:portrait) {}
@media all and (orientation:landscape) {}
/* Grade-A Mobile Browsers */
@media screen and (max-device-width: 480px) {
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
}