/* wymount color palette
#B3B3B3 rgb(179,179,179) gray (text)
#52ADE1 rgb(82,173,225) light blue (main)
#D4145A rgb(212,20,90) dark pink
#22B573 rgb(34,181,115) soft green
#F7931E rgb(247,147,30) darker orange
#93278F rgb(147,39,143) purple
#39B54A rgb(57,181,74) dark green
#FBB03B rgb(251,176,59) brighter orange
*/

/* ========== global styles ==========*/

/* ===== general global ===== */

aside, article, section, header, footer, nav, ul, a, li {
  display: block;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
#btmMessage {
  position: absolute;
  left: 85%;
  top: 80px;
  width: 12%;
}
#btmMessage a {
  cursor: pointer;
  text-decoration: none;
  display:block;
}
#btmMessage p {
  
  color: rgb(247,147,30);
}
#btmMessage img {
 
}
#contactName, #contactEmail, #contactUrl, #contactMessage {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  width: 100%;
  font-family: "nimbus-sans", helvetica, arial, sans-serif;
  color: rgb(179,179,179);
}
.navWrapper { /* ADDED 11/9/12 */
  position: fixed;
  
}
.wrapper {
  margin: 0 auto;
  overflow: hidden;
  max-width: 960px;
}
h1, h2, h3 {
  font-weight: normal;
  color: rgb(82,173,225);
}
h2, h3 {
  text-transform: uppercase;
}
img {
  max-width: 100%;
}
#servicesItems, #processSection {
  overflow: hidden;
}
#servicesItems div, #processSection div {
  float: left;
}
/* ===== introduction ===== ADDED 20/8/12 */

#david {
	float: left;
	width: 15.62%;
	margin-right: 6.88%;
}
#hi {
	float: left;
	width: 100%;
}
#markus {
	float: left;
	width: 15.62%;
  margin-left: 6.88%;
	
}
#btmImage {
	float: right;
	margin-right: 5%;
}
#hi a {
	display: inline;
	color: rgb(63,76,107);
}
/* ===== end of introduction ===== ADDED 20/8/12 */
/* ===== navigation bar global ===== */

.navWrapper {
  width: 100%;
  background-color: rgb(82,173,225);
  background-color: rgba(82,173,225,0.75);
  text-transform: uppercase;
  font-size: 0.8em;
  z-index: 1000;
}
nav {
  margin: 0 auto;
}
nav ul {
  list-style-type: none;
}
nav ul {
  overflow: hidden;
}
nav ul li {
  float: left;
  text-align: center;
}
nav ul li a:link, nav ul li a:visited {
  text-decoration: none;
  color: rgb(255,255,255);
}
nav ul li.home, nav ul li.portfolio, nav ul li.services, nav ul li.about, nav ul li.contact { /*added 7/4/12 DM */
    cursor:pointer; /*added 7/4/12 DM */
} /*added 7/4/12 DM */

/* ===== slideSection global ===== */

/* ========= Slide Show =============== ADDED AUG 12*/

#slideSection {
	overflow: hidden;
}
#portfolio {
	overflow: hidden;
	margin-right: -10000px;
}
.imageWrapper {
	float: left;
	/*background: rgb(110,110,110);*/
	background: rgb(200,200,200); /* ADDED 11/9/12 */
	/* background: rgb(82,173,225);  ADDED 11/9/12 */
	opacity: 1; 
	margin: 0 20px 0 0;
}
.imageWrapper img {
	float: right;
	display: none;
	
}
.imageWrapper img:first-child {
	float: left;
	display: block;
}
#transit img {
	position: absolute;
	display: none;
	z-index: 25;
}
#imageDescriptions div div {
	position:absolute;
	display: none;
	color: rgb(110,110,110);
}
#imageDescriptions div div p {
	padding-right: 3px;
	padding-left: 3px;
	font-size: 1em;
}
#imageDescriptions p span a, #imageTitles div p a {
	display: inline;
}
#imageTitles div {
	position: absolute;
	display: none;
}
#imageTitles div p {
	font-size: 1em;
}
#rightArrow, #leftArrow {
	z-index: 30;
}
.arrows img {
	position: absolute;
	display: none;
	cursor: pointer;
	opacity: 0.7;
}
#hoverImageH1, #hoverImageH2, #hoverImageV1, #hoverImageV2{
	position: absolute;
	display: none;
}
#currentImageV1, #currentImageV2, #currentImageH1, #currentImageH2 { /* added 11/9/12 */
	position: absolute;
	display: none;
	
}

