@charset "utf-8";
/* CSS Document for Server Side Design Keyword Conversion Landing Pages by David R. York, Last Revised 07-21-2011 */

article, aside, footer, header, section {
  display: block;
}

#kwc-wrapper {
	  /*should not need to adjust height unless bullet point text on right-side causes the kwc-wrapper to need more room overall*/
	width:960px;   /*set width to 100% to automatically match the width and align properly to the area of your SEO project keyword page, or to a specific pixel width if the design is TOO wide.  In this case you should also alighn to this DIV wrapper to CENTER.  Note that the minimum is 825px at currernt left side configuration.  For areas smaller than that you will need to resize your image to appropriate width and set the width of the next 5 elements all to the same width. */
	margin: 0 auto 20px auto;   /*distance between bottom of kwc-wrapper before SEO page copy starts (which should be collapsed) */
	
}
#kwc-wrapper #phone-number {
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size:26px;
	font-weight:bold;
	color:#900;
	text-align:left;
}
#kwc-wrapper #phone-number .phone-side-text {
	font-size:18px;
	font-style:italic;
}

#SEOheader {
border-width: 1px;
border-style: solid;
width: 946px;
height: 139px;
line-height: 18px;
margin-top: 23px;
margin-bottom: 1px;
margin-left: 5px;
text-align: left;
border-color: #5ea3d8;
}

.special {float: right; padding: 20px 80px 0 0;}
.logo {float: left; padding: 23px 0 0 30px;}

#SEOheader span {

}

.businfoLeft {

	float: left;
	width: 530px;
	margin-top: -10px;
}

.businfoLeft ul li{

}

.businfoLeft table {
	width:530px;
	margin-left: 30px;
} 

.businfoLeft td {
	font-style: italic;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	vertical-align: top;
	text-align: left;
	font-size: 15px;
	line-height: 21px
}

.businfoRight  {
	width: 385px;
	margin-top: -17px;
	float: right;
}

.businfoRight td  {
	color: #f7911e;
	font-size: 23px;
	line-height: 27px;
	font-style: italic;
	font-family: Helvetica, Verdana, Arial, sans-serif 

}

.businfoRight img  {
	margin-right: 20px;
	margin-top: 5px;
}

/*LEFT SIDE*/

/*Note: the widths for the #left-side, #kwc-image, #kwc-image img, #kwc-image-overlay, and #kwc-overlay-text shoud all match the width of your main left side image. The height of #kwc-image and #kwc-image img should match the height of your image.  To make the bottoms of the left and right side match up the image height should be 403px or close to it since that is the minimum height needed for the right side content.  If the right side content is more then you can adjust the heights of the left side to match*/

#left-side {
	width:350px;
	height:464px;
	float:left;
	margin-top: 12px;
	margin-left: 100px;
}

#left-side span {
margin-top: 0px;
margin-bottom: 11px;
font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 26px;
font-weight: bold;
letter-spacing: -.5px;
word-spacing: .5px;
color: #F7911E;
}

/*.shadow {   this applys a shadow effect to the left-side box. remove the .shadow class from the #left-side div container and form div containers in page code to remove the shadow.
  -moz-box-shadow: 5px 5px 5px #2A91C8;
  -webkit-box-shadow: 5px 5px 5px #2A91C8;
  box-shadow: 5px 5px 5px #2A91C8;
}
*/


#kwc-image {
	width:547px;
	height:464px;
	position:relative;
	z-index:1;
	border:1px solid #999;  /*you may adjust the border of left side here to match the page optionally*/
}
#kwc-image img {  /*for easiest use of template make sure your main image is sized to width:373px and height:403px but if you need to use different dimensions, adjust the width of the #kwc left side, #kwc-image, #kwc-image-overlay, and the #kwc-image-overlay-text div containers to match the same width as the image.*/
	width:547px;
	height:464px;
}
#kwc-image-overlay {
	width:547px;
	height:106px;
	border:1px solid #999;	
	position:relative;
	top:-137px;
	left:0px;
	z-index:2;
	background-color:#ededed;   /*you may optionally adjust the color of the transparent layer over the main left side image so that it matches the page.  Since it will be transparent, you may want to match the page but at a darker color.*/
	zoom:1;
	filter: alpha(opacity=80);
	opacity:0.7;
}
#kwc-overlay-text {
	width:547px;
	height:100px;
	position:relative;
	top:-251px;
	left:0px;
	z-index:3;
	color:inherit;   
}
#kwc-overlay-text p {
	padding:5px 20px 10px 20px;
	text-align:left;
	
	/*you may optionally change the color, font, font-size and weight of the overlay text for emphasis here.*/	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#000;   
}



/*RIGHT SIDE*/

