@charset "utf-8";
/* CSS Document */

html, body {
 	height: 100%;
  	margin: 0px;
	padding:0px;
	text-align:center;
	background-image:url(images/BG.jpg);
	font-family: Georgia, Times, serif;
	font-size: 14px;
	line-height: 175%;
	color: #454545;
}

a {
	text-decoration: none;
	color:#cc0000;
    outline: none;  
}

a:hover {
	text-decoration: underline;
	color:#CC0000;
    outline: none; 
}

img, a:focus {
	border-style: none;
	outline: none; 
}

h1 {
	font-size: 26px;
	margin:16px 0px 0px 0px;
	font-weight:bold;
	width: 700px;
	height:30px;
}

h2 {
	font-size: 18px;
	line-height: 20px;
}
h2 span {
	color:#cc0000;
}
h3 {
	font-size: 14px;
}
#mainHeading h1 {
	display:inline;
}
#mainHeading h2 {
	font-size: 26px;
	display:inline;
}
.smallText{
	font-size: 10px;
}
 
 /* Wrapper */
 
.wrapper {
	min-height: 894px;
	height: auto !important;
	height: 100%;
	margin: 0 auto -4em;
	width:905px;
	margin:0px auto;
	text-align:left;
	padding:0px;	
}

/* Menu */

#menu {
	width: 845px;
	height: 34px;
	padding: 0px;
	margin: 0px;
}


#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	margin: 5px 23px 0px 0px;
	padding: 0px;
	text-decoration: none;
	font-size: 16px;
	color:#454545;
}

#menu a:hover {
	color:#CCCCCC;
}

/* Menu Vertical List */

#menuList {
	width: 190px;
	float:right;
	clear:none;
}

#menuList ul {
	list-style-type:none;
	margin:8px 0px 0px 0px;
	padding:0;
}
 
#menuList li {
	display: inline;
	/* for IE5 and IE6 */
}

#menuList a {
	color:#454545;
	text-decoration: none;
	font-size: 11px;
	display: block;
	padding: 3px;
	width: 160px;
	border-bottom:1px solid #bbbbbb;
	line-height:14px;
} 
 
#menuList a:hover {
	color:#CCCCCC;
} 

 
/* header */    
   
#header {
	background-image:url(images/header.png);
	background-repeat:no-repeat;
	width:905px;
	height:100px;
	margin: 45px 0px 0px 0px;
	float:left;
	clear:left;
}

#logoLink a{
	float:left;
	clear:none;
	width:370px;
	height:100px;
}

/* banner */

#myreel{ /*sample CSS for demo*/

}

.paginate{
width: 826px;
margin-top:5px;
font:bold 14px Arial;
text-align:center;
}


/* brand */    
   
#headerLine {
	width:882px;
	height: 22px;
	margin: 32px 0px 10px 0px;
	padding: 0px;
	float:left;
	border-bottom:1px solid #B5B4AF;
	color:#454545;
	font-size: 11px;
}

#headerLine2 {
	width:882px;
	height: 22px;
	margin: 20px 0px 20px 0px;
	padding: 0px;
	float:left;
	border-bottom:1px solid #B5B4AF;
	color:#454545;
	font-size: 11px;
}

#tagLine {
	width:882px;
	height: 62px;
	margin: 27px 0px 30px 0px;
	padding: 0px;
	float:left;
	text-align:center;
	color:#454545;
}
/* Banner */    
   
#banner {
	width:826px;
	height:283px;
	margin: 0px 0px 0px 7px;
	float:left;
	clear:left;
}  

/* article boxes */ 

#articleBoxFrame {
	background-image: url(images/articleBoxFrame.png);
	width:826px;
	height:350px;
	margin: 0px 0px 0px 5px;
	float:left;
}    
   
#articleBox {
	width:882px;
	height:350px;
	margin: 10px 0px 0px 27px;
	float:left;
} 

#articleBoxShadow {
	background-image: url(images/bannerShadow.png);
	width:826px;
	height:50px;
	margin: 0px 0px 0px 27px;
	float:left;
}
.boxShadow {
	background-image: url(images/bannerShadow.png);
	width:273px;
	height:19px;
	margin: 0px 0px 0px 0px;
}