/* ========= end of Slide Show =============== ADDED AUG 12*/


/* ===== servicesMain global ===== */

#websiteTextCont h3 {
  color: rgb(179,179,179);
}
#responsiveSmlTextCont h3 {
  color: rgb(212,20,90);
}
#mobileTextCont h3 {
  color: rgb(34,181,115);
}
#contentTextCont h3 {
  color: rgb(247,147,30);
}
#ecommTextCont h3 {
  color: rgb(147,39,143);
}
#servicesItems p {
  font-size: 0.8em;
}
#responsiveSection p {
  font-size: 1.2em;
  padding-bottom: 1.5em;
}

/* ===== image rotation global - section added DM 14/4/12 ===== */

#responsiveScroll {    		
  position:relative;
  width:100%;    		
}    	
#responsiveScroll img {    		
  position:absolute;
  height:auto;
  width:100%;
  bottom:0;
  right:0;
  cursor:pointer;     		
}    	    	
.currentImage {
  z-index:50;
}    	
.previousImage {
  z-index:40;
}    	
#emptyTemplate{
  z-index:99;
}  
 
/* ===== end of section added 14/4/12 ======= */

#responsiveScrollTip { /* added 18/5/12 DM */
	position:absolute;
	display:none;
	color: rgb(82,173,225);
	font-size: 90%;
	border: 2px solid rgb(82,173,225);
	padding: 0 4px;
}

/* ===== aboutMain global ===== */

#processContent {
  display: none;
}
#processImgCont {
  margin: 0 4%;
  max-width: 92%;
}

/* ===== contactMain global ===== */

#contactMain {
  border-bottom: 0.1em solid rgb(179,179,179);
}
#contactDetails a:link, #contactDetails a:visited {
  text-decoration: none;
  color: rgb(179,179,179);
}
#contactDetails a:hover, #contactDetails a:active {
  color: rgb(82,173,225);
}
#contactSocial {
  overflow: hidden;
}
#contactSocial div {
  float: left;
  font-size: 0;
}
#contactSocial div:hover {
  background-color: rgb(82,173,225);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#contactForm ul {
  list-style: none;
}
#contactForm ul li {
  margin-top: 0.75em;
}
#contactForm ul li:first-child {
  margin-top: 0;
}
#contactName, #contactEmail, #contactUrl, #contactMessage {
  font-family: arial, sans-serif;
  font-size: 0.8em;
  color: rgb(179,179,179);
  border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border: 2px solid rgb(179,179,179);
  outline: none;
}
#contactName:focus, #contactEmail:focus, #contactUrl:focus, #contactMessage:focus {
  border: 0.2em solid rgb(82,173,225);
}
#contactName, #contactEmail, #contactUrl {
  height: 3.2em;
	padding-left: 0.8em;
}
#contactMessage {
  height: 10em;
  padding-left: 0.8em;
  padding-top: 0.8em;
}
#contactSubmit {
  text-transform: uppercase;
  cursor: pointer;
  height: 4em;
  -webkit-appearance: button;
}
.okButton:hover {
  cursor: pointer;
}

/* ===== footer global ===== */

