/* //////// LAYOUT ////////// */

html, body {
height:100%; min-height: 100vh; position:relative; margin: 0; padding: 0;
}
body {font-family:Arial, Helvetica, sans-serif;
background-image:url('../img/body_bgTop.gif'); background-repeat:repeat-x; background-position:top left; background-color: #c7d4dd;
}

#page-container {padding:0 0 210px 0; margin:0; width:100%; height:100%; position:relative; display:table; border:0pt solid green;}
#wrapper {
width:90%; min-height:100%; min-height: 100vh; display:block; max-width:1140px; min-width:769px; margin: 0 auto; background-color: #e6edf0;
}

.pageShadow {
-webkit-box-shadow: 0 0 14px 6px rgba(27,56,79,0.3);
-moz-box-shadow: 0 0 14px 6px rgba(27,56,79,0.3);
box-shadow: 0 0 14px 6px rgba(27,56,79,0.3);
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#wrapper {width:100%; max-width:1024px; min-width:768px; margin: 0 auto;}
} /* mediaquery */

header, #aside-area, footer {
width: 100%; position:relative; border:0;
}
nav {
background: none;
}
#main {
width:96%; text-align:left; margin-bottom:0; display:table; padding:0 2% 50px; margin:0; 
}
.main-content {
width:66%; margin:14px 0 0 0; text-align:left; padding:0 2%; float:left; border:0px solid green;
}
.contentFullWidth {
width:96%; margin:14px 0 0 0; text-align:left; padding:0 2% 0;
}
#main.usefulLinks {width:96%; padding:0 2%;}
aside#sidebar {
float:right; border:0pt solid green; margin:40px 2% 30px 0; text-align:left; padding:0 1.5%; width:24%; clear:none; position:absolute; top:0; right:2%; /* 231px  /  960px */
}
aside#sideNotes {
float:right; border:0pt solid green; margin:78px 0 30px 0; text-align:left; padding:0; width:25%; clear:none; display:table; /* 231px  /  960px */
}
aside.sideNotesPort {
float:right; border:0pt solid green; margin:20px 0 30px 0; text-align:left; padding:0; width:25%; clear:none; /* 231px  /  960px */
}
#sideText {padding:0; margin:0; border:0;}


aside#linkPanel {
background-color: #c9d6df; font-size: 90%; padding:2%; margin:0; clear:both;
}
footer {
margin:0; padding:0; clear:both; background: #38596f; min-height:40px; border-top:0pt solid #af4553;
}
small {
width: 100%; text-align:center; clear: both; margin:0; padding:0; line-height: 30px;
}
.lineBreak {
display:none;	
}
.footer-container {min-width:720px; width:100%; position:absolute; bottom:0;}
 


/** 3. HEADER */

header {margin: 0; padding:0; min-height:374px; height:auto; border-bottom:0pt solid #af4553; background-color: #22537c; width:auto;
background: url('../img/banner_visual.jpg') no-repeat 0 0;
background-size: auto;}
header#portfolioBanner {margin: 0; padding:0; border-bottom:0pt solid #af4553; background-color: #22537c; width:auto;
background: url('../img/banner-portfolio.jpg') no-repeat 0 0;
background-size: auto;}
header#portfolioBanner h1{line-height: 2em; width:100%; text-align:center; color:#023056; font-size:1.8em; position:absolute; bottom: 135px; letter-spacing:0.8em; display:block;
animation-duration: 5s;
animation-name: fadeAndScale;
animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}
header#portfolioBanner h1 span {padding-bottom:4px; font-size: 1.8em; font-weight:500;}
@keyframes fadeAndScale {
    from {
        opacity: 0;
        transform: scale(.9, .9);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
    }
}
.menuButton {
position:absolute; 
left:0px; 
top:-250px; 
width:1px; 
height:1px; 
overflow:hidden;
   }
header img  {
position:relative; top:4px; left:24px; float:left; margin:15px 0 0 0; width:300px;
}
header section#strapline  {
padding:0 ; margin:0; height:90px; position:absolute; top:25px; right:0; margin-left:-50%; width:auto;}


header section#strapline h2 {
font-style:normal; border:0; margin:0; padding:2px 0 0 0; color:#92aecd; font-size:120%; height: 4.6em; vertical-align:center; line-height:1.25em; text-align:left; position:relative; right:0; display:inline-block;
}
header section#strapline h2 span {
text-align:right; width:auto; float:right; margin-left:440px; margin-right:240px; font-size:130%; line-height:1.2em;}