#articleBoxText {
	width:430px;
	margin: 135px 0px 0px 365px;
	float:left;
}
   
/* package boxes */    
   
#stepsText {
	width:826px;
	height:41px;
	margin: 0px 0px 0px 1px;
	float:left;
}

#packageBox {
	width:236px;
	height:152px;
	margin: 13px 11px 5px 0px;
	float:left;
} 

#arrow {
	background-image: url(images/arrow.png);
	width:30px;
	height:36px;
	margin: 72px 16px 0px 10px;
	float:left;
}
   
/* big icons */    
   
#bigIcons {
	width:236px;
	height:152px;
	margin: 15px 20px 20px 0px;
	float:right;
	clear:right;
}   
   
/* section content */    
 
#simpleTitleText {
	width:850px;
	height:30px;
	margin: 15px 0px 0px 0px;
	float:left;
}
#simpleTitleTextTestimonial {
	width:850px;
	height:90px;
	margin: 0px 0px 0px 0px;
	float:left;
}
#simpleText {
	width:844px;
	margin: 5px 0px 0px 20px;
	padding: 0 20px 0 0;
	float:left;
} 
 
#simpleText01 {
	background-image:url(images/whiteBG.png);
	background-repeat:no-repeat;
	width:884px;
	height:184px;
	margin: 5px 0px 30px 0px;
	padding: 10px 20px 0px 20px;
	float:left;
	clear:both;
}

#simpleText02 {
	width:884px;
	margin: 5px 0px 0px 0px;
	padding: 0 20px 0 0;
	float:left;
} 
 
#sectionContentRight {
	width:610px;
	margin: 10px 30px 0px 0px;
	float:right;
}  

#sectionContentLeft {
	width:610px;
	margin: 10px 30px 0px 0px;
	float:left;
}

#portSidebar {
	width:252px;
	margin: 10px 22px 0px 0px;
	float:right;
	clear:right;
}

#portTitle {
	width:320px;
	margin: 10px 0px 0px 0px;
	float:left
}

#portLink {
	width:500px;
	margin: 0px 0px 0px 0px;
	float:left;
}

#portfolioItems {
	background-image:url(images/portfolio/whiteTransBack.png);
	background-repeat:no-repeat;
	width:885px;
	height:421px;
	margin: 20px 0px 20px 0px;
	padding: 10px;
	float:left;
}

#mediaItems {
	background-image:url(images/portfolio/whiteBG.png);
	background-repeat:no-repeat;
	width:884px;
	height:202px;
	margin: 20px 0px 20px 0px;
	padding: 13px 10px 0px 10px;
	float:left;
}

#mediaText {
	width:844px;
	margin: 15px 0px 0px 0px;
	padding: 0 20px 0 0;
	float:left;
} 
 
#portfolioItemsDepth {
	background-image:url(images/portfolio/whiteTransBackLarge.png);
	background-repeat:no-repeat;
	width:569px;
	height:558px;
	margin: 20px 0px 0px 0px;
	padding: 10px;
	float:left;
} 

#webDesign {
	background-image:url(images/portfolio/WDTransBack.png);
	background-repeat:no-repeat;
	width:569px;
	height:1050px;
	margin: 20px 0px 0px 0px;
	padding: 10px;
	float:left;
}
   
#servSidebar01 {
	width:252px;
	margin: 30px 10px 0px 10px;
	float:left;
	clear:left;
	background:#ede6d3;
	padding:0 10px;
	border:1px solid #e8e8e8;
}   
   
#servSidebar {
	width:252px;
	margin: 30px 10px 0px 10px;
	float:left;
	background:#ede6d3;
	padding:0 10px;
	border:1px solid #e8e8e8;
}
.imgRight {
	float:right;
	margin-left:15px;
	margin-bottom:15px;
}