#footerWrapper {
  border-bottom: 0.1em solid rgb(179,179,179);
  height: 5em;
  margin-bottom: 25em;
}
footer p {
  padding: 2em 0;
  color: gray;
  text-align: center;
}
#errorMessage {
	font-size: 80%;
	color:rgb(255,69,0);
}

/* ========== 1025+ styles ========== */

@media only screen and (min-width: 1025px) {

/* ===== general 1025+ ===== */

.wrapper {
  width: 71.1638251%;
}
#servicesMain, #slideSection, #aboutMain, #contactMain {
  padding: 5.5em 0 4.5em 0;
}
h1 {
  font-size: 3em;
  margin-bottom: 0.95em;
}
h2, h3 {
  font-size: 0.8em;
}

/* ===== navigation bar 1025+ ===== */

.navWrapper {
  /*position: fixed; CHANGED 11/9/12 */
  height: 2.85em;
}
nav ul {
  width: 50%; /* CHANGED FROM 35% - 20/8/2012 */
  margin: 0 auto;
}
nav ul li {
  width: 20%; /* CHANGED FROM 25% - 20/8/2012 */
}
nav ul li a {
  padding: 0.85em 0;
}
.subMenu {
  display: none;
}

/* ===== homeSection 1025+ ===== */

#homeSection {
	padding: 5.5em 0 13em 0;
}
#homeSection p {
  font-size: 3em; /* was 3.2em */
}
#logoDiv {
  width: 32%;
  padding-bottom: 5em;
}
/* ===== slideSection 1025+ ===== */

#slideSection {
  margin-bottom: 4em;
}

#slideSection h1 {
  margin-left: 14.42%;
  padding-bottom: 1.7em;
}
#slideSection h2 {
  float: left;
  font-size: 1.2em;
  width: 50%;
}
#slideSection h3 {
  float: left;
  text-transform: capitalize;
  color: rgb(179,179,179);  /*changed from black 12/912*/
  width: 100%;
  margin-bottom: 10px;
}
.websiteURL {
  float: left;
  width: 50%;
  margin-bottom: 1.5em;
}
.websiteURL a {
  float: right;
  padding: 0.13em 1%;
  color: white;
  background-color: rgb(179,179,179);
  text-decoration: none;
}
.websiteURL a:hover {
  color: rgb(82,173,225);
  background-color: white;
}
#imageTitles ul {
  float: left;
  width: 100%;
}
#imageTitles ul li {
  float: left;
  background-color: rgb(179,179,179);  /*changed from black 12/912*/
  color: white;
  margin-right: 1.5%;
  padding: 0 1%;
  border-radius: 10px;
}


/* ===== servicesMain 1025+ ===== */

#servicesItems div {
  width: 23.125%;
  margin-bottom: 3.2em;
}
#responsiveSection h2, #servicesItems h3, #servicesItems p {
  margin-bottom: 1.5em;
}
#websiteImgCont, #mobileImgCont, #ecommImgCont {
  margin-right: 2.5%;
}
#websiteTextCont, #mobileTextCont, #ecommTextCont {
  margin-right: 1.25%;
}
#responsiveSmlImgCont, #contentImgCont, #seoImgCont {
  margin: 0 2.5% 0 1.25%;
} 
#mobileImgCont, #ecommImgCont {
  clear: left;
}

/* ===== aboutMain 1025+ ===== */

#aboutMain h2{
  font-size: 0.8em;
  margin-bottom: 1.5em;
}
#valuesSection p {
  font-size: 1.2em;
  padding-bottom: 1.5em;
}

/* ===== contactMain 1025+ ===== */

#contactDetails {
  width: 50%;
  float: left;
}
#contactDetails h3 {
  margin-bottom: 1.5em;
}
#contactDetails p {
  font-size: 2.5em;
  padding-bottom: 0.6em;
}
#contactSocial div {
  width: 13%;
  margin-right: 3%;
}
#contactFormSection {
  width: 50%;
  float: left;
}
#contactForm {
  padding-left: 17.9166667%;
}
#contactName, #contactEmail, #contactUrl {
  width: 72%;
}
#contactMessage {
  width: 72%;
}
#contactSubmit {
  width: 76%;
}
}