#strapline h2 ul {
list-style-type: none; border-left:1pt solid #a6b9cd; margin:0; padding-left:10px; color:#326dac; display:inline-block; width:220px; height:90px; text-align: right; font-size:120%; position:absolute; top:0; right:0; 
}
#strapline h2 ul li {
line-height:1.25em; background-repeat: no-repeat; text-indent: 30px; white-space:nowrap; text-align:left; font-style:normal; margin:0; padding:2px 0 0 0; font-style:italic; display:block;}
#strapline h2 ul li#print {
background-image: url('../img/printer-icon.png'); background-position: 0px 5px;
}
#strapline h2 ul li#computer {
background-image: url('../img/computer-icon.png'); background-position: 0px 5px;
}
#strapline h2 ul li#mobile {
background-image: url('../img/mobile-icon.png'); background-position: 0px 5px;
}
.whatsNew figure.homeNewCaption {padding:10px 0; display:inline-block; width:100%;}



/** 4. NAV LIST //////////////////////////////////////**/
aside#mainNav {
border:0pt solid green; position:absolute; top:324px; left:50%; margin:0 auto; margin-left:-50%; background: none; height: 42px; padding:4px 0 0 0; text-align:center; width:100%;} 
aside#mainNav.shallowNav {
border:0pt solid green; position:absolute; top:148px; left:50%; margin:0 auto; margin-left:-50%; background: none; height: 30px; padding:2px 0 0 0; text-align:center; width:100%;
}
aside#mainNav nav.menu {
font-size: 125%; font-weight:500; letter-spacing:0.05em; border:none; padding:0; width:100%; height:30px; border:0pt solid yellow; padding-bottom:5px; line-height:1.6em;
}

aside#mainNav nav.menu ul {
list-style: none; width:100%; padding:4px 0 3px 4px; text-align:center; display:inline-block; max-width:768px; white-space:nowrap;
}
aside#mainNav nav.menu li {
padding: 0px 12px 9px 10px; display:inline; color:#fff4c7;
float: none; margin: 0; border:0; border-right:1pt solid #af4553;
background-color:#233a4a; width:auto;
background: none;
	/* for IE 8*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#38596f', endColorStr='#233a4a');
/* for IE 5.5-7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#38596f', endColorStr='#233a4a');
	padding: 8px 16px 8px 8px;
}
aside#mainNav nav.menu ul li.topLink, aside#mainNav nav.menu ul li.botLink {
-webkit-border-radius:0; 
border-radius:0;	
}
aside#mainNav nav.menu ul li.noBorder {
border:0;	
}
aside#mainNav nav.menu a:hover
{color:#eab705; text-decoration: none; background:  url('../img/nav_upArrow1.png') no-repeat 48% 29px; padding-bottom: 17px; border:0;}
aside#mainNav nav.menu a.thisPage
{border-bottom:0pt solid #e2eaee; background:  url('../img/nav_upArrow2.png') no-repeat 48% 46px; padding-bottom: 18px;}

@-moz-document url-prefix() { 
aside#mainNav nav.menu a:hover
{background:  url('../img/nav_upArrow1.png') no-repeat 48% 30px;}
aside#mainNav nav.menu a.thisPage
{background:  url('../img/nav_upArrow2.png') no-repeat 48% 47px;}




/** 5. CONTENT **/
.main-content h1 {
margin:20px 0 6px 0; font-size:225%; font-style:normal; letter-spacing:.02em;
}
#main .portfolio h1 {
font-size: 320%;
}
.main-content h2, #h2 {
font-size: 180%; padding:0; margin: 0 0 15px 0; letter-spacing:.04em; color:#023056;
}
#terms {margin-bottom:40px;}
#terms p, #terms li {font-size:90%; line-height:1.2em; padding:0;}
#steveholmes {min-width:100px; margin:15px 15px 0 0;}
#aboutPhoto {max-width:100px; margin:0 2% 0 0;}
#introPic {width:100px; margin:12px 3% 0 2px;
border:3pt solid #fff;  
-webkit-border-radius: 10px;  
-moz-border-radius: 10px;  
border-radius: 10px;
}

.whatsNew h2.whatsNewHead {line-height:1.8em; padding-bottom:10px;}

/* QUOTE PANELS */
#quoteContainer {width:100%; margin:0 auto 40px; padding-top:20px; border-top:2pt dotted #8aa3b5; border:1px solid red;}
#testimonial {padding-bottom:30px; margin-bottom:10px; display:table;}
#testimonial article.quote-left, #testimonial article.quote-right {position:relative; display:table-cell;}
#testimonial article#q1 {width:48%; margin-right:0; margin-bottom:40px;}
#testimonial article#q2 {width:48%; margin-left:0;}
#testimonial #qGap {width:4%; margin-left:0; display:table-cell;}
/* end of QUOTE PANELS */

