/*  
Website: Running Race Promotions
Description: general theme
Author URI: ipacktechnolgies.com
*/

/* ======================================== Generic elements =================================================================  */

body{ margin:0px; padding:0px;font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#646464; }

h1, h2, h3, h4, h5, h6, h7, p, form, input, ul, li{padding:0px; margin:0px; font-weight:normal}
p{line-height:17px}
ul,ol { list-style: none; }
input, select, textarea{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#646464}
a{color:#1a525e; text-decoration:none; outline:none}
a:hover{color:#000; text-decoration:underline}
a img{border:0}

.clear{ clear:both;}


#wrapper:after,#header:after,#middle:after, #footer:after, .content:after, .data:after{ content: "."; display: block; height:0; font-size:0px; clear: both; visibility: hidden; }


/* \*/ * html #header{height:1px} /* */
/* \*/ * html #middle{height:1px} /* */
/* \*/ * html #footer{height:1px} /* */
/* \*/ * html .content{height:1px} /* */
/* \*/ * html .data{height:1px} /* */


.colleft{float:left; width:auto }
.colright{float:right;width:auto}

.right{text-align:right}
.center{text-align:center}

.content{width:auto;}
.data{width:100%;}	
.msg{color:#cc0000}

h1{font-size:32px; font-weight:bold; padding:0px 0px 3px;font-family:Georgia, "Times New Roman", Times, serif; letter-spacing:-1px}
h2{font-size:24px; padding:0 0 5px;font-family:Georgia, "Times New Roman", Times, serif; }
h3{font-size:18px;padding:0 0 5px;font-family:Georgia, "Times New Roman", Times, serif; }
h4{font-size:16px; color:#1a525e; font-weight:bold;padding:0 0 5px; }
h5{font-size:12px; font-weight:bold; margin:0 0 5px}

h2 a, h4 a{ text-decoration:underline }

p{ padding:0 0 10px}



/* ======================================== Wrapper =================================================================  */

#wrapper{ width:100%; height:auto; margin:0 auto; background:url(../images/background.gif) repeat-x left top}


/* ======================================== Header ==========================================================  */

/* ---------------- Header Container-------------- */

#header-container{ width:100%;height:auto;}
#header{ width:980px; padding:0px; margin:0 auto;  background:url(../images/headerBg.gif) no-repeat 0 20px }

/* ---------------- Header Logo -------------- */

#logo{ float:left; width:420px;padding:21px 0 0;}
#logo h1{ font-size:0px;}
#logo h1 a{ float:left; display:block;width:415px;height:103px;text-indent:-9999px}

#header-right{ float:left; width:560px;}

/* ---------------- search -------------- */
.search{float:right; width:185px; padding:24px 0px 0px 0px;}
.search input.search-bg{float:left; padding:5px 5px 0px 12px;width:105px;height:23px; border:none;  background:white url(../images/search-bg.gif) no-repeat 0px 0px;}

.btn-search{ display:block; float:left; height:32px; width:31px; margin:0px 6px 0px 0px; color:#FFFFFF;font-size:0px; text-indent:-9999px;background:url(../images/search-btn.gif) no-repeat 100% 0px}
.hover.btn-search{display:block; background-position:0px -32px;height:32px; padding:0px;  margin:0px 6px 0px 0px;}
.follow-us{ position:absolute;width:90px; padding:8px 0px 5px 5px; margin:20px 10px 0 280px; height:16px;font-size:10px;color:#f1f1f1; }
.follow-us span,.follow-us img{ display:block; float:left; padding-right:5px; line-height:17px}



/* ---------------- top-links -------------- */

ul.top-links {margin:0px; padding:0px 22px 0px 0; text-align:right; font-size:14px }
ul.top-links li {display:inline;margin:0px; padding:0px; }
ul.top-links li a{ color:#f3f7f7; font-size:11px; padding-left:20px}
ul.top-links li a:hover{ color:#f3f7f7;}

ul.top-links li span.phone{color:#f3f7f7; font-size:11px; padding-left:20px; background:url(../images/phone-icon.gif) no-repeat 0 50%}
ul.top-links li a.email{ background:url(../images/email-icon.gif) no-repeat 0 50%}

/* ---------------- menubar -------------- */

#menubar { width:98%; margin-top:60px }
ul.topmenu {margin:0px; padding:10px 0 0px 5px; font-size:14px }
ul.topmenu li {display:inline;margin:0px; padding:0px; }
ul.topmenu a {float:left;width:auto;margin:0 2px 0 0;padding:0 0 0 15px; color:#fff; text-decoration:none }
ul.topmenu a span {float:left;width:auto; cursor:pointer;display:block;font-weight:bold; text-transform:uppercase; padding:9px 13px 9px 0px;}


ul.topmenu li a:hover, ul.topmenu li a.selected,ul.topmenu li a.selected:hover{ background:url("../images/menu-left.gif") no-repeat left top; text-decoration:none}
ul.topmenu li a:hover span,ul.topmenu li a.selected span,ul.topmenu li a.selected:hover span{ background:url("../images/menu-right.gif") no-repeat right top; color: #fff;}


/* ---------------- Drop Down Menu -------------- */

.dropmenudiv{position:absolute;top: 0;border:0;line-height:18px;z-index:100;width: 150px;visibility: hidden;background:#45b1bd}
.dropmenudiv a{width: auto;display: block;text-indent: 6px;border-bottom: 1px solid #d8fbff; /*THEME CHANGE HERE*/
padding: 5px 0;text-decoration: none;font-weight: bold;color:#fff}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;}
.dropmenudiv a:hover{ background-color: #F0F0F0;color:#000;text-decoration:none}


/* =================================== Middle Container Structure ====================================================  */

#middle-container{ width:100%; height:auto; padding:0px; background:url(../images/middleBg.gif) repeat-x left top}
#middle{ width:980px; padding:0; margin:0px auto 15px;}

/* ----------------  mainBanner -------------- */
	
#mainBanner{ width:100%;padding:20px 0 18px; margin:0;}
#mainBanner .intropara{ float:left; width:370px;padding:0px 15px; margin:0px; height:285px;}
#mainBanner h1{ font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; font-size:30px; color:#fff; line-height:36px}
#mainBanner h1 span{ font-size:24px;}
#mainBanner h1 strong{ font-size:34px; font-weight:normal}
#mainBanner .green{ color:#45bfd0; margin-bottom:10px}
#mainBanner h2 span{ font-size:18px;}


#mainBanner .slideshow{ float:left;width:580px;}
#mainBanner .slideshow img{ display:block}



/* ----------------  online register page -------------- */


#middle-container.register{ width:100%; height:auto; padding:0px; background:url(../images/register-middleBg.gif) repeat-x left top}
#middle-container.register #mainBanner{background:url(../images/banner-divider.gif) no-repeat 228px -2px}

#mainBanner .colleft{width:200px;padding:0px 10px; height:355px;color:#45bfd0; font-size:14px; }
#mainBanner .colright{width:720px;padding:0px 10px;}

#mainBanner .colright h2{ font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; font-size:24px; color:#45bfd0; line-height:36px}
#mainBanner .colright h2 span{ color:#fff}

#mainBanner ul{ padding:10px 0 20px}
#mainBanner ul li{ font-family:Georgia, "Times New Roman", Times, serif; font-size:24px; color:#fff; line-height:36px; background:url(../images/arrow.gif) no-repeat 0 8px; padding:0 0 10px 42px}

#mainBanner .para{ float:left; width:370px; background:url(../images/curve.gif) no-repeat right top; padding:0 30px 0 0}
#mainBanner .para p{font-size:16px; line-height:22px; color:#fff;}
#mainBanner .para-right{ float:left; width:305px; color:#fff; font-size:14px;padding:0 0 0 10px}

#mainBanner .colleft img{ display:block; padding:3px; margin-bottom:10px; border:1px solid #ddd; background:#fff}



/* ----------------  mainBanner -------------- */
	
#services{ width:980px;padding:0px; margin:0px; height:126px;}
#services ul{list-style:none; width:auto; float:left;background:url(../images/divider.gif) no-repeat left top}
#services li{float:left;width:auto;margin:0;padding:0; background:url(../images/divider.gif) no-repeat right top}
#services li a{display:block;padding:0px 28px;height:124px; margin-right:2px; text-indent:-9999px}

#services li a.graphics{width:94px; background:url(../images/graphic-webdesign.gif) no-repeat 50% 0}
#services li a.list-acquisition{width:121px; background:url(../images/list-acquisition.gif) no-repeat 50% 0}
#services li a.email-blasts{width:99px; background:url(../images/email-blasts.gif) no-repeat 50% 0}
#services li a.printing-mailing{width:136px; background:url(../images/printing-mailing.gif) no-repeat 50% 0}
#services li a.seo-ppc{width:89px; background:url(../images/seo-ppc.gif) no-repeat 50% 0}
#services li a.extra{width:89px; background:url(../images/extra.gif) no-repeat 50% 0}


/* =================================== middle-section ====================================================  */

#middle-section{ width:100%; padding:24px 0 0;}
#main{ float:left;width:570px; padding:0px;}
#right-sidebar{ float:right;width:392px;}




/* ----------------  contentBox -------------- */

.contentBox{ background:#fff; border:1px solid #ddd; margin:0px 0px 10px}
.contentBox .content{ padding:10px 15px}
.contentBox h1.heading{ color:#1a535e; margin-bottom:15px;font-weight:normal; background:url(../images/dotline.gif) repeat-x left bottom}
.contentBox h1.heading span{ color:#000; font-style:italic}
.contentBox h2.heading{ color:#ff860a; margin-bottom:5px }


.contentBox .photo{ float:left;width:210px}
.contentBox .photo img{ display:block; padding:3px; border:1px solid #ddd;}
.contentBox .details{ float:left;width:328px;}

.highlight{ background:#dff2f1; color:#000; padding:10px; font-family:Georgia, "Times New Roman", Times, serif}
.highlight h2{font-weight:normal; font-size:20px;}
.highlight h3{ margin:0!important}

.highlight em{font-weight:normal; font-size:20px; text-align:right}
.highlight p{font-weight:normal; font-size:13px; font-style:italic;}



/* ----------------  inline list -------------- */

ul.list{ margin:10px 0 10px}
ul.list li{ color:#fff; display:inline; font-size:12px; background:url(../images/arrow-more.gif) no-repeat 0 3px; padding:0 6px 6px 8px}


/* ----------------  listing -------------- */

ul.listing{ margin:0px 0 10px}
ul.listing li{font-size:14px; background:url(../images/list-bullet.gif) no-repeat 0 3px; padding:0 0 6px 22px}
ul.listing li a{text-decoration:underline}


/* =================================== right-sidebar ====================================================  */


/* ----------------  greenBox -------------- */
.greenBox{ background:#449090; color:#fff; width:100%; margin:0 0 15px}
.greenBox .content{ padding:20px}
.greenBox h2, .greenBox h3, .greenBox h4, .greenBox em{ margin-bottom:15px}
.greenBox em{ font-size:13px; font-weight:bold; margin-bottom:12px }
.greenBox a{color:#fff; text-decoration:underline}

.greenBox h2.heading{ font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; background:url(../images/green-dotline.gif) repeat-x left bottom;margin-bottom:15px;}

/* ---------------- picframe -------------- */
.greenBox .picframe{ background:#dff2f1; color:#000; padding:10px; margin-top:10px}
.greenBox .picframe img{ display:block; background:#dff2f1; border:2px solid #fff;}



/* ----------------  quotes -------------- */
.quotes{background:url(../images/quote-left.gif) no-repeat left top; font-style:italic; font-family:Georgia, "Times New Roman", Times, serif; padding:0px 0px 0px 35px; line-height:28px}
.quotes h3{margin-bottom:5px}
.quotes img{vertical-align:bottom; margin-left:6px}



/* ---------------- checklist -------------- */
ul.checklist{ margin:10px 0 0}
ul.checklist li{ color:#fff; font-size:14px; background:url(../images/tick-bullet.gif) no-repeat 0 3px; padding:0 0 6px 22px}





/* ----------------  banner -------------- */
.banner{margin:0px}
.banner img, .photobrd{ display:block;margin:0 auto; padding:3px; background:#fff; border:1px solid #a1c7c8}

.banner-director{ margin:10px 0 0;color:#fff; text-align:center;background:url(../images/banner-bg.gif) no-repeat 3px 3px; height:145px; width:329px; padding:12px 30px 4px; border:1px solid #a1c7c7}
.banner-director h3{ color:#fff; font-size:20px}



/* ----------------  purchase form -------------- */

.purchase-form{width:auto; margin-top:5px; padding:20px 10px 0px; background:#F3F3F3}
.purchase-form .section{width:100%; padding:0px 0px 15px; }
.purchase-form h3{ font-size:18px; padding:5px 10px 5px;height:20px; line-height:20px; margin-bottom:15px; color:#FFFFFF; font-weight:bold;background:#449090;}

.field-row{ clear:left;width:100%; padding:0px; margin-bottom:6px}
.field-row:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0px; }
/* \*/ * html .field-row{height:1px} /* */


.purchase-form .field-row .field-label{width:146px; float:left; font-weight:bolder; padding:5px 0px 0px; margin:0px 5px 0px 10px}
.purchase-form .field-row .field-data, .purchase-form .field-row .data{width:341px; float:left}
.purchase-form .text-box, .purchase-form .select-box, .purchase-form .radio-btn,.purchase-form strong, .purchase-form span{float:left; margin-right:5px}

.purchase-form .text-box, .purchase-form .select-box{ width:215px; padding:4px 2px;border-top:2px solid #CCCCCC; }
.purchase-form .textarea-box{ width:300px; height:80px;  padding:4px 2px; border-top:2px solid #CCCCCC; }

.purchase-form .text-box.small{ width:56px}
.purchase-form .text-box.big{ width:300px}
.purchase-form .text-box.mid{ width:91px}

.purchase-form .select-box.big{ width:245px}
.purchase-form .select-box.small{ width:60px}
.purchase-form br{clear:left}

.button{ text-align:center; padding:10px 0px 0px}


/* rounded buttons */
.submit-btn {
	cursor:pointer; 
	line-height:37px;
	background:url(../images/button.gif) no-repeat right top; 
	padding-right:20px; 
	vertical-align:middle;
	display:block; /*opera*/
	display:inline-block; /*ie*/
	text-decoration:none!important
}

.submit-btn span { 
	background:url(../images/button.gif) no-repeat left top; 
	height:37px;
	color:#FFFFFF;
	font-weight:bold;
	font-size:18px;
	display:block;
	display:inline-block;
	padding-left:20px; line-height:37px;	
	text-decoration:none
}

	a.submit-btn:hover {background-position:right -37px;color:#fff; text-decoration:none}
	a.submit-btn:hover span {background-position:left -37px; color:#fff; text-decoration:none }

/* ----------------  contact-form -------------- */

#contact-form { padding:18px; background:#fff}
#contact-form label{ float:left; display:block; color:#333; width:70px; margin:3px 0 3px; font-size:13px;  font-weight:bold; } 
#contact-form label.row{ width:400px } 

#contact-form input.text {float:left; width:230px; line-height:15px; color:#000; padding:3px 2px; border-top:2px solid #CCCCCC; margin-bottom:9px}
#contact-form input.mid{float:left; width:110px;}
#contact-form label.mid{float:left; width:85px;}
#contact-form label.big{float:left; width:125px;}

#contact-form span{float:left; font-size:11px; width:100px; padding:6px 0 0 5px; color:#666}

#contact-form textarea {float:left; width:300px; height:70px; padding:5px;  margin-bottom:7px; color:#000; padding:4px 2px; border-top:2px solid #CCCCCC;overflow:auto;}
#contact-form br{clear:both}




/* ==============================================  Footer   ===========================================================  */

#footer-container{	width:100%;	height:auto;padding:0px; margin:0;background:url(../images/footerBg.gif) repeat-x left top;}
#footer{ width:980px; padding:12px 0px 10px; margin:0 auto}
#footer .footer-left{ float:left;width:700px; }
#footer .footer-right{ float:right;width:auto; padding:4px 0 0}
#footer h1{ font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; font-size:26px; color:#f3f7f7; line-height:36px; padding-left:8px}
#footer ul li{display:inline; line-height:22px; color:#e6eded}
#footer ul li a{padding:0px 8px; font-weight:bold; color:#e6eded }
#footer ul li a:hover{color:#e6eded; text-decoration:underline }
#footer .copyright{ font-size:12px; color:#999;margin-top:6px; padding:0px 0px 0px 10px;}
#footer .copyright a{  padding:0px 6px}