/* ========== 781 to 1024 styles ========== */

@media only screen and (min-width: 781px) and (max-width: 1024px) {

/* ===== general 781 to 1024 ===== */

.wrapper {
  width: 87.2727273%;
}
#servicesMain, #slideSection, #aboutMain, #contactMain {
  padding: 5.5em 0 4.5em 0;
}
h1 {
  font-size: 3em;
  margin-bottom: 0.95em;
}
h2, h3 {
  font-size: 0.8em;
}

/* ===== navigation bar 781 to 1024 ===== */

.navWrapper {
  height: 2.85em;
  margin-bottom: -2.85em;
}
nav ul {
  width: 50%; /* CHANGED FROM 35% - 20/8/2012 */
  margin: 0 auto;
}
nav ul li {
  width: 20%; /* CHANGED FROM 25% - 20/8/2012 */ 
}
nav ul li a {
  padding: 0.85em 0;
}

/* ===== homeSection 781 to 1024 ===== */

#homeSection {
  padding: 5.5em 0 13em 0;
}
#homeSection p {
  font-size: 3.2em;
}
#logoDiv {
  width: 32%;
  padding-bottom: 5em;
}

/* ===== slideSection 781 to 1024 ===== */

#slideSection {
  margin-bottom: 4em;
}
#slideSection h1 {
  margin-left: 6.36%;
  padding-bottom: 1.7em;
}
#slideSection h2 {
  float: left;
  font-size: 1.2em;
  width: 50%;
}
#slideSection h3 {
  float: left;
  text-transform: capitalize;
  color: rgb(179,179,179);  /*changed from black 12/912*/
  width: 100%;
  margin-bottom: 10px;
}
.websiteURL {
  float: left;
  width: 50%;
  margin-bottom: 1.5em;
}
.websiteURL a {
  float: right;
  padding: 0.13em 1%;
  color: white;
  background-color: rgb(179,179,179);
  text-decoration: none;
}
.websiteURL a:hover {
  color: rgb(82,173,225);
  background-color: white;
}
#imageTitles ul {
  float: left;
  width: 100%;
}
#imageTitles ul li {
  float: left;
  background-color: rgb(179,179,179);  /*changed from black 12/912*/
  color: white;
  margin-right: 1.5%;
  padding: 0 1%;
  border-radius: 10px;
}

/* ===== servicesMain 781 to 1024 ===== */

#servicesItems div {
  width: 23.125%;
  margin-bottom: 3.2em;
}
#responsiveSection h2, #servicesItems h3, #servicesItems p {
  margin-bottom: 1.5em;
}
#websiteImgCont, #mobileImgCont, #ecommImgCont {
  margin-right: 2.5%;
}
#websiteTextCont, #mobileTextCont, #ecommTextCont {
  margin-right: 1.25%;
}
#responsiveSmlImgCont, #contentImgCont, #seoImgCont {
  margin: 0 2.5% 0 1.25%;
} 
#mobileImgCont, #ecommImgCont {
  clear: left;
}

/* ===== aboutMain 781 to 1024 ===== */

#aboutMain h2 {
  font-size: 0.8em;
  margin-bottom: 1.5em;
}
#valuesSection p {
  font-size: 1.2em;
  padding-bottom: 1.5em;
}

/* ===== contactMain 781 to 1024 ===== */

#contactDetails {
  width: 50%;
  float: left;
}
#contactDetails h3 {
  margin-bottom: 1.5em;
}
#contactDetails p {
  font-size: 2.5em;
  padding-bottom: 0.6em;
}
#contactSocial div {
  width: 13%;
  margin-right: 3%;
}
#contactFormSection {
  width: 50%;
  float: left;
}
#contactForm {
  padding-left: 17.9166667%;
}
#contactName, #contactEmail, #contactUrl {
  width: 72%;
}
#contactMessage {
  width: 72%;
}
#contactSubmit {
  width: 76%;
}
}