#introBox {
	width:870px;
	margin: 25px 0px 0px 10px;
	padding: 10px 20px 0 0;
	float:left;
}
.webType01 {
	height: 373px;
    margin: 0;
    padding: 20px 45px;
    width: 180px;
	float:left;
	background-image: url(../images/we-design-new-websites.jpg);
}
.webType02 {
	height: 373px;
    margin: 0;
    padding: 20px 45px;
    width: 180px;
	float:left;
	background-image: url(../images/we-develop-existing-websites.jpg);
}
.webType03 {
	height: 373px;
    margin: 0;
    padding: 20px 45px;
    width: 180px;
	float:left;
	background-image: url(../images/we-build-brands.jpg);
}
#agency {
	width:816px;
	margin: 15px 0px 0px 10px;
	padding: 20px 20px 10px 20px;
	float:left;
	clear:left;
	background:#f8f8f8;
	border:1px solid #e8e8e8;
}
#agency .text{
	margin-bottom:-10px;
}
.clear {
	clear:both;
}
#lichfield {
	height: 124px;
    margin: 0 0 15px 0;
    padding: 20px 40px;
    width: 323px;
	float:left;
	background-image: url(../images/lichfield-web-design.jpg);
}
#lichfield2{
	height: 124px;
    margin: 0 0 15px 0;
    padding: 20px 40px;
    width: 323px;
	float:left;
	background-image: url(../images/lichfield-web-design-email.jpg);
}
#leamington {
	height: 124px;
    margin: 0 0 15px 0;
    padding: 20px 40px;
    width: 323px;
	float:left;
	background-image: url(../images/leamington-web-design.jpg);
}
.pricePackages {
	height: 660px;
    margin: 0;
    padding: 20px 40px;
    width: 683px;
	float:left;
	background-image: url(../images/priceGrid.jpg);
	/*background-image: url(../images/wizard-card1.jpg);*/
}
.promo {
	clear:both;
	width:670px;
	margin-bottom:15px;
}
.promoCol1{
	float:left;
	width:80px;
}
.promoCol2{
	float:left;
	width:590px;
}
.promoCol2 p{
	margin:8px 0 0 0;
}
.getAQuote {
	float: left;
	clear:both;
	margin:10px 0 0 0px;
	height: 10px;
}
.individualsGrid {
	height: 660px;
    margin: 0;
    padding: 20px 40px;
    width: 683px;
	float:left;
	background-image: url(../images/gridIndividuals.jpg);
}
.priceGrid {
	height: 520px;
    margin: 0;
    padding: 40px 50px;
    width: 683px;
	float:left;
	background-image: url(../images/priceGrid.jpg);
	background-repeat:no-repeat;
}
.gridRow {
	clear:both;
	width: 683px;
}
.gridColTitle {
	float:left;
	width: 270px;
	height: 25px;
	border-bottom:1px solid #cc0000;
}
.gridColTitleX {
	float:left;
	width: 270px;
	height: 30px;
}
.gridColTick {
	float:left;
	clear:none;
	width: 50px;
	height: 25px;
	border-bottom:1px solid #cc0000;
	border-left:1px solid #cc0000;
	background-image: url(../images/priceGridTick.png);
	background-repeat:no-repeat;
}
.gridColCross {
	float:left;
	clear:none;
	width: 50px;
	height: 25px;
	border-bottom:1px solid #cc0000;
	border-left:1px solid #cc0000;
	background-image: url(../images/priceGridCross.png);
	background-repeat:no-repeat;
}
.gridCol {
	float:left;
	clear:none;
	margin-left: 1px;
    margin-top: 10px;
    text-align: center;
    width: 48px;
	height: 30px;
	border:1px solid #fff;
	background-color:#cc0000;
	font-weight:bold;
}
.gridCol a{
	color:#fff;
}
.wizardMore {
	float:right;
	font-weight:bold;
	margin: 320px 0;
	padding:0;
}
.pricePromo {
	/*background-image: url(../images/promoBox.png);*/
	width:64px;
	height:68px;
	/*border:2px solid #fff;*/
	color:#fff;
	padding:7px;
	margin: 0 10px 10px 0;
	font-weight:bold;
}
*:first-child+html #lichfield h2 { /*hack for IE7*/
	padding:20px 0 0 0;
	margin:0;
}
#lichfield h2 {padding:20px 0 0 0\0/;} /* for IE8, going last */
*:first-child+html #leamington h2 { /*hack for IE7*/
	padding:20px 0 0 0;
}
#leamington h2 {padding:20px 0 0 0\0/;} /* for IE8, going last */
#aboutUs01 {
	width:232px;
	margin: 10px 22px 0px 0px;
	float:left;
	clear:left;
	
}   
   