#right-side {
	width: 366px;
	float: right;
	margin-right: 31px;
	padding: 0;
	margin-top: 10px;
}
#right-side img {  /*this is the logo or small image used at the top right-side.  if you don't want to include an image then remove it from the page code.  if you do use an image set the correct width and height here but try to keep around the same default size shown below. */

}
#right-side h1 {      
  color: #F7911E;
    font-family: Arial,Helvetica,sans-serif,Verdana;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 20px;
    margin-bottom: 11px;
    margin-top: 0;
    word-spacing: 1px;
    text-align: left;
   /*color of h1 tag in right-side.  if using gradient effect below then comment out this color*/
  
  /*next three lines will adds gradient effect to h1 tag - renmove this comment if you want to apply gradient effect  */
  
  /*background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
}
#right-side h2 {
	margin-top:2px;	
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	color:#666;  /*color of h2 tag in right-side*/
	
}
#right-side ul {
	color:#900;   /*color of the bullets in right-side.  you can change to match the page.  if you use the arrows instead of colored bullets comment this color out and uncomment the next line.*/
  /*list-style: url(../kwc-images/bullets/black-arrow.png);*/
	line-height:15px;
	list-style-image: url(../kwc-images/bullets/4Square.png) 
	
}

#right-side ul li {

	
	line-height:15px;
	margin-bottom: 10px;

}

#right-side ul li span {
	color:#000;    /*this is the color of the text next to the bullets in the unorderd list in right-side.  this can be set seaprately from the bullet color above*/
	line-height:18px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
}


/*CONVERSION FORM*/

#kwc-form-header {
	width:325px;
	height:34px;
	background:url(../kwc-images/form-header-bg.jpg) transparent repeat-x;  
	margin: 0;
	margin-top: 0px;
}
#kwc-form-header p {
	font-family: tahaoma, arial;
	font-size:16px;
	color:#fff;   /*this is the color of the form header text, "Get Free Quote Now" - change color and other options here if desired*/
	margin-left:20px;
	padding-top:7px;
}
#kwc-form-bg {
	width:350px;
	height:227px;
	background:#f4f9fc;
	margin-top: -12px;
	margin-bottom: 13px;
	filter: alpha(opacity=80);
	opacity:0.8;
	border: solid 1px gray;
}

#kwc-form-bg p {
	color: #FFF;
	margin-top: 0px;
	font-weight: 700;
	height: 26px;
	/*background:#053465; */
	background: url(../img/nav-rpt.jpg) repeat-x transparent;
	margin-bottom: 12px;
	text-align: center;
	vertical-align: middle;
}

/* New Form Fields*/

#contact-area {
	width: 300px;
	margin-top: 0px;
}

/*TESTIMONIALS*/

#kwc-wrapper hr {
	margin:28px 0 4px 0;
	color: #efefef;
}
#kwc-testimonial {  /*the testimonials width and height should not be adjusted.  this div container consists of 2 layers and uses a specific background image*/
	width:201px;
	height:145px;
	background:url(../kwc-images/kwc-testimonial-bg.png) no-repeat;
	position:relative;
	z-index:1;
}
.first {
	float:left;   /*causes first testimonuial to flush to left of kwc wrapper*/
}
.second {
	float:left;
	margin-left:65px;  /*adjust this margin so that the second testimonial appears evenly between the first and last testimonial if necessary.*/
}
.third {
	float:right;   /*causes last testimonial to flush to right of kwc wrapper*/
}
#kwc-testimonial p {   /*this is the text of the testimonials. you may optionally adjust the color and font-size to fit more text if necessary.*/
	padding:17px 10px 10px 12px;
	text-align:left;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#000;
	margin: 0;
}

#kwc-testimonial #testimonial-from {   /*this is the person's name and city for the testimonial*/
	width:237px;
	height:20px;
	position:absolute;
	top:120px;
	left:10px;
	z-index:2;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#000;
}


/*CONTACT INFORMATION*/

#kwc-business-information > div {
	float: left;
}

.group:after {    /*this is for separating elements and should not be modified*/
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
        }
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */


.SEOStatic {
width: 938px;
margin-left: 45px;
margin-right: 17px;

}

.SEOStatic ul li {

list-style-position: outside;

font-family: sans-serif;
font-size: 12px;
font-style: oblique;
margin-left: 285px;
margin-bottom: 10px;
text-indent: 1px;

}

.SEOStatic H1 {
	color: #F7911E;
	font-style: italic;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 17px;
	line-height: 20px;
	margin-bottom: 15px;
}

.SEOStatic p {
	line-height: 17px;
}

#kwc-image-small {
	width:246px;
	height:209px;
	position:relative;
	float: left;
	clear: both;
	margin: 6px;
	margin-right: 31px;
	border:2px solid #999;  /*you may adjust the border of left side here to match the page optionally*/
}

.BeginPara H1{
	font-size: 16px;
	font-family: 

}

.BeginPara {
	margin-left: 10px;
	margin-bottom: 10px;
}

.SEOParaList {
	margin-bottom: 10px;
	margin-left: 10px;
}

.miniSEO{
margin-top: 4px;
font-size: 9px;
color: #cccccc;	
margin-right: 5px;
text-align: right;
}

#wallpaper {
	background: url(http://www.myheartdoc.com/kwc-images/wallpaper.jpg) transparent no-repeat;
	width:1031px;
	margin-left: -35px;
}