/* ========== 501 to 780 styles ========== */

@media only screen and (min-width: 501px) and (max-width: 780px) {

/* ===== general 501 to 780 ===== */

.wrapper {
  width: 95%;
}
#servicesMain, #slideSection, #aboutMain {
  padding: 5.5em 0 0 0;
}
#contactMain {
  padding: 5.5em 0 4em 0;
}
h1 {
  font-size: 3em;
  margin-bottom: 0.95em;
}
h2, h3 {
  font-size: 0.8em;
}

/* ===== navigation bar 501 to 780 ===== */

.navWrapper {
  height: 2.85em;
  margin-bottom: -2.85em;
}
nav ul {
  width: 70%; /* CHANGED FROM 50% - 20/8/2012 */
  margin: 0 auto;
}
nav ul li {
  width: 20%; /* CHANGED FROM 25% - 20/8/2012 */
}
nav ul li a {
  padding: 0.85em 0;
}

/* ===== homeSection 501 to 780 ===== */

#homeSection {
  padding: 5.5em 0 9em 0;
}
#homeSection p {
  font-size: 2.5em;
}
#logoDiv {
  width: 45%;
  padding-bottom: 5em;
}

/* ===== slideSection 501 to 780 ===== */

#slideSection {
  margin-bottom: 4em;
}
#slideSection h1 {
  margin-left: 2.5%%;
  padding-bottom: 1.7em;
}
#slideSection h2 {
  float: left;
  font-size: 1.2em;
  width: 50%;
}
#slideSection h3 {
  float: left;
  text-transform: capitalize;
  color: rgb(179,179,179);  /*changed from black 12/912*/
  width: 100%;
  margin-bottom: 10px;
}
.websiteURL {
  float: left;
  width: 50%;
  margin-bottom: 1.5em;
}
.websiteURL a {
  float: right;
  padding: 0.13em 1%;
  color: white;
  background-color: rgb(179,179,179);
  text-decoration: none;
}
.websiteURL a:hover {
  color: rgb(82,173,225);
  background-color: white;
}
#imageTitles ul {
  float: left;
  width: 100%;
}
#imageTitles ul li {
  float: left;
  background-color: rgb(179,179,179);  /*changed from black 12/912*/
  color: white;
  margin-right: 1.5%;
  padding: 0 1%;
  border-radius: 10px;
}

/* ===== servicesMain 501 to 780 ===== */

#websiteImgCont, #responsiveSmlImgCont, #mobileImgCont, #contentImgCont, #ecommImgCont, #seoImgCont {
  width: 23.4375%;
  margin: 0 3.125% 2.5em 0;
  clear: left; 
}   

#websiteTextCont, #responsiveSmlTextCont, #mobileTextCont, #contentTextCont, #ecommTextCont, #seoTextCont {
  width: 73.4375%;
}   
#responsiveSection h2 {
  margin-top: 3em;
}
#responsiveSection h2, #servicesItems h3, #servicesItems p {
  margin-bottom: 1.5em;
}

/* ===== aboutMain 501 to 780 ===== */

#aboutMain h2 {
  font-size: 0.8em;
  margin-bottom: 1.5em;
}
#valuesSection p {
  font-size: 1.2em;
  padding-bottom: 1.5em;
}

/* ===== contactMain 501 to 780 ===== */

#contactDetails {
  width: 50%;
  float: left;
}
#contactDetails h3 {
  margin-bottom: 1.5em;
}
#contactDetails p {
  font-size: 1.5em;
  padding-bottom: 0.6em;
}
#contactSocial div {
  width: 16%;
  margin-right: 6%;
}
#contactFormSection {
  width: 50%;
  float: left;
}
#contactName, #contactEmail, #contactUrl {
  width: 72%;
}
#contactMessage {
  width: 72%;
}
#contactSubmit {
  width: 76%;
}
}

