0/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,
video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}

/* GLOBAL - body background #1E4C63 */
html{font-family:"Times New Roman", Times, serif; -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;height:100%;}
body {background:#1E4C63;font-weight:400;color:#333;width:100%;height:100%;*zoom:1;margin:0;}
body:after{clear:both}
/* NOTE star hack targets IE6 and 7 and the underscore hack targets IE6 */

/* GENERAL - spacers, rules, links, colours ****************************************************************************************/
/* Headings */
h1{font-size:50px}
h1,h2,h3,h4,h5{font-family:"Times New Roman", Times, serif}
p{font-size:16px;line-height:22px;font-weight:400}
h2 {font-size:2em;line-height:0em;color:#333;font-weight:normal;font-style:italic;letter-spacing:0.05em;margin:0 0 0 0;padding:0.2em 0 0.7em 0;width:80%;border-bottom:1px dotted #ccc;}
h3{font-size:1.7em;color:#333;font-weight:normal;text-transform:none;letter-spacing:0.03em;border-bottom:1px dotted #ccc;padding-bottom:4px;margin-bottom: 0;}
h4{width:90%;font-size:1.3em;color:#333;text-transform:none;letter-spacing:0.03em;font-weight:normal;font-style:italic;
border-bottom:1px dotted #ccc;padding-bottom:2px;margin:2em 0 0 0;}
/* Spacers */
.rule{width: 90%;border-bottom: 1px solid #ccc; margin:25px 0 0 0;}
.ruleTwo {width: 90%;border-bottom: 1px dotted #ccc; margin:10px 0 0 0;}
.ruleFour {width: 90%;border-bottom: 1px dotted #ccc; margin:0px 0 10px 0;}
.ruleThree {width: 97%;border:1px solid #efefef; margin:0px 0 0 0;}
.dotRule {width: 97%;border-top: 1px dotted #ccc; padding:0 0 0 0;}
.spaceFour {width: 90%;border-bottom: 0px dotted #ccc; padding:0 0 1em 0;margin:0px 0 0 0;}
/* Colours */
.orangered{color:#C39}
.turquoise{color:#399}
.red{color:#F33;}
/* default links was cc66cc */
a:link{color:#cc66cc; text-decoration:underline;}
a:focus{color:#666; text-decoration:none;}
a:active,a:hover{color:#ccc; text-decoration:underline;}
a:visited {color:#666; text-decoration:underline;}
/* Grey default links */
.grey a:link{color:#333; text-decoration:underline;}
.grey a:focus{color:#333; text-decoration:none;}
.grey a:hover{color:#ccc; text-decoration:underline;}
.grey a:visited {color:#333; text-decoration:underline;}
/* jump to top styles */
.topwrap{float:left;text-align:center;width:97%;margin:0px 0 0px 0;padding:0 0em 0 0em;border:0px solid #960;background:#fff}
.top {font-size:1.2em;font-weight:normal;text-transform:none;margin:0 0 0 0;border:0px solid #333;padding:0;background:#fff;}
.top a:link {color:#333;text-decoration:underline;}
.top a:visited {color:#333;text-decoration:underline;}
.top a:active{color:#666;text-decoration:underline}
.top a:hover {color:#cc66cc;text-decoration:underline}
.top a:focus {color:#333;text-decoration:underline}
.backToTop {border:0px solid #ccc;}

.jumptopage {font-size:1.3em;font-weight:bold;ttext-transform:uppercase;}

/* General */
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}
pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}
table{border-collapse:collapse;border-spacing:0}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
h6{font-size:14px;font-weight:600}
img{max-width:100%;height:auto}
aside{display:inline;float:left;width:22.916666666666664%;margin:0 1.0416666666666665%}
/* border styles */
.surround, .picframe {border:1px solid #e6e6e6;padding:0;margin:0}
.surroundwhite, .picframewhite {border:1px solid #fff;padding:0;margin:0}
.shadow{border-right:1px solid #e6e6e6;border-left:1px solid #e6e6e6;border-top:1px solid #e6e6e6;border-bottom:none;padding:0;margin:0}
.shadowwhite {border-right:0px solid #e6e6e6;border-left:0px solid #e6e6e6;border-top:0px solid #e6e6e6;border-bottom:none;
padding:0;margin:0}
.shadowall {border:1px solid #e6e6e6;padding:0;margin:0}
/* end GENERAL *******************************************************************************************************/

/* PAGE CONTAINER *********************************************************************/
/* wrapper holds outer page */
.wrapper{min-height:100%;height: 100%;height: auto !important;margin: 0 auto -3em auto;max-width:940px;
padding:10px 0px 0 0px; background:#ffffff;border:4px solid #fff;
/* the bottom margin is the negative value of the footer's height */}

/* PAGE CONTAINERS WITH IMAGES *****************/
.container {width:90%;margin:0px auto;padding:0;border:0px solid #ccc;background:#fff;}
.containerOne {width:90%;margin:0px auto;padding:0;border:0px solid #ccc;
background:#fff url(../images/head/jg_figure_1.gif) no-repeat top right;}
.containerTwo {width:90%;margin:0px auto;padding:0;border:0px solid #ccc;
background:#fff url(../images/head/jg_figure_2.gif) no-repeat top right;}
.containerThree {width:90%;margin:0px auto;padding:0;border:0px solid #ccc;
background:#fff url(../images/head/jg_figure_3.gif) no-repeat top right;}
.containerFour {width:90%;margin:0px auto;padding:0;border:0px solid #ccc;
background:#fff url(../images/head/jg_figure_4.gif) no-repeat top right;}
.containerFive {width:90%;margin:0px auto;padding:0;border:0px solid #ccc;
background:#fff url(../images/head/jg_figure_5.gif) no-repeat top right;}
.containerSix {width:90%;margin:0px auto;padding:0;border:0px solid #ccc;
background:#fff url(../images/head/jg_figure_6.gif) no-repeat top right;}

/* ARTICLE and mainContentWrap holds main content ********************************************************/
article{text-align:left;float:left;width:100%;margin:0;padding:0;border:0px solid #ff3366;background:#ffffff}
.mainContentWrap {width:90%;margin:0 auto;padding:0;border:1px solid #ffffff;}

/* HEADER AND LOGO **************************************************************************************************/ 
header{display:inline;float:left;width:100%;margin:2% 0 3% 0;padding:0% 0 0% 0;text-align:left;border:0px solid #000;}
img.brand{position:relative;left:0px;border:0px solid #C36;margin:0;padding:0;}
.semantic{display:none;border:0px solid #C36;}

/* NAVIGATION - GLOBAL **************************************************************************************************/ 
nav{text-align:left;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; margin:0.5% 0 0 0;padding:14px 0 14px 0;
border-top:1px dotted #efefef;border-bottom:2px dotted #efefef;}
nav ul{margin:0;padding:0;list-style:none}
nav ul li{display:inline;font-weight:bold;text-transform:uppercase; font-size:1.1em;letter-spacing:0.05em;color:#333;margin:0 1% 0 1%}

/* GLOBAL */
.navsections{padding:0;color:#333;text-decoration:none;padding-bottom:0;}
.navsections ul{margin:0 0 0 0; list-style:none}
.navsections ul li{display:inline;font-weight:bold;text-transform:uppercase; font-size:1.05em;letter-spacing:0.04em;color:#383838;margin:0 1.5% 0 0%}
.navsections ul li a {color:#333;text-decoration:none;border-bottom:0px dotted #cc66cc;padding-bottom:0;}
.navsections ul li a:hover {color:#cc66cc;border-bottom:1px dotted #cc66cc;padding-bottom:0;}
.navsections ul li a.sectionhere {color:#cc66cc;text-decoration:none;border-bottom:1px dotted #cc66cc;padding-bottom:0;}
/* NAVIGATION - PROJECT */
.backnext{margin:0.5% 0 0 0;border-top:1px solid #efefef;border-bottom:1px solid #efefef;padding:14px 0 14px 0}
.backnext ul{margin:0;padding:0;list-style:none}
.backnext ul li{display:inline;font-weight:normal;text-transform:none; font-size:1.1em;letter-spacing:0.05em;color:#383838;margin:0 1%}
.backnext ul li a {color:#333;text-decoration:none}
.backnext ul li a:hover {color:#cc66cc;border-bottom:1px dotted #cc66cc;padding-bottom:0;}
/* NAVIGATION Browse galleries categories *********************************************/
.categorywrap {float:left;width:97%;border:0px solid #ebecf6;padding:0;margin:0 0 0 0;background:#ffffff;}
.categories{text-align:left;margin:1.5% 0 2% 0%;border-top:0px solid #efefef;border-bottom:0px dotted #efefef;padding:0 0 0% 0;}
.categories ul{margin:0;padding:0;list-style:none}
.categories ul li{display:inline;font-weight:normal;font-size:1.2em;letter-spacing:0.05em;color:#333;margin:0 0.2em 0 0;border:0px solid #ccc;}
.categories ul li a {color:#333;text-decoration:none}
.categories ul li a:hover {color:#cc66cc;text-decoration:none;border-bottom:1px dotted #cc66cc;padding-bottom:0;}
.categories ul li a.current {color:#cc66cc;text-decoration:none;text-transform:none;border-bottom:1px dotted #cc66cc;padding-bottom:0;}

/* HOME PAGE styles *********************************************************************/
.homefull {text-align:left;width:100%;margin:0 auto;border:0px solid #000;padding:0 0 0 0}
.welcomecaption {text-align:center;width:97%;font-size:100%; padding-bottom:25px;margin:0;color:#333;border-bottom:0px solid #efefef;background:#fff}
.welcomecaption h3{padding:0 0 0 0;margin:1% 0 0 0}
.welcomecaption p {text-align:center;width:97%;letter-spacing: 0.5px;font-size:1.2em;line-height:1.4em;font-style:italic;padding:0 0 0 0;margin:0; color:#333}
.welcomecaption a {color:#333; text-decoration:underline;}
.welcomecaption a:hover {color:#666; text-decoration:none;}

/* CARD styles - 2 column  *********************************************************************/
.cardWrap {text-align:center;width:100%;margin:1em 0 0 0; padding:0;border:0px solid #C30;clear:both;}
.card {float:left;text-align:left;width:46%;margin:0 3.5% 3.5% 0;border:1px solid #cccccc;background:#ffffff;padding:0 0 2% 0;}
.cardCol {background:#ffffff;}
.card img {border-bottom:1px solid #efefef;padding:0;}
.cardCaption h4 {text-align:left;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-weight:bold;font-style:normal;
text-transform:uppercase; font-size:1.1em;letter-spacing:0.04em;color:#383838;margin: 4% 5% 3% 7%; padding:0 0 0.3em 0;}
.cardCaption p {text-align:left;margin: 3% 6% 0% 7%;font-size: 1.1em; font-style:normal;line-height: 1.3em;}
.cardLnk p{text-align:left;margin: 8% 6% 0 7%;padding:2% 0 0 0%;font-size: 1.1em;font-style:normal;border-top: 1px dotted #cccccc;}
.cardTime p {text-align:left;margin: 1% 6% 0% 7%;font-size: 1em; font-style:italic;line-height: 1em;}
.mauve{color:#cc66cc;}

/* CARD styles - full width *********************************************************************/
.cardOneWrap {text-align:center;width:100%;margin:2% 0 0 0; padding:0;border:0px solid #C30;clear:both;}
.cardOne {float:left;text-align:center;width:100%;margin:0 0% 4% 0;border:1px solid #e5e5e5;
background:#ffffff;padding:0 0 0 0;box-shadow: 0 4px 2px 0 #efefef;
-webkit-box-shadow: 0px 4px 2px 0px #efefef;
-moz-box-shadow: 0px 4px 2px 0px #efefef;
}


.cardOneLeft {float:left;text-align:center;width:50%;margin:0 2% 0% 0;border:0px solid #cccccc;background:#ffffff;padding:0 0 0% 0;}
.cardOneRight {float:left;text-align:center;width:45%;margin:2% 2% 0% 0;border:0px solid #cccccc;background:#ffffff;padding:0 0 0% 0;}
.cardCol {background:#ffffff;}
.cardOne img {padding:0;margin:0;border-right: 0px solid #efefef;}
.cardOne h4 {text-align:left;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-weight:bold;font-style:normal;
text-transform:uppercase; font-size:1.1em;letter-spacing:0.04em;color:#383838;margin: 2% 0% 3% 7%; padding:0 0 0.3em 0;}
.cardOneCaption p {text-align:left;margin: 3% 5% 4% 7%;font-size: 1.1em; font-style:normal;line-height: 1.3em;}
.cardOneTime p {text-align:left;margin: 1% 6% 0% 7%;font-size: 1.1em; line-height: 1.3em;font-style:italic;}
.cardOneLnk p {text-align:left;margin:10% 5% 0% 7%;padding:4% 0 0 0;font-size: 1.1em;font-style:normal;line-height:0em;border-top: 1px dotted #cccccc;}

/* Quote box styles */
.card  {width: 100%;padding: 0 0 0 0;margin: 0 0 1.5em 0;border: 0px solid #dddddd;background-color: #ffffff;}
.card-content {margin: 1.8em 2em 1em 2em;padding:0 0 0 0;border: 0px solid #dddddd;}
.card-content p {font-size: 1.1em;font-style:italic;}
.card-title {}
.white-text {background-color: #f2f2f2;}
.blue-grey {background-color: #f6f6f6;}
.card-author {margin: 0 2em 1.5em 2em;padding:0 0 0 0;border: 0px solid #ccc;	}
.card-author p {font-size: 1.1em;font-style:normal;}
.card-action {font-size: 1.1em;margin: 0  1.5em 1.5em 1.5em;border: 0px solid #ccc;}		
.card-source {width:95%;margin: 0 2em 1.2em 2em;padding:0 0 0 0;font-size:90%;}
.card-source p {color:#666;font-style:italic;border-top:1px dotted #ccc;margin:0;padding-top:0.2em;}



/* INTRODUCTION, ABOUT, LINKS, GALLERIES INTRO, LINKS, CONTACT 2 col pages **************************************************************************************************/ 
.about {float:right;text-align:left;width:65%;padding:0 0 0 0;margin:0 0 2% 0;color:#333; border:0px solid #cccc66;}
.about p {width:90%;font-size: 1.08em; line-height: 1.30em; letter-spacing:0.2px;}
.about h2 {width:90%;font-size:2em;color:#333;font-weight:normal;font-style:italic;letter-spacing:0.05em;margin:0;padding:0.4em 0 0.6em 0;border-bottom:1px dotted #ccc;}
.about h3 {font-family:"Times New Roman", Times, serif;font-style:italic; margin: 0 0 0px 0; padding:0 0 3px 0; border-bottom:1px dotted #ccc}
.about ul{ margin:0;padding:0;list-style:none;}
.about ul li {margin:0 0 0 0;background-image: url(d.gif);}
.about ul li a {color:#333;font-size:1.1em;line-height:1.6em;margin:0 0 0 0;background-image: url(d.gif);}
.about ul li a:hover {color:#ccc;border-bottom:0px dotted #cc66cc;padding-bottom:0;}

.links{float:right;text-align:left;width:60%;padding:0 0 0 0;margin:0 0 2% 0;color:#333; border:0px solid #cccc66;}
.links p {width:90%;font-size: 1.1em; line-height: 1.35em; letter-spacing:0.2px;}
.links h2 {width:90%;font-size:2em;color:#333;font-weight:normal;font-style:italic;letter-spacing:0.05em;margin:0;padding:0.4em 0 0.6em 0;border-bottom:1px dotted #ccc;}
.links h3 {font-family:"Times New Roman", Times, serif;font-style:italic; margin: 0 0 0px 0; padding:0 0 3px 0; border-bottom:1px dotted #ccc}
.links ul{margin:0;padding:0;list-style:none;}
.links ul li {margin:0 0 0 0;background-image: url(d.gif);}
.links ul li a {color:#333;font-size:1.1em;line-height:1.6em;margin:0 0 0 0;background-image: url(d.gif);}
.links ul li a:hover {color:#ccc;border-bottom:0px dotted #cc66cc;padding-bottom:0;}
.links a {color:#333;margin:0 0 0 0;}
.links a:hover {color:#ccc;border-bottom:0px dotted #cc66cc;padding-bottom:0;}

.workSummary ul {margin:0;padding:0;list-style: circle;font-size: 1.2em; line-height: 1.6em;}
.workSummary ul li {display:block;margin:0 1% 0 0%}
.pictureColumnWrap {float:left;width:30%;text-align:left;border:0px solid #F3F;margin:0 0 3% 0;padding:0;}
.picCol{border:0px solid #C30;background:#fff;padding:0 0 0 0;margin:0;}
.picCol p {padding:0 0 0 0; font-size:1.1em; font-style:italic;line-height:1.5em;}
.spacerOne {float:left;width:97%;padding-top: 5%;}
.spacerTen {float:left;width:97%;padding-top: 10%;}
.spacerAbout {float:left;width:97%;padding-top:0em;margin-top:0.3em;padding-bottom:1em;border-top: 1px dotted #ccc;}
.spacerProject {float:left;width:97%;padding-top:0em;margin-top:4em;padding-bottom:0.5em;border-top: 1px dotted #ccc;}
.spacerQuote {float:left;width:97%;padding-top:0em;margin-top:1em;padding-bottom:0.5em;border-top: 0px dotted #ccc;}

/* THUMBNAILS - GALLERY OVERVEW THUMBNAIL IMAGE pages ***********************************************************************************************/
.workSummary {text-align:left;padding:0 0 0 0;border:0px solid #cc6600;margin:0.5em 0 1.5em 0;padding:0 0 0 0;background-color: #fff}
.workSummary p {width:90%;font-size: 1.2em; line-height: 1.4em; letter-spacing:0.4px;border:0px solid #cc6600;padding:0 0 0 0;margin: 0.8em 0 1em 0;}
.workSummary ul{margin:0;padding:0;list-style:none;font-size: 1.2em; line-height: 1.6em; }
.workSummary ul li{display:block;margin:0 1% 0 0%}
.workSumCaption p {text-align:center;width:90%;font-size: 1.2em; line-height: 1.4em; letter-spacing:0.4px;border:0px solid #cc6600;padding:0 0 0 0;margin: 0.8em 0 1em 0;}
.gallerynav {text-align:left;padding:0 0 2em 0;border:0px solid #cc6600;margin:0 0 2em 0;padding:0 0 0 0;background-color: #fff}
.gallerynav p {width:85%;font-size: 1.2em; line-height: 1.4em; letter-spacing:0.3px;border:0px solid #cc6600;padding:0 0 0 0;margin: 0.8em 0 1em 0;}
.gallerynav h2 {font-size:2em;line-height:0em;color:#333;font-weight:normal;font-style:italic;letter-spacing:0.05em;margin:0;padding:0 0 0.7em 0;width:97%;border-bottom:1px dotted #ccc;}
.gallerywrap {text-align:left;width:97%;margin:0 auto; border:0px solid #C30;clear:both;}
.galleryitem {float:left;border:0px solid #C36;background:#ffffff;width:31.1%;margin:1% 2% 3% 0;}
.galleryitem a {opacity:1;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:block}
.galleryitem a:hover{opacity:.5}
.projectCaption {clear:both;text-align:center;font-family:"Times New Roman", Times, serif;font-size:1em;font-style:italic;
font-weight:normal;padding:8px 0 0 0;margin:0;color:#333;border:0px solid #ccc;letter-spacing:0.08em;border:0px solid #960;}
/* Two column */
.gallerywrap p {width:90%;font-size: 1.2em; line-height: 1.4em; letter-spacing:0.4px;border:0px solid #cc6600;padding:0 0 0 0;margin: 0.8em 0 1em 0;}
.galleryTwocolItem {width:47%;float:left;border:0px solid #C36;background:#ffffff;margin:1% 3% 3% 0;padding:0;}
.galleryTwocolCaption  {clear:both;text-align:left;font-family:"Times New Roman", Times, serif;font-size:1em;font-style:italic;
font-weight:normal;padding:8px 0 0 0;margin:0;color:#333;border:0px solid #ccc;letter-spacing:0.08em;border:0px solid #960;}  
.spacerTwo {float:left;width:97%;padding-bottom:5em;}

/* INDIVIDUAL PROJECT pages ***************************************************************************************************/
.projectdescription{float:right;text-align:left;width:35%;padding:0 0 0 0;margin:0 0 0 0;color:#333; border:0px solid #6C3}
.projectdescription p {width:90%;font-size: 1.1em; line-height: 1.4em; letter-spacing:0.2px;border:0px solid #6C3}
.projectdescription a {color:#333; text-decoration:underline;}
.projectdescription a:hover {color:#ccc; text-decoration:underline;}
.projectdescription h3 {font-family:"Times New Roman", Times, serif; font-style:italic; margin: 0px 0 0px 0;font-size:1.4em;color:#333;font-weight:normal;text-transform:none;
letter-spacing:0.02em;border-bottom:1px dotted #ccc;padding-bottom:4px;margin-bottom: 0;}
.projectdescription h4 {width:90%;font-size:1em;color:#333;font-weight:normal;border-bottom: 1px solid #ccc;padding:0 0 10px 0; margin:10px 0 0 0; text-transform:uppercase;letter-spacing:0.07em;}
.examplewrap {text-align:left;width:60%;margin:0;padding:0;border:0px solid #F3F;}
.projecteg{border:0px solid #C30;background:#fff;padding:0 0 0px 0;margin:0;border: 0px solid #efefef;}
.projecteg p {padding:0.5em 0 1.5em 0; margin:0 0 0 0;font-size: 1.1em; font-style:italic;line-height: 1.3em;}

/* FOOTER */
footer{width:97%;margin:0% 3% 0 3%;background:#fff;text-align:left;color:#383838;margin-top:0px;}
.push {height:3em;clear: both;}
.copyright{width:97%;margin:0 1%;text-align:left;margin:0;padding:0.8em 0 1.5em 0;text-transform:none;color:#333;
font-size:1.1em;border-top:1px dotted #ccc;}

/* CONTACT PAGE ***********************************************************************************************************************/
.error, .reply{float:left;width:70%;margin:2% 0 5em 5%;border:0px solid #996}
/* contact styles */
.contact{float:left;text-align:center;width:100%;margin:1% 0 0 0;border:0px solid #996}
.contactTwo{float:left;text-align:left;width:100%;margin:0 0 0 1%;border:0px solid #996;background:#eff9dd}
.contactTwo p{margin:2% 0 2% 6%}
.spacepage {padding:0 0 12em 0}
/* Contact form */
.formWrap{float:left;text-align:left;width:90%;margin:5% 0 0 0;border:0px solid #ccc;background:#efefef url(../images/contact/bg_fform.gif) no-repeat right;}
form {background:transparent;margin: 0px 0 20px 5%;padding:0; width:60%;border:0px #996600 solid;text-transform:none;letter-spacing: 0.5px;font-size:1.1em;}
form {width:95%;border:0px #996600 solid; }
fieldset{border:0px solid #c0c0c0;margin:0 2px 0 2px;padding:.35em .625em .75em 0}
legend{border:0;padding:0}
form label {display:block;float:left;width:155px;padding:0px;margin:0.5em 0 0.5em 0;text-align:left;font-weight: normal;  }
form fieldset label:first-letter {text-decoration:none;}
button,input,textarea,select {width:90%;border:0px solid #cae9eb;background:#ffffff; color: #333; padding: 10px; margin:0px 0px 3px 0px;}
form input:hover,textarea:hover,input:focus,textarea:focus {color:#333;background:#f8f8f8}  	
/* form styles the submit button */
#submitBtn {width:30%;background:#a054c7;color:#fff;font-weight:bold;font-size:0.8em;letter-spacing:0.05em;font-family:Arial,sans-serif;text-transform:uppercase;padding:12px;margin:0px 60px 0px 0;border:none;border-radius:2px;-webkit-border-radius:2px;}
#submitBtn:hover {background:#ccc;}
#resetBtn {width:30%;background:#adadad;color:#fff;font-weight:bold;font-size:0.8em;letter-spacing:0.05em;font-family:Arial,sans-serif;text-transform:uppercase;padding:12px;margin:0px 0px 0px 0px;border:none;border-radius:2px;-webkit-border-radius:2px;}
#resetBtn:hover {background:#ccc;}
/* form  - other styles 
button,input{line-height:normal}
button,select{text-transform:none}
textarea{overflow:auto;vertical-align:top}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}*/
/* end CONTACT PAGE ***********************************************************************************************************************/






/* MAX WIDTH 800px **************************************************************************/
@media screen and (max-width:800px){
.containerOne {background:#fff}
.containerTwo {background:#fff}
.containerThree {background:#fff}
.containerFour {background:#fff}
.containerFive {background:#fff}
.containerSix {background:#fff}
.pictureColumnWrap {width:97%;}
.picCol p {font-size:1.05em;line-height:1.4em;}
.about ul li {font-size:1.05em;line-height:1.6em;}
.mainContentWrap {width:97%;}
.gallerywrap {width:97%;margin:0 0 10% 0}
.gallerywrap p {width:90%;font-size: 1.04em; line-height: 1.3em; letter-spacing:0.3px;}
.galleryitem {width:46%;margin:0 2% 2.5% 2%;}
header{padding:1% 0 5% 0;}
.examplewrap {text-align:left;width:97%;margin:0 auto;padding-top:0px;border:0px solid #F3F;}
.projectdescription {width:95%;margin:0 auto;float:left;text-align:left;padding:0;margin:0 0 25px 0;color:#333;}
.projectdescription h3 {font-weight:bold;margin: 10px 0 0px 0; padding:0;}
.rule{margin:20px 0 0 0;}
.about {float:left;width:97%;padding:0 0 15px 0;margin:0 auto;border:0px solid #6C3}
.links{float:left;width:97%;padding:0 0 0 0;margin:0 0 2% 0;color:#333; border:0px solid #cccc66;}
.about h3 {padding: 10px 0 0 0}
.aboutwrap {float:left;width:95%;text-align:left;margin:0;border:0px solid #F3F;margin:2% 0 0 0;}
.links {float:left;width:97%;padding:0 0 15px 0;margin:0 auto;border:0px solid #6C3}
.links h3 {padding: 10px 0 0 0}
.formWrap{width:95%;}
form {margin: 2px 0 0px 5%; width: 97%;border:0px #996600 solid; }
form label {font-size:95%;margin-bottom:5px}
.twoeg {width:45%;float:left;}
.three {width:25%;}
/* work categories */
.categorywrap{width:97%;padding:0;margin-bottom: 3%;background:#ffffff;border: 0px solid #666633;}
.cardOneCaption p {text-align:left;margin: 4% 5% 5% 7%;font-size: 1.1em; font-style:normal;line-height: 1.3em;}
.cardOneLnk p {margin: 10% 5% 10% 7%;padding:0.5em 0 0 0;font-size: 1em;}
}








/* MEDIA QUERIES MAX WIDTH 600 */
@media screen and (max-width:600px){
.containerOne {background:#fff}
.containerTwo {background:#fff}
.containerThree {background:#fff}
.containerFour {background:#fff}
.containerFive {background:#fff}
.containerSix {background:#fff}
.galleryitem {width:46%;margin:0 2% 2.5% 2%;}
.topwrap{text-align:center;margin:10px 0 0px 0;}	
.examplewrap {text-align:left;width:97%;margin:0 auto;border:0px solid #F3F;margin:0;}
.galleryTwocolItem {width:97%;}
.projectdescription{margin:0 auto;float:left;text-align:left;width:97%;padding:0 0 0 0;margin:0 0 0 0;color:#333; border:0px solid #6C3}
.projectdescription {margin:0 0 25px 0;}
.projectdescription p {width:90%;border:0px solid #6C3}
.about{float:left;width:97%;padding:0;margin:2% 0 0 0;border:0px solid #6C3}
.links {float:left;width:97%;padding:0;margin:2% 0 0 0;border:0px solid #6C3}
.aboutwrap {float:left;width:95%;text-align:left;margin:0;border:0px solid #F3F;margin:2% 0 3% 0;}
.workSumCaption p {font-size: 1.04em; line-height: 1.3em; letter-spacing:0.3px;}
.twoeg {width:40%;}
.three {width:40%;}
.none {display:none}
h3{font-size:1.8em;color:#333;font-weight:normal;text-transform:none;letter-spacing:0.03em}
/* work categories */

/* CARD styles - full width *********************************************************************/
.cardOneWrap {text-align:center;width:100%;margin:0 0 0 0; padding:0;border:0px solid #C30;clear:both;}
.cardOne {float:left;text-align:center;width:100%;margin:0 0% 4% 0;border:1px dotted #ccc;background:#ffffff;padding:0 0 0 0;}
.cardOneCaption p {text-align:left;margin: 4% 5% 10% 7%;font-size: 1.1em; font-style:normal;line-height: 1.3em;}
.cardOneLnk p {margin: 8% 5% 10% 7%;padding:0.5em 0 0 0;font-size: 1em;}
.cardOneLeft {float:left;text-align:center;width:97%;margin:0 2% 0% 0;border:0px solid #000;background:#ffffff;padding:0 0 0% 0;}
.cardOneRight {float:left;text-align:center;width:97%;margin:2% 2% 0% 0;border:0px solid #000;background:#ffffff;padding:0 0 0% 0;}

}
/* END MAX WIDTH 600 *************************************************************************/


/

/* MEDIA QUERIES smart phone landscape, MAX WIDTH 480 *************************************************************************/
@media screen and (max-width:480px){
article{width:92%;margin:0 2% 0 2%;border:0px solid #9966cc;}
.containerOne {background:#fff}
.containerTwo {background:#fff;}
.containerThree {background:#fff}
.containerFour {background:#fff}
.containerFive {background:#fff}
.containerSix {background:#fff}
nav ul li{font-size:1em;letter-spacing:0.05em;margin:0 0 1.5% 1.5%}
.navsections ul li{display:block;font-size:1em;margin:0 1%;padding:0 0 4px 0;}
.categorywrap {background:#ffffff;border-bottom:1px dotted #ccc;margin-bottom: 1.5em;}
.categories{margin:1% 0 4% 2%;}
.categories ul li{font-size:1.15em;line-height:1.3em;letter-spacing:0.03em;}
.topwrap{text-align:center;margin:10px 0 0px 0;}
.wrapper{padding: 0 20px 0 20px; background:#fff;border:0px solid #cc0; }
.gallerywrap {width:97%;margin:0 0 10% 0}
.galleryitem {width:90%;margin:0 1% 2.5% 2%;}
.project {background:#fff;}
.welcome{text-align:center;width:90%;margin:2% 0 0 5%;}
.about p{font-size:1.05em}
.links p{font-size:1.05em}
.links {width:97%}
.links ul li a {color:#333;font-size:1.05em;line-height:1.6em;}
nav ul li span{ display:none}
/* added for 2 thumbs per row */
article{width:97%;margin:1% 1% 0 1%;padding:0;}
article .item{width:45%;margin:0 0 0 0%;border:0px solid #C36;}
/* work summary */
.workSummary {border:0px solid #9966cc;}
.workSummary p {width:97%;font-size: 1.04em; line-height: 1.3em; letter-spacing:0.3px;border:0px solid #9966cc;}
.workSummary ul{margin:0;padding:0;list-style:disc;font-size: 1.04em; line-height: 1.3em; }
.workSummary h2 {font-size:1.70em;margin-top:0.5em;}
.workSummaryTwo p {width:83%;font-size: 1.05em; line-height: 1.3em; letter-spacing:0.3px;padding-top:1.5em;}
/* project description */
.projectdescription{float:left;text-align:left;width:97%;padding:0 0 0 0;margin:0 0 0 0;border:0px solid #9966cc;}
.projectdescription p {width:97%;font-size: 1.1em; line-height: 1.4em; letter-spacing:0.2px;border:0px solid #9966cc;}
.projectdescription h3 {margin: 14px 0 6px 0; padding-bottom:0.2em;font-size: 1.4em; font-weight:bold;}
.projectwrap h3 {font-size:1em;margin: 5px 0 10px 0;}
.twoeg {width:97%;float:left;}
.none {display:none}
h3{font-size:1.5em;color:#333;font-weight:normal;text-transform:none;letter-spacing:0.03em}
/* introduction and about pages */
.about{}
.about p {}
.aboutwrap, .contactwrap {margin:14px 0 0 0;}
.about h2 {width:97%;font-size:1.70em;}
.abouteg p {}
.copyright{width: 95%;font-size:1.05em;line-height:1.3em;padding-bottom:20px;margin: 0px 0 10px 0; }
.examplewrap {width:97%;border:0px solid #9966cc;}

/* CARD styles - full width *********************************************************************/
.cardOneCaption p {font-size: 0.8em;line-height: 1.3em;}
.cardOneLnk p {margin:10% 5% 0% 7%;margin: 10% 5% 10% 7%;padding:0 0 0 0;font-size: 1em;}
.cardOneLnk p {padding:0.5em 0 0 0;font-size: 1em;}


}





/* MEDIA QUERIES smart phone portrait, MAX WIDTH:320 *******************************************************************************/
@media screen and (max-width:320px){
body{background:#fff;}
.wrapper{padding: 0;}
article{width:92%;margin:0 2% 0 5%;border:0px solid #C36}
.containerOne {background:#fff}
.containerTwo {background:#fff}
.containerThree {background:#fff}
.containerFour {background:#fff}
.containerFive {background:#fff}
.containerSix {background:#fff}
/* global navigation */
.navsections ul li{display:block;font-size:1em;margin:0 1%;padding:0 0 4px 0;}
nav{margin:2% 0 4% 0;padding:10px 0 12px 0;background:#fff}
nav ul{margin:0;list-style:none}
nav ul li{display:block;font-size:1em;margin:0 1%;padding:0 0 4px 0;}
.categories ul li{font-size:1em; }
.categories {margin-bottom: 1em;}
.backnext ul li{display:block;font-size:1em}
/* section openers print, web etc */
.gallerywrap {width:97%;margin:0 0 10% 0}
.galleryitem {width:90%;margin:0 1% 2.5% 2%;}
.projectCaption {padding:12px 0 12px 0;}
/* Projects */
.projectdescription {width:97.5%;border: 0px solid #99F; padding: 0 0 10px 0;}
.projectdescription h3 {margin: 14px 0 6px 0; padding-bottom:0.2em;font-size: 1.4em; font-weight:bold;}
.projectdescription p {font-size: 1.1em; line-height: 1.4em;}
.rule{margin:20px 0 0 0;}
.projecteg p, .abouteg p {font-size:1em;line-height: 1.3em;letter-spacing:0.04em;}
.welcomecaption p {font-size:1em; line-height: 1.2em;}
.baseMain{width:75%;}
.ruleThree {width: 97%;}
.baseMain p{font-size:1em;}
.twoeg {width:97%;float:left;border:0px solid #C30;}
.twoeg p {padding:0 0 0 0; font-size: 1.05em; line-height: 1.1em;}
.three {width:90%;}
/* introduction and about pages */
.about{border:0px solid #99F; padding: 0 0 10px 0;}
.about p {font-size:1.05em; line-height: 1.3em;}
.aboutwrap, .contactwrap {margin:14px 0 0 0;}
.about h2 {font-size:1.70em;}
.about h4{width:90%;font-size:1.2em;letter-spacing:0.02em;padding-bottom:2px;margin:1.5em 0 0 0;}
.abouteg p {padding:0 0 0 0; font-size:1.02em; font-style:italic;line-height:1.3em;}
/* form */
.formWrap{width:97%;}
form {margin: 2px 0 0px 5%; width: 97%;border:0px #996600 solid; }
form label {font-size:90%;margin-bottom:5px}
form input, form textarea, form select { padding: 6px;}
#submitBtn {width:40%;font-size:80%;margin-right:15%}
#resetBtn {width:40%;font-size:80%;}
/* top */
.topwrap{text-align:center;margin:1em 0 2em 0;}	
/* footer */
footer{height:4em;margin:0 2% 0 2%;padding:0;border-top: 1px solid #ccc;}
.copyright{width: 80%;font-size:1em;line-height:1.3em;text-align:left;color:#333;margin: 1px 0 10px 5%;
padding-bottom:20px;border:0px solid #063}
.none {display:none}
/* work summary */
.workSummary p {width:97%;font-size: 1.04em; line-height: 1.3em; letter-spacing:0.3px;}
.workSummary ul{margin:0;padding:0;list-style:disc;font-size: 1.04em; line-height: 1.3em; }
.workSummary h2 {font-size:1.70em;margin-top:0.5em;}
.workSummaryTwo p {width:83%;font-size: 1.05em; line-height: 1.3em; letter-spacing:0.3px;padding-top:1.5em;}
/* GALLERY CATEGORY navigation - Browse galleries */
.categorywrap {background:#ffffff;border-bottom:1px dotted #ccc;margin-bottom: 1.5em;}
.categories{margin:1% 0 4% 2%;}
.categories ul li{font-size:1.15em;line-height:1.3em;letter-spacing:0.03em;}
h2 {font-size:1.70em;}
h4 {font-size:1.2em;}
.spacerProject {float:left;width:97%;padding-top:1em;}


/* CARD styles - full width *********************************************************************/
.cardOneCaption p {font-size: 1em;line-height: 1.3em;padding:0 0 1em 0;}
.cardOneLnk p {margin:10% 5% 0% 7%;margin: 10% 5% 10% 7%;padding:0 0 0 0;font-size: 1em;}
.cardOneLeft {float:left;text-align:center;width:97%;margin:0 0 0% 0;border:0px solid #000;background:#ffffff;padding:0 0 0% 0;}
.cardOneLnk p {padding:1em 0 1em 0;font-size: 1em;}
}
/* end 320 *************************************************************************************************************/