#aboutUs {
	width:232px;
	margin: 10px 22px 40px 33px;
	float:left;
}

#aboutUs01 h1 {
	margin: 20px 0 20px 0;
}

#aboutUs h1 {
	margin: 20px 0 20px 0;
}

#aboutUs img {
	margin: 10px 0 10px 0;
	border:5px solid #bbbbbb;
}
#aboutUs01 img {
	margin: 10px 0 10px 0;
	border:5px solid #bbbbbb;
}
/* Footer */  


#footer {
	border-top: 8px solid #25221d;
	/*background: #25221d;*/
	width: 90%;
	height: 120px;
	padding: 5px auto;
	margin:20px auto;
	padding:20px;
	text-align: left;
	position: bottom;
	bottom: 0px;
	/*color: #fff;*/
	overflow:hidden;
	clear: both;
}
#shadow {
	background-image: url(images/footerShadow.png);
	width:826px;
	height:50px;
	margin: 0px 0px 0px 27px;
	float:left;
}

#footerLeft{
	width:215px;
	margin: 30px 30px 0px 50px;
	float:left;
}

#footerRight{
	width:180px;
	margin: 30px 33px 0px 0px;
	float:right;
}



.footerTitle{
	font-size:16px;
	color: #333;
	text-shadow: 0 1px 0 #fff;
	font-style: italic;	
}

/* Quote builder */

#quoteBuilder{
	background-image:url(images/whiteBGLong.png);
	background-repeat:no-repeat;
	width:884px;
	height:440px;
	margin: 0px 0px 0px 0px;
	padding: 10px 20px 0px 20px;
	float:left;
}
#quoteBuilder a{
	font-size: 22px;
}
#quoteBuilder a#clear{
	font-size: 15px;
	color: #454545;
}
#totalCost{
	/*float:right;
	clear:none;*/
	margin:0 60px 0 0;
	padding:0;
	font-size: 28px;
	color: #333;
	text-shadow: 0 1px 0 #fff;
	font-style: italic;	
	width:300px;
}
#quoteBuilderHeader{
	background-image:url(images/quote_builder.jpg);
	background-repeat:no-repeat;
	width:826px;
	height:193px;
	margin: 10px 0px 0px 30px;
	padding: 20px 120px 10px 20px;
	float:left;
}

#quoteBuilderHeader p{
	padding: 0px 320px 0px 0px;
}
#numPages{
	font-size: 14px;
	/*float:right;
	clear:right;*/
	margin:10px 60px 0 0;
}
.error{
	color: #ff0000;
}
#currentHeight{
	display:none;
}
#submitQuoteForm{
	margin:0px 0px 20px 0px;
	float:left;
	width:610px;
	padding: 10px 0 0 0;
}

#yourWebOptions{
	width:250px;
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 10px 10px;
	float:left;
	clear:none;
	border:1px solid #bbbbbb;
}
#yourWebOptions h1{
	width:250px;
}
dt {
	background-image:url(images/helpIcon.png);
	background-repeat:no-repeat;
	font-size: 16px;
	font-weight: bold;
	height:45px;
	padding:15px 0 0 60px;
	margin:0;
}

dd {
	
}

#packages{
	float:left;
	clear:left;
	width:340px;
	height:131px;
	margin: 0px 0 0 30px;	
	padding: 5px 0 0 3px;
}

#howCanWeHelp{
	float:right;
	width:340px;
	height:131px;
	margin: 0px 50px 0 0;	
	padding: 5px 5px 0 0px;
}
.flashPortfolio{
	float:right;
	width:300px;
	height:139px;
	margin: 25px 50px 0 0;	
	padding: 5px 5px 0 0px;
}
.flashPortfolioLeft{
	float:left;
	width:300px;
	height:139px;
	margin: 0px 15px 10px 2px;	
	padding: 2px 5px 0 0px;
}

#whatPeopleSay {
	width:470px;
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 0px 20px;
	float:left;
	clear:both;
}

#portfolioBox {
	width:330px;
	margin: 0px 0px 0px 0px;
	padding: 15px 49px 0px 0px;
	float:right;
}