section.whatsNew {
margin:0 0 30px 0; display:block; width:100;
}
.latestWork {
margin:0 1%; padding:0 0; border:0; padding-left:4px;
}
.designInfo {
margin:20px 0 30px 0; padding:2% 2% 2% 1%; clear:both; border: 2pt solid #236d86;
}
.designFeature {
width:45%; margin:0 2% 0 1%; padding:0 1% 0 0; float:left; border:none;
}
.designFact {
width:45%; margin:0; padding:0 0 0 3%; float:left; border-left:2pt dotted #c9d6df;
}
#biog {margin:20px 0 40px 0;}
#biog p.biogPara {line-height:1.5em; font-size:105%;}
#biog h2 {line-height:1.6em;}

.whatsNew article#caseStudy p {margin:5px 0 0 0; padding:0;}
.whatsNew article#caseStudy {font-size:90%; margin:0;}
.whatsNew article#caseStudy h3 {margin:15px 0 6px 0; font-size:140%;}

.phoneButton {
 padding: 12px 8px 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   margin: 30px 0 20px;
   line-height:1.3em;
   font-size:125%;
   }
.phoneButton h3 {color:#233a4a;}
.phoneRightFloat {float:right; width:60%;}



/* 6. ASIDE - SIDEBAR //////////////////////////////////////**/
aside#sidebar {
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 0px 10px 10px 10px; 
border-radius: 0px 10px 10px 10px;
margin:0;
}


}
aside#sidebar h5 span#free {
border:0pt solid green; font-size:200%; font-style:normal; letter-spacing:.07em; color:#FFF; font-weight:bold; padding:0; line-height:1em; float:left; margin:0 0 5px 0; text-align:center; width:100%; font-family:SteelfishRegular, Arial, Helvetica, sans-serif;
}
aside#sidebar #webPanel {
margin: 15px 0 18px 0;
}

section#designservice {margin:0 0 10px 0;
}
#printPanel p span, #webPanel p span {
color: #af4553;	font-size: .8em;
}
aside#sideNotes p, aside#sideNotes h3 {padding:0;}





/* 7. ASIDE - LOWER //////////////////////////////////////**/
#pageTop {
display:none;
}
aside#linkPanel {
clear:both; position:relative; left:50%; padding:0; margin:0; margin-left:-50%; width:100%; border-top:0; border-top:2pt dotted #023056; height:120px;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#e2eaee');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#e2eaee')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-color:#e2eaee;
background-image: -moz-linear-gradient(top, #ffffff, #e2eaee);
background-image: -ms-linear-gradient(top, #ffffff, #e2eaee);
background-image: -o-linear-gradient(top, #ffffff, #e2eaee);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#e2eaee));
background-image: -webkit-linear-gradient(top, #ffffff, #e2eaee);
background-image: linear-gradient(top, #ffffff, #e2eaee);

/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/
}
aside#linkPanel section {
padding:20px 0 20px 0px; margin:0 auto; width:98%; height:122px; max-width: 768px;
}



nav#aside-navLeft, nav#aside-navMid, nav#aside-navRight {
padding: 10px 0 4px 0; float:left; margin:0 2%; border:0;
}
nav#aside-navLeft {
text-align:right; width:38%; padding-right:20px; line-height:20px;
}
nav#aside-navMid {
width:20%;text-align:center; border-left: 1pt solid #92aecd; border-right: 1pt solid #92aecd; line-height:20px;
}
nav#aside-navRight {
width:34%; text-align:left; padding-left:20px;
}
nav#aside-navRight li {
margin-left:0;
padding: 0; border:0; line-height:30px; text-indent:25px;
}
nav#aside-navRight li#facebook {
background:  url('../img/facebook.png') no-repeat 0px 5px;
}
nav#aside-navRight li#linkedin {
background:  url('../img/linkedin.png') no-repeat 0px 5px;
}
#squirrel {height:48px; width:100%; background-color:transparent; border:0;
background-image:url('../img/squirrel.png'); background-repeat:no-repeat; background-position: 66% 30%; margin:0; padding:0; position:relative;
}
#grass {height:14px; width:100%; background-color:transparent; border:0;
background-image:url('../img/grass.png'); background-repeat:repeat-x; background-position: 100% 100%; margin:0; padding:0; position:absolute; bottom:0;
}

/* 8. FOOTER //////////////////////////////////////**/

footer {
clear:both; border:0; margin:0; padding:0;
}

/*  ///////////////////////////////////  */