BODY{
  margin:0px;
  font-size:11pt;
  font-family:open_sansregular; color:#000000;
  height:100%;
}
.benefit-works {
  /*border-top: 10px solid #00933B;
  border-bottom: 10px solid #00933B;
  border-left: 10px solid #FDFFFE;
  border-right: 10px solid #FDFFFE;*/
  background: url(../images/hedge-bg.jpg);
  /*background-size: 70px;*/
  padding: 30px;
  border-radius: 0px;
}
.benefit-box-works:after {
content: '';
  position: absolute;
  background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(135deg, #ec173a 5px, transparent 0) 0 5px;
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
  width: 10px;
  height: 100%;
  right: -10px;
 }
.benefit-box-works {
  padding: 20px;
  /*border: 1px solid black;*/
  border-radius: 0px;
  background: white;
}
.outerContainer {
    display: table;

}

.question {
    background: #fff;
    padding: 15px;
    border-left: 5px solid #fff;
    margin-bottom:10px;
}
.question_q {
    font-size: 28px;
    padding: 10px 10px 10px 0px;
    font-weight: bold;
    color: #CC0000;
}
.answer {
    background: #ffff;
    padding: 15px;
    border-left: 5px solid #fff;
    margin-bottom:30px;
}
.answer_a {
    font-size: 28px;
    padding: 10px 10px 10px 0px;
    font-weight: bold;
    color: #009900;
}
.benefit-outside-small {
  /*border: 1px solid black;*/
  border-radius: 30px;
  box-shadow: 0px 0px 15px #444444;
  margin: 40px auto;
  margin-bottom: 80px;

}
.benefit-outside {
  /*border: 1px solid black;*/
  /* border-radius: 60px; */
  box-shadow: 0px 0px 15px #444444;
  margin: 40px auto;
  margin-bottom: 80px;

}
.benefit-square-outside {
  /*border: 1px solid black;*/
  /* border-radius: 60px; */
  box-shadow: 0px 0px 15px #444444;
  margin: 40px auto;
  margin-bottom: 80px;

}
.guarantee-outside {
  /*border: 1px solid black;*/
  /* border-radius: 60px; */
  box-shadow: 0px 0px 15px #444444;
  margin: 40px auto;
  margin-bottom: 80px;
}
.johnsontop-guarantee {
  /*border-top: 10px solid #00933B;
  border-bottom: 10px solid #00933B;
  border-left: 10px solid #FDFFFE;
  border-right: 10px solid #FDFFFE;*/
  /* background: url(../images/grass.jpg); */
  border: 50px;
  border-image: url(../images/cert-border.gif) 50 repeat;
  /* background-size: 70px; */
  padding: 10px;
  /* border-radius: 60px; */

}
.guarantee-box {
  padding: 40px;
  /*border: 1px solid black;*/
  /* border-radius: 50px; */
  background: white;
}

.benefit-square-box {
  padding: 40px;
  /*border: 1px solid black;*/
  /* border-radius: 50px; */
  box-shadow: inset 0px 0px 0px #000;
  background: white;
}
.gold-benefit-small {
  /*border-top: 10px solid #00933B;
  border-bottom: 10px solid #00933B;
  border-left: 10px solid #FDFFFE;
  border-right: 10px solid #FDFFFE;*/
  background: url(../images/gold-bg.jpg);
  /*background-size: 70px;*/
  padding: 10px;
  border-radius: 30px;
}
.gold-benefit-box-small {
  padding: 20px;
  /*border: 1px solid black;*/
  border-radius: 20px;
  background: #FFF;
}
.gold-benefit {
  /*border-top: 10px solid #00933B;
  border-bottom: 10px solid #00933B;
  border-left: 10px solid #FDFFFE;
  border-right: 10px solid #FDFFFE;*/
  background: url(../images/gold-bg.jpg);
  /*background-size: 70px;*/
  padding: 20px;
  border-radius: 60px;
}
.gold-benefit-box {
  padding: 40px;
  /*border: 1px solid black;*/
  border-radius: 50px;
  background: #FFF;
}

.platinum-benefit {
  /*border-top: 10px solid #00933B;
  border-bottom: 10px solid #00933B;
  border-left: 10px solid #FDFFFE;
  border-right: 10px solid #FDFFFE;*/
  background: url(../images/chrome-bg.jpg);
  /*background-size: 70px;*/
  padding: 20px;
  border-radius: 60px;
;
}
.platinum-benefit-box {
  padding: 40px;
  /*border: 1px solid black;*/
  border-radius: 50px;
  background: #FFF;
}

.diamond-benefit {
  /*border-top: 10px solid #00933B;
  border-bottom: 10px solid #00933B;
  border-left: 10px solid #FDFFFE;
  border-right: 10px solid #FDFFFE;*/
  background: url(../images/diamond-border.jpg);
  /*background-size: 70px;*/
  padding: 20px;
  border-radius: 60px;
;
}
.diamond-benefit-box {
  padding: 40px;
  /*border: 1px solid black;*/
  border-radius: 50px;
  background: #FFF;
  box-shadow: inset 0px 0px 15px #000;
}
.diamond-benefit-outside {
  /*border: 1px solid black;*/
  border-radius: 60px;
  box-shadow: inset 0px 0px 15px #444444;
  margin: 40px auto;
  margin-bottom: 80px;

}
.johnsontop-square-benefit {
  /*border-top: 10px solid #00933B;
  border-bottom: 10px solid #00933B;
  border-left: 10px solid #FDFFFE;
  border-right: 10px solid #FDFFFE;*/
  background: url(../images/grass1.jpg);
  background-size: 100px;
  padding: 10px;
  /* border-radius: 60px; */

}
.johnsontop-benefit {
  /*border-top: 10px solid #00933B;
  border-bottom: 10px solid #00933B;
  border-left: 10px solid #FDFFFE;
  border-right: 10px solid #FDFFFE;*/
  background: url(../images/grass.jpg);
  background-size: 70px;
  padding: 10px;
  /* border-radius: 60px; */

}

.benefit-outside2 {
  /*border: 1px solid black;*/
  border-radius: 60px;
  box-shadow: 0px 0px 15px #444444;
  margin: 40px auto;

}

.benefit-box2 {
  padding: 40px;
  /*border: 1px solid black;*/
  border-radius: 50px;
  background: white;
}

.johnsontop-benefit2 {
  border-radius: 60px;
  border-top: 10px solid #00933B;
  border-bottom: 10px solid #00933B;
  border-left: 10px solid #FDFFFE;
  border-right: 10px solid #FDFFFE;
}

img.benefit-corner {
	float:left;
	margin-top: -80px;
	margin-left: -80px;
	padding-right: 30px;
	padding-bottom: 30px;
    height: 140px;
}

.image-box-shadow {
-webkit-box-shadow: 3px 3px 5px 0px rgba(135,128,135,1);
-moz-box-shadow: 3px 3px 5px 0px rgba(135,128,135,1);
box-shadow: 3px 3px 5px 0px rgba(135,128,135,1);
}
.CSSTableGenerator {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #ffffff;
    text-align:center;

	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;

	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;

	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;

	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{

}
.CSSTableGenerator tr:nth-child(odd){ background-color:#ffc9c9; }
.CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
	vertical-align:middle;


	border:1px solid #ffffff;
	border-width:0px 1px 1px 0px;
	/* text-align:left; */
	padding:7px;
	/* font-size:10px;*/
	font-family:Arial;
	font-weight:bold;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
    text-align:center;
}.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
		background:-o-linear-gradient(bottom, #ff0000 5%, #bf0000 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff0000), color-stop(1, #bf0000) );
	background:-moz-linear-gradient( center top, #ff0000 5%, #bf0000 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#bf0000");	background: -o-linear-gradient(top,#ff0000,bf0000);

	background-color:#ff0000;
	border:0px solid #ffffff;
	text-align:center;
	border-width:0px 0px 1px 1px;
	/* font-size:14px; */
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #ff0000 5%, #bf0000 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff0000), color-stop(1, #bf0000) );
	background:-moz-linear-gradient( center top, #ff0000 5%, #bf0000 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#bf0000");	background: -o-linear-gradient(top,#ff0000,bf0000);
    text-align:center;
	background-color:#ff0000;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}
.image-box-shadow {
-webkit-box-shadow: 3px 3px 5px 0px rgba(135,128,135,1);
-moz-box-shadow: 3px 3px 5px 0px rgba(135,128,135,1);
box-shadow: 3px 3px 5px 0px rgba(135,128,135,1);
}

/* ============================================================================================================================
== BLOCKQUOTE WITH OBTUSE TRIANGLE
** ============================================================================================================================ */

.example-obtuse {
  position:relative;
  padding:15px 30px;
  margin:0;
  color:#000;
  background:#CCF2FF; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#E5F8FF), to(#CCF2FF));
  background:-moz-linear-gradient(#E5F8FF, #CCF2FF);
  background:-o-linear-gradient(#E5F8FF, #CCF2FF);
  background:linear-gradient(#E5F8FF, #CCF2FF);
  /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
  -webkit-border-top-left-radius:50px 50px;
  -webkit-border-top-right-radius:50px 50px;
  -webkit-border-bottom-right-radius:50px 50px;
  -webkit-border-bottom-left-radius:50px 50px;
  -moz-border-radius:50px / 50px;
  border-radius:50px / 50px;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-obtuse + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}

/* creates the larger triangle */
.example-obtuse:before {
  content:"";
  position:absolute;
  bottom:-30px;
  right:80px;
  border-width:0 0 30px 50px;
  border-style:solid;
  border-color:transparent #CCF2FF;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller triangle */
.example-obtuse:after {
  content:"";
  position:absolute;
  bottom:-30px;
  right:110px;
  border-width:0 0 30px 20px;
  border-style:solid;
  border-color:transparent #fff;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.example-obtuse-left {
  position:relative;
  padding:15px 30px;
  margin:0;
  color:#000;
  background:#CCF2FF; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#E5F8FF), to(#CCF2FF));
  background:-moz-linear-gradient(#E5F8FF, #CCF2FF);
  background:-o-linear-gradient(#E5F8FF, #CCF2FF);
  background:linear-gradient(#E5F8FF, #CCF2FF);
  /* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
  -webkit-border-top-left-radius:50px 50px;
  -webkit-border-top-right-radius:50px 50px;
  -webkit-border-bottom-right-radius:50px 50px;
  -webkit-border-bottom-left-radius:50px 50px;
  -moz-border-radius:50px / 50px;
  border-radius:50px / 50px;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-obtuse-left + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}

/* creates the larger triangle */
.example-obtuse-left:before {
  content:"";
  position:absolute;
  bottom:-30px;
  left:80px;
  border-width:0 40px 30px 0;
  border-style:solid;
  border-color:transparent #CCF2FF;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller triangle */
.example-obtuse-left:after {
  content:"";
  position:absolute;
  bottom:-30px;
  left:100px;
  border-width:0 20px 30px 0;
  border-style:solid;
  border-color:transparent #fff;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
  position:relative;
  padding:10px;
  margin:1em 0 3em;
  border:3px solid #CCF2FF;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
  margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
  margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:18px 18px 0;
  border-style:solid;
  border-color:#CCF2FF transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:15px 15px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
  top:-20px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:40px; /* controls horizontal position */
  border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
  top:-13px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
  border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 30px 15px 0;
  border-color:transparent #CCF2FF;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 21px 9px 0;
  border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:auto;
  right:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 0 15px 30px;
  border-color:transparent #CCF2FF;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:auto;
  right:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 0 9px 21px;
  border-color:transparent #fff;
}
.boxer-gold {
    margin-top: 60px;
    margin-bottom: 50px;
    box-shadow:
	0 0 0 2px #000,
	0 0 0 3px #999,
	0 0 0 9px #fa0,
	0 0 0 10px #666,
	0 0 0 16px #fd0,
	0 0 0 18px #000,
	0 2px 6px 18px rgba(0,0,0,0.5);
    background-color: #FFFFCC;
}
.boxer-platinum {
    margin-top: 40px;
    margin-bottom: 50px;
    box-shadow:
	0 0 0 2px #000,
	0 0 0 3px #999,
	0 0 0 9px #CCF1FF,
	0 0 0 10px #666,
	0 0 0 16px #E5F8FF,
	0 0 0 18px #000,
	0 2px 6px 18px rgba(0,0,0,0.5);
    background-color: #E5FFFD;
}

/*=========================================
Speech Bubbles
============================*/
.speechbubble
{
  border: 1px dotted red;
  padding: 30px;
  margin: none;
  box-shadow: 5px 5px 20px black;
  border-radius: 58px;
}
.benefit {
  float: left;
  width: 710px;
  margin: 30px 20px 30px 0px;
  border-left: 10px solid #F2B50F;
  border-top: 10px solid #00933B;
  border-right: 10px solid #F2B50F;
  border-bottom: 10px solid #00933B;
  border-radius: 58px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 10px #555;
  padding: 60px;
}
.benefit-small {
  float: left;
  width: 250px;
  margin: 30px 20px 30px 10px;
  border-left: 10px solid #0266C8;
  border-top: 10px solid #F90101;
  border-right: 10px solid #F2B50F;
  border-bottom: 10px solid #00933B;
  border-radius: 58px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 10px #555;
  padding: 30px;
}
.benefit-small-right {
  float: right;
  width: 250px;
  margin: 30px 20px 30px 10px;
  border-left: 10px solid #0266C8;
  border-top: 10px solid #F90101;
  border-right: 10px solid #F2B50F;
  border-bottom: 10px solid #00933B;
  border-radius: 58px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 10px #555;
  padding: 30px;
}