#latestArticle {
	width:750px;
	height:200px;
	margin: 10px 0px 0px 0px;
	padding: 1px 20px 20px 20px;
	float:left;
	clear:both;
}
#leftTextBox {
	width:430px;
	height:180px;
	margin: 10px 0px 0px 0px;
	padding: 0px 20px 20px 20px;
	float:left;
	clear:both;
}
#leftTextBox2 {
	width:430px;
	height:auto;
	margin: 10px 0px 0px 0px;
	padding: 0px 20px 10px 20px;
	float:left;
	clear:both;
}
#twitterFeed{
	width:400px;
	height:350px;
	margin: 10px 0px 0px 0px;
	padding: 20px 20px 20px 20px;
	float:left;
	clear:none;
}
#twitterFollow{
	width:170px;
	height:70px;
	padding: 20px 10px 0 0;
	float:left;
	clear:none;
}
#facebookLike{
	width:220px;
	height:70px;
	padding: 0 10px;
	float:left;
	clear:none;
}
.strikethrough {
	text-decoration:line-through
}

.testimonial {
	border: 1px solid #b5b4af;
	border-radius: 6px;
	padding:10px;
	color:#000000;
}
.testimonial2 {	
	margin-bottom:20px;
}
.underLozenge {
	font-size:0.8em;
	margin: 0 0 0 10px;
}

.addthis_toolbox {
	height: 90px;
}

@font-face {
    font-family: 'LondrinaSolidRegular';
    src: url('LondrinaSolid-Regular-webfont.eot');
    src: url('LondrinaSolid-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('LondrinaSolid-Regular-webfont.woff') format('woff'),
         url('LondrinaSolid-Regular-webfont.ttf') format('truetype'),
         url('LondrinaSolid-Regular-webfont.svg#LondrinaSolidRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1.fontface {font: 200px/168px 'LondrinaSolidRegular', Arial, sans-serif;letter-spacing: 0; width:400px; height: 230px; }
h2.fontface {font: 90px/118px 'LondrinaSolidRegular', Arial, sans-serif;letter-spacing: 0;width:800px; height: 20px; margin: 0 0 80px;}
h3.fontface {font: 73px/118px 'LondrinaSolidRegular', Arial, sans-serif;letter-spacing: 0;width:800px; height: 20px; color:#f5b12b;}
p.fontface {font: 42px/118px 'LondrinaSolidRegular', Arial, sans-serif;letter-spacing: 0;width:800px; height: 20px; line-height:40px; width:180px;margin: 5px 0;}

h3.fontface a {color:#f5b12b;}
h3.fontface a:link {color:#f5b12b;}
h3.fontface a:active {color:#f5b12b;}
h3.fontface a:hover {color:#9b080e;text-decoration:none;}


p.fontface a:link {color:#454545;}
p.fontface a:hover {color:#9b080e;text-decoration:none;}
p.fontface a:visited {color:#454545;}

h3.fontface a.quote  {color:#5093cb;}
h3.fontface a:link.quote  {color:#5093cb;}
h3.fontface a:active.quote {color:#5093cb;}
h3.fontface a:hover.quote {color:#9b080e;text-decoration:none;}



.dots {border-bottom:3px dotted #9b080e;height:20px; clear:left;}

@font-face {
    font-family: 'LondrinaSketcheRegular';
    src: url('LondrinaSketche-Regular-webfont.eot');
    src: url('LondrinaSketche-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('LondrinaSketche-Regular-webfont.woff') format('woff'),
         url('LondrinaSketche-Regular-webfont.ttf') format('truetype'),
         url('LondrinaSketche-Regular-webfont.svg#LondrinaSketcheRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LondrinaOutlineRegular';
    src: url('LondrinaOutline-Regular-webfont.eot');
    src: url('LondrinaOutline-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('LondrinaOutline-Regular-webfont.woff') format('woff'),
         url('LondrinaOutline-Regular-webfont.ttf') format('truetype'),
         url('LondrinaOutline-Regular-webfont.svg#LondrinaOutlineRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LondrinaShadowRegular';
    src: url('LondrinaShadow-Regular-webfont.eot');
    src: url('LondrinaShadow-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('LondrinaShadow-Regular-webfont.woff') format('woff'),
         url('LondrinaShadow-Regular-webfont.ttf') format('truetype'),
         url('LondrinaShadow-Regular-webfont.svg#LondrinaShadowRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}