/* This file combines three separate css files (campaign-css.css, campaign-1-col.css and tiers-static.css), plus, it adds responsive design */

/* ************************ BEGIN "campaign-1-col.css" content  1******************************** */

body {
	font: 16px Verdana, Arial, Helvetica, sans-serif;
	line-height:26px;
	color:#321111;
	background-color: #F2F2E6;
	margin: 0;
	padding: 0;
	color: #000000;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
	max-width: 600px;
	background-color: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	-moz-box-shadow: 0px 0px 10px #888;
	-webkit-box-shadow: 0px 0px 10px #888;
	box-shadow: 0px 0px 10px #888;
	border: solid 1px #fff;
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
	position:relative;
	background-image: url(../images/header-600-no-phone.gif);
	height: 151px;
	max-width: 600px;
	min-width:375px;
	background-repeat: no-repeat;
	border-bottom: 1px solid #e2e2e2;
}
.content {
	max-width: 570px;
	min-width:375px;
	padding: 30px 15px;
	background-color: #ffffff;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #563085;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #563085;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/



/* ~~ The footer ~~ */
.footer {
	padding: 10px 15px;
	background-color: #a985be;
}
.rightimage{
	float:right;
	display:inline;
	margin:5px 0px 0px 15px;
	width:full;
	height:full;
}
.productimage,.productimagetwo {
	float:right; 
	display:inline; 
	margin:30px 0px 0px 20px;
}
/* Begin newer 3-part-box links */
.bodylink{
	float: left;
	width: 168px;
	margin: 0px 0px 10px 0px;
	min-height: 201px;
}
.bodylink img{
	float: left;
	display:inline;
	margin:0px 0px 10px 0px;
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}
.bodylink p{
	float: left;
	width:170px;
	margin:0px 0px 0px 0px;
	color:#321111;	
	font-size:16px;
	line-height:22px;
	padding:0px;
}
.bodylink a{
	text-decoration:none;
}
.bodylink-hr{
	width: 95.5%;
	float: left;
	margin: 0px 0 15px 15px;
}
.bodylink img:hover{
	opacity:0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
}
/* End newer 3-part-box links */

/* ************************ END "campaign-1-col.css" content  1******************************** */

/* ************************ BEGIN "campaign-css.css" content  1******************************** */

.clear {
  clear: both;
  display: block;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* Begin top header nav, along the bottom of the header graphic */
.phone{
	position: absolute;
    top: 0;
    right: 0;
	height:30px;
	width:223px;
	background-color:#68ba17;
	padding-top:5px;
	margin:5px 20px 0px 0px;
}
.phonep{
	font-family: "PT Sans narrow", sans-serif;
	text-align:center;
	font-size: 16px;
	line-height:18px;
	color:#ffffff;
	padding:0px 0px 0px 0px;
}

.headernav{
	margin-bottom:12px;
	height:23px;
	clear:both;
	position:relative;
	top:122px;
	z-index:888;
}
.ie7 .headernav{
	margin-bottom:20px;
	top:0px;
	}
.headernav ul{
	padding:0px 0 0 150px;
	margin:0px;
	list-style:none;
	position:relative;
}
.headernav ul li{
	display: block;
	float: left;
	font-size: 14px;
	font-weight:normal !important;
	color: #563085;
	padding: 0px 8px 0 8px;
	margin: 0px;
	border-right: #cfc6d0 1px solid;
	position: relative;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.headernav ul li a{
	display:block;
	color:#563085;
	text-decoration:none;
	line-height:23px;
	font-family: 'PT Sans Narrow', sans-serif;
}
.headernav ul li:hover a, .headernav ul li.selected a{
	color:#73a3ad;
}
/* End top header nav */


a{color:#5ca514;text-decoration:none;}
a:hover{color:#b5539a;text-decoration:underline;}

ol{
	margin-left:40px !important;
	margin-bottom:15px;
	font-size:inherit;
	color:#321111;
}
ol li{
	line-height:26px;
	margin:0px 10px 15px 0px;
	font-size:inherit;
	color:#321111;
}

.box1, .box2{
	padding: 20px;
	color: #321132;
	margin: 15px 15px;
	border: 1px solid #cccccc;
	border-bottom-color: #999999;
}
.box1 h3, .box2 h3 {margin-top:10px;}
.box1 {
	background: url(http://www.c-difficile-treatment.com/campaigns/images/purple-gradient-800-white-top.jpg) bottom repeat-x;
}

ul.circle{
	list-style-type:none;
	background:none;
}
ul.circle li{
	background:url(http://www.c-difficile-treatment.com/wordpress/wp-content/uploads/bullet-green.png) 6px 10px no-repeat !important;
	line-height:28px;
	padding-left:25px !important;
	list-style-type:none;
	margin:0 10px 15px 30px;
	font-size:inherit;
	color:#321132;
}

hr {margin:10px 15px;}

.bodytopic {
	width:100%;
	margin:10px 15px;
}
.bodytopic p, .bodytopic h3{
	margin:0px 10px 15px 80px;
}
.bodytopic img{
	float:left;
	display:inline;
	margin-top:4px;
}
.bodytopic img:hover{
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

.boxlink {
	float: left;
	background-color: #f1f7f9;
	width: 120px;
	margin: 0 32px 0 0;
	border: 1px solid #c5d8e8;
	border-bottom-color: #7ba5c6;
}
.boxlink h3 {
	margin:0 0 5px 10px;
	padding-left:13px;
	line-height: 18px;
}

.boxlink p {
	margin:0 0 0 10px;
	line-height: 18px;
}

.left_bg{
background-image:url('../../images/left.jpg');
background-repeat:repeat;
}

.right_bg{
background-image:url('../../images/right.jpg');
background-repeat:repeat-y;
}

.shadow{
background-image:url('../../images/shadow.jpg');
background-repeat:repeat;
}

.menubg{
background-image:url(../../images/menu_bg.jpg);
background-position:top;
background-repeat:repeat-x;
height:40px;
font: bold 11px Tahoma;
color: #FFFFFF;
text-decoration:none;
vertical-align:middle;
}

.topmenu{
	font: bold 11px Arial;
	color: #FFFFFF;
	text-decoration:none;
	padding-left:8px;
	padding-right:8px;
}

.topmenu:hover{
	font: bold 11px Arial;
	color: #000000;
	text-decoration:none;
}

.menu{
	font: 14px Arial;
	color: #000000;
	text-decoration:none;
	padding-left:8px;
}

.menu:hover{
	font: 14px Arial;
	color: #b5539a;
	text-decoration:none;
}

#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.link{
font: bold 16px Arial;
color:#000080;
text-decoration:underline;
}

.link:hover{
font: bold 16px Arial;
color:#FF0000;
text-decoration:none;
}

h1,h2,h3,h4,h5{
font-family: 'PT Sans Narrow', sans-serif;}
h1{color:#5ca514;font-size:30px;line-height:36px;margin:10px 0 25px 0;}
h2{font-size:26px;color:#563085;line-height:32px;margin:35px 0 20px 0;}
h3{font-size:24px;color:#563085;line-height:30px;margin:30px 0 15px 0;}
h4{font-size:18px;color:#563085;line-height:26px;margin:25px 0 15px 0;}

h1, h2, h3, h4, h5, h6, p {
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}

.bigheadgreen{
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 36px;
	color: #5ca514;
	line-height: 42px;
	margin: 30px 0 15px 15px;
}

.boldgreen{
	color:#5ca514 !important;
	font-weight:bold;
}

.bodytext{
	color:#321111;
	text-decoration:none;
	line-height:20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.bodytextsmall {
	color:#321111;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
}

.bodytextsmallest {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
}

.boldgreen{
	color:#563085;
	font-weight:bold;
}


/* ************************ END "campaign-css.css" content  1******************************** */



/* ************************ BEGIN "tiers-static.css" content  1******************************** */

/* Tiered Pricing */

.tiers {
	min-height: 420px;
	width: 100%;
	margin:10px auto;
}

.tier-one, .tier-two, .tier-three {
	float:left;
	padding:5px 0px 5px 0px;
	border-radius:10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	width:185px;
	text-align: center;
}
.tier-one {
	background: url(http://www.c-difficile-treatment.com/wordpress/wp-content/uploads/purple-gradient-800.jpg) bottom repeat-x;
	border:1px #c3c3c3 solid;
	min-height:385px;
	margin:15px 5px 10px 0px;
	background-color:#ffffff;
}
.tier-two {
	border:none;
	min-height:395px;
	margin:0px 5px 10px 0px;
	background-color:#6fab34;
	padding-top:20px;
}
.tier-three {
	background: url(http://www.c-difficile-treatment.com/wordpress/wp-content/uploads/purple-gradient-800.jpg) bottom repeat-x;
	border:1px #c3c3c3 solid;
	min-height:385px;
	margin:15px 0px 10px 0px;
	background-color:#ffffff;
}
.centerit {
	width:100%;
	height:95px;
}

.tier-one h1, .tier-two h1, .tier-three h1, .tier-one h2, .tier-two h2, .tier-three h2, .tier-one h3, .tier-two h3, .tier-three h3, .tier-one h4, .tier-two h4, .tier-three h4, .tier-one h5, .tier-two h5, .tier-three h5 {
	font-family: "PT Sans", Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	margin-bottom:0px;
	min-width:90%;
}
.tier-one h1, .tier-two h1, .tier-three h1 {
	font-family: 'PT Sans Narrow', sans-serif;
	font-stretch: condensed; /* for Firefox */
	font-size: 20px;
	margin-top: 5px;
}
.tier-one h1, .tier-three h1 {
	color: #333333;
}
.tier-two h1 {
	color: #ffffff;
}

.tier-one h2, .tier-two h2, .tier-three h2 {
	font-size: 10px;
	line-height: 12px;
	margin-top:5px;
	margin-bottom:5px;
}
.tier-one h2, .tier-three h2 {
	color: #9B9B9B;
}
.tier-two h2 {
	color: #DBDBDB;
}

.tier-one h3, .tier-two h3, .tier-three h3 {
	font-family: 'PT Sans Narrow', sans-serif;
	font-stretch: condensed; /* for Firefox */
	font-size: 22px;
	line-height:22px;
	margin-top:13px;
}
.tier-one h3, .tier-three h3 {
	color: #9B9B9B;
}
.tier-two h3 {
	color: #DBDBDB;
}

.tier-one h4, .tier-two h4 {
	font-size: 28px;
	text-decoration:underline;
	margin-top:5px;
}
.tier-one h4, .tier-three h4 {
	color: #6fab34;
}
.tier-two h4 {
	color: #ffffff;
}
.tier-three h4 {
	font-size: 26px;
	text-decoration:underline;
	margin-top:2px;
}

.tier-one h5, .tier-two h5,  {
	font-size: 11px;
	margin-top:10px;
}
.tier-one h5, .tier-three h5 {
	color: #9B9B9B;
}
.tier-two h5 {
	color: #ffffff;
}
.tier-three h5 {
	font-size: 11px;
	margin-top:1px;
}

.action-one, .action-two {
	height: 45px;
	min-width: 75%;
	border: #c3c3c3 solid 1px;
}
.action-one {
	margin: 10px 15px 10px 15px;
	background-color: #6fab34;
}
.action-two {
	margin: 10px 15px 20px 15px;
	background-color: #97D05F;
}

.action-one:hover, .action-two:hover {
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}
.tier-one a, .tier-two a, .tier-three a, .tier-one.selected a, .tier-two.selected a, .tier-three.selected a  {
	text-decoration:none;
}

.action-one p, .action-two p {
	font-family: "PT Sans", Helvetica, sans-serif;
	font-weight: bold;
	font-size: 15px;
	line-height: 17px;
	text-align: center;
	margin-top: 5px;
	color: #FFFFFF;
}

/* END Tiered Pricing */




/* ********************************************** RESPONSIVE DESIGN  ************************************************** */

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

body {
	font-size: 14px;
	line-height:23px;
}
h1{font-size:26px;line-height:30px;}
h2{font-size:24px;line-height:28px;}
h3{font-size:20px;line-height:26px;}
h4{font-size:16px;line-height:24px;}

.rightimage{
	margin:5px 0px 0px 10px;
	width:35%;
	height:35%;
}
.productimage {
	float:right; 
	display:inline; 
	margin:30px 0px 0px 10px;
	width:25%;
	height:25%;
}
.productimagetwo {
	float:right; 
	display:inline; 
	margin:30px 0px 0px 10px;
	width:45%;
	height:45%;
}
.bigheadgreen{
	font-size: 30px;
	line-height: 40px;
}
.bodylink p{
	font-size:15px;
	line-height:20px;
}

.content {
	min-width: 95%;
	padding: 30px 15px 30px 15px;
}
.header {
	background-image: url(../images/header-600-responsive-design.gif);
	height: 175px;
	width: 100%;
	background-repeat: no-repeat;
	border-bottom: 1px solid #e2e2e2;
}
.headernav {
	margin-bottom:12px;
	height:75px;
}
.headernav ul{
	padding-left:130px;
}
.box1, .box2{
	padding: 10px;
	margin: 15px 15px;
}
.tier-one, .tier-two, .tier-three {
	float:left;
	padding:5px 0px 15px 0px;
	border-radius:10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	text-align: center;
}
.tier-one {
	background: url(http://www.c-difficile-treatment.com/wordpress/wp-content/uploads/purple-gradient-800.jpg) bottom repeat-x;
	border:1px #c3c3c3 solid;
	min-height:185px;
	margin:15px 0px 6px 70px;
	background-color:#ffffff;
	width:65%;
}
.tier-two {
	border:none;
	min-height:195px;
	margin:15px 0px 6px 50px;
	background-color:#6fab34;
	padding-top:20px;
	width:75%;
}
.tier-three {
	background: url(http://www.c-difficile-treatment.com/wordpress/wp-content/uploads/purple-gradient-800.jpg) bottom repeat-x;
	border:1px #c3c3c3 solid;
	min-height:185px;
	margin:15px 0px 10px 70px;
	background-color:#ffffff;
	width:65%;
}
.action-one, .action-two {
	min-width: 150px;
	max-width:65%;
	margin:0 auto;
}
ul.circle li{
	line-height:22px;
}
}


@media screen and (max-width:450px){
body {
	line-height:21px;
}
h1{font-size:24px;line-height:28px;}
h2{font-size:21px;line-height:24px;}
h3{font-size:19px;line-height:21px;}
h4{font-size:15px;line-height:20px;}
.headernav ul{
	padding-left:20px;
}
.rightimage{
	margin:5px 0px 0px 5px;
	width:38%;
	height:38%;
}
.productimage {
	margin:30px 0px 0px 5px;
	width:25%;
	height:25%;
}
.productimagetwo {
	margin:30px 0px 0px 5px;
	width:45%;
	height:45%;
}
.bigheadgreen{
	font-size: 27px;
	line-height: 32px;
}
.bodylink p{
	line-height:18px;
}
.box1, .box2{
	padding: 5px;
	margin: 15px 15px;
}
.phone{
	height:25px;
	width:195px;
	padding-top:5px;
	margin:5px 10px 0px 0px;
}
.phonep{
	font-size: 15px;
	line-height:16px;
	padding:0px 0px 0px 10px;
}

ul.circle li{
	line-height:20px;
}
}

/* ************************ END "tiers-static.css" content  1******************************** */