/* GENERAL */
body { text-align: center; background-color: #F5F5F5; }
.bodytext {padding: 0px 5px 0px 5px; color:#036; font-size:18px; font-family:Arial, Helvetica, sans-serif; }
.bodytextlarger { padding: 0px 5px 0px 5px; color:#036; font-size:22px; font-family:Arial, Helvetica, sans-serif; margin-top: 0px; padding-top:12px; }
.bodytextstart {padding: 10px 5px 0px 5px; color:#036; font-size:18px; font-family:Arial, Helvetica, sans-serif; margin:0px;}
.bodytextclose {margin:0px; padding: 0px 5px 0px 5px; color:#036; font-size:18px; font-family:Arial, Helvetica, sans-serif; }
#button1 { margin-left:auto; margin-right:auto; font-family:Verdana, Geneva, sans-serif; font-size:18px; }
#button1 a.button {
  display:block;
  width:188px;
  line-height:71px;
  text-align:center;
  background-image: url(images/web-design-more-info-button2.png); background-position: 0px 0px;margin-left:auto; margin-right:auto; text-decoration:none; color:#FFF;
}
#button1 a.button:hover {
  display:block;
  width:188px;
  line-height:71px;
  text-align:center;
  background-image: url(images/web-design-more-info-button2.png); background-position: 0px -71px;margin-left:auto; margin-right:auto;  color:#FFFFFF;
}
#button2 { margin-left:auto; margin-right:auto; font-family:Verdana, Geneva, sans-serif; font-size:18px; }
#button2 a.button {
  display:block;
  width:188px;
  line-height:71px;
  text-align:center;
  background-image: url(images/web-design-more-info-button2.png); background-position: 0px 0px;margin-left:auto; margin-right:auto; text-decoration:none; color:#FFF 
}
#button2 a.button:hover {
  display:block;
  width:188px;
  line-height:71px;
  text-align:center;
  background-image: url(images/web-design-more-info-button2.png); background-position: 0px -71px;margin-left:auto; margin-right:auto;  color:#FFFFFF;
}
#button3 { margin-left:auto; margin-right:auto; font-family:Verdana, Geneva, sans-serif; font-size:18px; }
#button3 a.button {
  display:block;
  width:188px;
  line-height:71px;
  text-align:center;
  background-image: url(images/web-design-more-info-button2.png); background-position: 0px 0px;margin-left:auto; margin-right:auto; text-decoration:none; color:#FFF 
}
#button3 a.button:hover {
  display:block;
  width:188px;
  line-height:71px;
  text-align:center;
  background-image: url(images/web-design-more-info-button2.png); background-position: 0px -71px;margin-left:auto; margin-right:auto;  color:#FFFFFF;
}
.centre { text-align:center; }
#content1 { width: 100%; max-width: 900px; visibility: visible; text-align: center; background-image: url(images/website-design-main-image-extension.jpg); background-repeat: no-repeat; background-position: center top; clear:both; background-size: contain;
  -moz-background-size: contain;  /* Firefox 3.6 */
   /* background-position: center;  Internet Explorer 7/8 */}
#content1leftpod { width: 440px; visibility: visible; text-align: left; float:left; clear:none; margin-left:10px;  }
#content1leftpod p { font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#999; }
#content1rightpod { width: 440px; visibility: visible; text-align: left; float:right; clear:none; margin-left:10px; }
#content1rightpod p { font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#999; }
#content2 h2 { font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #FFF; padding-left: 5px;}
.clear {clear:both; }
.col1 { width:100%; max-width:300px;  text-align: left; float:left;}
.col2 { width:100%; max-width:300px; text-align: left; float:left;}
.col3 { width:100%; max-width:300px; text-align: left; float:left;}