/* ==========  500- styles ========== */

@media only screen and (max-width: 500px) {

/* ===== general 500- ===== */

.wrapper {
  width: 97%;
}
#servicesMain, #slideSection, #aboutMain {
  padding: 5.5em 0 0 0;
}
#contactMain {
  padding: 5.5em 0 4em 0;
}
h1 {
  font-size: 3em;
  margin-bottom: 0.95em;
}
h2, h3 {
  font-size: 0.8em;
}

/* ===== navigation bar 500- ===== */

.navWrapper {
  height: 2.85em;
  margin-bottom: -2.85em;
}
nav ul {
  width: 90%;
  margin: 0 auto;
}
nav ul li {
  width: 20%;
}
nav ul li a {
  padding: 0.85em 0;
}

/* ===== homeSection 500- ===== */

#homeSection {
  padding: 5.5em 0 9em 0;
}
#homeSection p {
  font-size: 1.5em;
}
#logoDiv {
  width: 70%;
  padding-bottom: 5em;
}

/* ===== slideSection 500- ===== */

#slideSection {
  margin-bottom: 4em;
}
#slideSection h1 {
  margin-left: 1.5%;
  padding-bottom: 1.7em;
}
#slideSection h2 {
  float: left;
  font-size: 1.2em;
  width: 50%;
}
#slideSection h3 {
  float: left;
  text-transform: capitalize;
  color: rgb(179,179,179);  /*changed from black 12/912*/
  width: 100%;
  margin-bottom: 10px;
}
.websiteURL {
  float: left;
  width: 50%;
  margin-bottom: 1.5em;
}
.websiteURL a {
  float: right;
  padding: 0.13em 1%;
  color: white;
  background-color: rgb(179,179,179);
  text-decoration: none;
}
.websiteURL a:hover {
  color: rgb(82,173,225);
  background-color: white;
}
#imageTitles ul {
  float: left;
  width: 100%;
}
#imageTitles ul li {
  float: left;
  background-color: rgb(179,179,179);  /*changed from black 12/912*/
  color: white;
  margin-right: 1.5%;
  padding: 0 1%;
  border-radius: 10px;
}

/* ===== servicesMain 500- ===== */

#websiteImgCont, #responsiveSmlImgCont, #mobileImgCont, #contentImgCont, #ecommImgCont, #seoImgCont {
  width: 45%;
  margin: 0 27.5% 1.5em;
}   

#websiteTextCont, #responsiveSmlTextCont, #mobileTextCont, #contentTextCont, #ecommTextCont, #seoTextCont {
  width: 100%;
}   
#responsiveSection h2 {
  margin-top: 3em;
}
#responsiveSection h2, #servicesItems h3, #servicesItems p {
  margin-bottom: 1.5em;
}

/* ===== aboutMain 500- ===== */

#aboutMain h2 {
  font-size: 0.8em;
  margin-bottom: 1.5em;
}
#valuesSection p {
  font-size: 1.2em;
  padding-bottom: 1.5em;
}

/* ===== contactMain 500- ===== */

#contactDetails {
  width: 100%;
  margin-bottom: 3em;
}
#contactDetails h3 {
  margin-bottom: 1.5em;
}
#contactDetails p {
  font-size: 1.8em;
  padding-bottom: 0.6em;
}
#contactSocial div {
  width: 16%;
  margin-right: 6%;
}
#contactFormSection {
  width: 100%;
}
#contactName, #contactEmail, #contactUrl {
  width: 90%;
  margin-left: 3%;
}
#contactMessage {
  width: 90.2%;
  margin-left: 3%;
}
#contactSubmit {
  width: 94.2%;
  margin-left: 3%;
}
}