#content2 { width:100%; max-width: 900px; text-align: center; background-image: url(images/website-design-graduated-grey-background.jpg) ; background-repeat: repeat-x; overflow:auto;}
.orangeitalic { font-style: italic; color: #F90; font-weight: bold; }
#content1 ul { margin-left: -20px; margin-top:-4px;}
#content1 li { display: inline-block; padding-left: 18px; text-align: center; }
#picture { text-align:center; height: 100%; max-height:174px; clear:both; width:100%; max-width: 900px; margin-right: auto; margin-left: auto; padding:0px; margin-bottom:0px }
.strapline { font-family:Arial, Helvetica, sans-serif; font-size:9px; color:#999; }
/* MAIN WRAPPER*/
#mainwrapper{ width:100%; max-width: 900px; margin-right: auto; margin-left: auto; background-color: #FFF; padding:0px }
/* HEADER */
#header { background-color: #333;  width: 100%; max-width:900px; float: left;}
#header img { background-color: #333; float: left; padding-top: 10px;  height: auto; width: 100%; max-width:395px;}
#headerrightblock { float:right; clear:none; width:50%; max-width:495px; background-color: #333; z-index:1000; margin-right:5px;}
#headerrightblock p { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-style: italic; color: #FFF; margin: 0px; padding: 0px; text-align: right; }
#header p a:link { color: #FFF; text-decoration: none; }
#header p li a:visited { color: #FFF; text-decoration: none; }
#header p li a:hover { color: #CCC; text-decoration: none; }
#navigation {width:100%; max-width:900px; float:left; margin:0px;}
#navigation li { display: inline-block; padding-left: 20px; list-style-type: none; text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: italic; text-decoration: none; }
#navigation li a:link { color: #FFF; text-decoration: none; }
#navigation li a:visited { color: #FFF; text-decoration: none; }
#navigation li a:hover { color: #CCC; text-decoration: none; }
/* FOOTER */
#footer { width:100%; max-width:890px; margin-left:auto; margin-right:auto; background:#333; font-family:Arial, Helvetica, sans-serif; color:#FFF; overflow:auto; padding: 5px 5px 15px 5px; }
.footcol1 { width:100%; max-width: 210px; text-align: left; float:left; height:250px;}
.footcol2 { width:100%; max-width: 210px; text-align: left; float:left; height:250px;}
.footcol3 { width:100%; max-width: 210px; text-align: left; float:left; height:250px;}
.footcol4 { width:100%; max-width: 210px; text-align: left; float:left; height:250px;}
#footer ul { list-style-type: none; margin-left:-30px; margin-top:-15px;}
#footer li a:link { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFF; text-decoration: none; }
#footer li a:visited { color: #FFF; text-decoration: none; }
#footer li a:hover { color: #CCC; text-decoration: none; }
#skipto {display:none;}
#topparagraph { width:90%; margin-left:auto; margin-right:auto;
	max-width: 970px;
	visibility: visible;
	text-align: left;
}
#topparagraph li a:link { font-family: Arial, Helvetica, sans-serif; font-size: 18px;  text-decoration: none; }
#topparagraph li a:visited { text-decoration: none; }
#topparagraph li a:hover { color: #CCC; text-decoration: none; }
#pricebox {
	background-color: #EEFAE2;
	text-align: left;
	width: 80%;
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 3px;
	padding-left: 3px;
	border: 1px solid #333333;
}
#priceboxseo {
	background-color: #EEFAE2;
	text-align: left;
	width: 80%;
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 3px;
	padding-left: 3px;
	border: 1px solid #333333;
}

/* Media Queries */
@media screen and (max-width: 480px) {
#headerrightblock { width:100%; clear:both; max-width:480px; background-color:#333; margin-left:auto; margin-right:auto; float:left;}	
#headerrightblock p { text-align: center; padding-left:5px; padding-top:10px; }
#content2 .col2 h2 { font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color:#036; padding-left: 5px;}
#content2 .col3 h2 { font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color:#036; padding-left: 5px;}
.col1 { width:100%; max-width:480px;  text-align: left; float:left;}
.col2 { width:100%; max-width:480px; text-align: left; float:left;}
.col3 { width:100%; max-width:480px; text-align: left; float:left;}
.footcol1 { width:100%; max-width: 480px; text-align: left; float:left;}
.footcol2 { width:100%; max-width: 480px; text-align: left; float:left;}
.footcol3 { width:100%; max-width: 480px; text-align: left; float:left;}
.footcol4 { width:100%; max-width: 480px; text-align: left; float:left;}
#skipto {display:block; width:100%; max-width:480px; background-color:#333; }
#skipto a:link {font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color:#FFFFFF; text-align:center; text-decoration:none;}
#skipto a:visited {font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color:#FFFFFF; text-align:center}
#skipto a:hover {font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color:#090; text-align:center;}

#navigation li { display:inline; list-style-type: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: italic; text-decoration: none; padding:0px; }
#navigation li a:link { color: #FFF; text-decoration: none; display:block; width:100%; max-width:480px; margin-left:-20px }
#navigation li a:visited { color: #FFF; text-decoration: none; }
#navigation li a:hover { color: #090; text-decoration: none; }
.bodytextstart {padding: 10px 5px 0px 5px; color:#036; font-size:18px; font-family:Arial, Helvetica, sans-serif; margin:0px; text-align:left;}
input[type='text'],
select,
textarea {
    width: 100%;
	max-width:400px
}
.bodytext {text-align:left; }
.bodytextlarger {text-align:left; }
.bodytextclose {text-align:left; }
}