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

body {  font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	font-style: normal;
	color: #333333;
	line-height: 18px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;

	}
	
	

/* go on with normal style definitions */
.titleCocon { 
  font-size:18px;
  letter-spacing:-.75px;
  color:#000000;
  font-weight:bold;
  float:left;
}



a .titleCocon {font-weight:normal;}
	
a { color: #006501; text-decoration: none;}
#storeContent a {font-weight: bold; }
a:hover { color: #808080; }
ul a{ font-weight: bold; }

img {border:0;}

#leftColumn { width:500px;
	margin:15px 30px 10px 10px;
	float:left;
	}
#rightColumn { width:355px;
	margin:15px 10px 10px 0;
	float:left;
}
#buyNow { padding-top:140px;
	text-align:left;
}
#leftColumn {
	width:550px;
	margin:15px 20px 10px 0;
}
#relatedProducts { 
	padding:0;
	margin-top:0px;
}

#relatedProducts {	
	float:left;
	margin-top:50px;
}

#productImage {text-align:center;}

#productThumbs {text-align:center;}

#description {margin-top:10px;}

#libraryTitle {margin-bottom:15px;}

.specialOffer {
	height:40px;
	overflow:hidden;
}

#comName {float:left;
}

#sciName {float:left;
}

.plantList td {
	padding:0 10px 0 0;
	line-height:16px;
}

#languages {margin: 0 0 10px;}
#languages .largeFlag {margin:0 13px 0 0;}

#languages .flagContainer {
	width:64px;
	text-align:center;
	float:left;
	margin-right:17px;
}
.flagContainer .flagCaption {
	margin-top:-10px;
}

.coverShadow {
	-webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.75);
}

ol {font-size:95%;
	margin:0 -15px;
}
ul {font-size:95%;
	margin:0 0px;
	list-style-type: none;
}
li {line-height: 16px;}


#catSidebar {
	background:url(sidebar_bg_vert.gif);
	background-repeat: repeat-y;
	float:left;
	padding-top:0px;
	min-height:60px;
	width:166px;
	text-transform:lowercase;
	position:absolute;
}

ul#catlevel {  
	/*font-family: "ff-cocon-web-1","ff-cocon-web-2",sans-serif;*/
	font-family: arial, helvetcia, sans-serif;
	font-weight:700;
	list-style-type:none;
	text-align:right;
	margin-right: 7px;
	font-size:11px;
	letter-spacing:-.1px;
} 

ul#catlevel li a {
	color:#333333;
}

ul#catlevel li a:hover {
	color:#006501;
}

.attributeList li {
	color:red;
}

#storeContent { 
	float:left;
	min-height:300px;
	padding:3px 19px 25px 15px;
	position:absolute;
	left:166px;
	width:955px;
	}
#storeContent.productWide {
	width:1075px;
}

#contentLeft { 
	float:left;
	min-height:300px;
	padding:3px 19px 25px 10px;
	}



.prodContainer {
	width:300px;
	margin:10px;
	text-align:center;
	float:left;
	min-height:300px;

}
.prodText {
	text-align:left;
	width:300px;
	margin-top: 20px;

}

.checkbox-option{
	float:left;
	width:100%;
	padding:1px;
	white-space:normal
}

.checkbox-option > p {
    margin: 0 0 0 20px;
}

.formatList .checkbox-option {height:20px;padding: 1px 5px;}

.radio-option, .select-option, .text-option, memo-option {
	clear:both;
	margin:5px 0;
}

.checkbox-option input{float:left;}

.wideCheck {
	width:100%;
	margin:5px 0;
}

.smallCheck {
	width:105px;
}

.attrFootnote{
	width:270px;
	line-height:11px;
	font-size:10px;
	padding:5px;
	margin:0;
}

#rightColumn.volumeFloat {
    float: right;
    margin-right: 140px;
}

.red {
	font-weight:bold;
	color:red;
}

.red > a {
	text-decoration:underline;
	color:red;
}

/* Button Styles */
button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

button.submitBtn {
	background: url('images/button-right.png') no-repeat top right;
	border:none;
	cursor:pointer;
	font-weight:bold;
	padding:0 14px 0 0;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
}
button.submitBtn span{
	background: transparent url('images/button-left.png') no-repeat top left;
	line-height:20px;
	color:#ffffff;
	position:relative;
	display:block;
	white-space:nowrap;
	padding:0 0 0 14px;
}

button.btnBig {
    background: url("images/button-right-30.png") no-repeat scroll right top transparent;
    padding: 0 22px 0 0;
}

button.btnBig span {
    background: url("images/button-left-30.png") no-repeat scroll left top transparent;
   line-height: 30px;
   padding: 0 0 0 23px;
   font-size:14px;
}
button.btnRed30 {
    background: url("images/button-right-red-30.png") no-repeat scroll right top transparent;
}

button.btnRed30 span {
    background: url("images/button-left-red-30.png") no-repeat scroll left top transparent;
}

button.submitBtn:hover {background-position: bottom right;}
button.submitBtn:hover span {
	background-position: bottom left;
}

/* Login Pages */
.signInBox{
  float:left;
  width:260px;
  text-align:center;
  min-height:170px;
  margin-top:15px;
}

.borderRight{
  border-right:1px solid #808080;
}

/* Login Form */
.formBox label, .formBox input {
  display:block;
  width:120px;
  float:left;
  margin-bottom:5px;
}
.formBox label {
  text-align:right;
  padding-right:10px;
  width:105px;
}
.formBox br {
  clear:left;
}

.paymentButton {
	float:left;
	margin:10px;
}

/* Affiliate Page */
ul#menu li a.active {
    background: #daf3da none repeat scroll 0 0;
    display: inline;
    float: left;
    height: 22px;
    margin: 0;
}

ul#menu li a {
    color: #006600;
}
ul#menu li a:hover {
    color: #fff;
}

/* end Affiliate Page /*



/* Plants Landing Page */
.splash-image {
	width:925px;
	height:400px;
	
	background-repeat:no-repeat;
	position:relative;
	
}
#logo {
	width:200px;
	height:42px;
	margin:20px;
	background-image:url(images/xfrogplants_logo.png);
	background-repeat:no-repeat;
	overflow:hidden;
	text-indent:-9999px;
	position:absolute;
}

#search {
	width:200px;
	height:20px;
	float:right;
	margin:20px;
}
#textbox {
	color:#ffffff;
	display:block;
	padding:10px;
	position:absolute;
	right:0;
	bottom:0;
	margin:20px;
	max-width:450px;
	
}
#textbox a{
	color:#b1e0b1;	
}

.pullquote {text-indent: 25px;}

.pullquote strong {
	font-weight: bold;
	line-height: 1em;
	font-size: 26px;
}
.alpha60 {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.6);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.alpha60white {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(255, 255, 255);
	/* RGBa with 0.6 opacity */
	background: rgba(255, 255, 255, 0.6);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

#plantsNav {
	background-image:url(images/plantsNav_background.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	font-size:14px;
	font-weight:bold;
	margin-top:10px;
	width:925px;
}

#plantsNav ul {
	margin-left:auto;
	margin-right:auto;
	width:900px;
	padding-left:5px;
}

#plantsNav li {
	background:url(images/plantsNav_tab.jpg), #FFF;
	background-repeat:no-repeat;
	float:left;
	width:94px;
	margin: 0 9px;
	padding:4px 0 6px 0;
	text-align:center;
}
#plantsNav ul.softNav li {
	width:110px
}

#plantsNav li a {color:#333333;}
#plantsNav li a:hover {color:#006600;}
#plantsNav li.active {	
	background:url(images/plantsNav_active.jpg), #FFF;
	background-repeat:no-repeat;
}
#plantsNav ul.softNav li.active {
	background:url(images/plantsNav_active-110x26.jpg), #FFF;
}

#plantsNav li.active a {color: #006600;
}





plantsGrid table{ border-collapse:collapse;}
#plantsGrid table th, #plantsGrid table td {background-color:#daf3da; border:2px solid white;}

.gridButton {
	background:url('http://xfrog.com/mm5/css/00000001/grid_button.jpg') no-repeat scroll center top transparent; 
	width: 22px;
	min-height: 22px;
	border:0;
	text-indent:-500px;
}
.gridButton:hover {
	background:url('http://xfrog.com/mm5/css/00000001/grid_button.jpg') no-repeat scroll center bottom transparent;
}
.rowButton {
	background:url('http://xfrog.com/mm5/css/00000001/row_button.jpg') no-repeat scroll center top transparent; 
	width: 22px;
	min-height: 22px;
	border:0;
	text-indent:-500px;
}

.rowButton:hover {
	background:url('http://xfrog.com/mm5/css/00000001/row_button.jpg') no-repeat scroll center bottom transparent;
}

#samplePage {
	width:925;
	}

#samplePage .sample {
	width:300px;
	display:inline-block;
}

.thumbBorder {
	border:1px solid #e5e5e5;
	margin-right:5px;
}

.newStarContainer{
	position:relative;
	left:0;
	top:0;
}

.newStar{
	left: 115px;
    position: absolute;
    top: -15px;
}

.newStarThumb{
	position:relative;
	left:0;
	top:0;
}

.caption{
	float:left;
	text-align:center;
}

.caption p{
	font-size:10px;
	color:#006600;
	line-height:1.3;
}

.libPad {
	margin:20px 0;	
}

.singPad {
	margin:20px;	
}
.libName {
	font-size:85%;	
}
.trial {
	margin:15px 5px 0;
}
div.panel,p.flip
{
margin:0px;
padding:5px;
color:#006501;
cursor:pointer;
}
div.panel
{
height:275px;
display:none;
}
.targetDiv{display:none;}
.showSingle, .hideAll {cursor:pointer;}


.thinBorder { border:1px solid #808080;}


/* End XfrogPlants Landing Page*/

/* --= XfrogPlants Library Slick Slider Styles =-- */
.plantSliderContainer{
	background: none repeat scroll 0 0 #D6D6D6;
	margin:10px auto;
	width:550px;
	
}
.plantSlider {
    margin: auto;
    padding: 10px 20px;
    width: 520px;
	/*box for slideshow*/
}


.slick-slide img {
    border: none;
    width: auto;
	margin:auto;
}

.slick-next {
    right: -20px;
}

.slick-slide {
  text-align:center;
}

.slick-slider {
	margin-bottom:-5px;
}

div.plantSliderContainer * {
    box-sizing: border-box;
}

.rounded-corners{
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
	behavior: url(http://xfrog.com/mm5/css/00000001/imageSlider/border-radius.htc);
	border-radius: 10px;
}

/* --= End Library Slider Styles =-- */


/* Attribut Select Pop Up */
.attrSelect {
    background: none repeat scroll 0 0 white;
    border: 1px solid #333333;
    display: block;
    margin: -45px 5px 5px -100px;
	padding:10px;
    position: absolute;
    z-index: 10;
	-moz-border-radius: 15px;
	border-radius: 15px;
	white-space:nowrap;
}
.shadow {
  -moz-box-shadow:    3px 3px 5px 0px #ccc;
  -webkit-box-shadow: 3px 3px 5px 0px #ccc;
  box-shadow:         3px 3px 5px 0px #ccc;
  /* For IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cccccc')";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cccccc');
}
.closeBox {
	background:url('http://xfrog.com/mm5/css/00000001/closeBox.jpg') no-repeat scroll center top transparent; 
	width: 12px;
	min-height: 12px;
	border:0;
	text-indent:-9009px;
	line-height:1px;
	float:right;
}
.closeBox:hover {
	background-position:center bottom;
}


/* Attribut Select Pop Up */




/* -- Collapseable Lists Volumes -- */
.libraryList {width:105px;float:left;text-align:center;}
.libraries {font-size:12px;font-weight:bold;}
.toggle {margin-bottom:15px;display:none;}
#images img{margin:5px;}
.toggleLink {font-size:9px;color:333333;font-weight:normal;}
 
 /* -- Show/Hide --*/
 .showdist{font-size:90%;}
 
 
/* -- What's This Question Mark Icon --  */
 .showinfo {
    background: url("images/question-icon.png") no-repeat scroll right top transparent;
    display: inline-block;
    height: 14px;
    color:transparent;
	overflow:hidden;
    width: 12px;
}

.showinfo:hover {
	background-position: bottom;
    color:transparent;
	overflow:hidden;
}
 
 
 
/* --= Begin Searchbox =-- */
#searchetc { position:absolute;right:0;top:0;margin:20px; }
#searchetc #searchbox { width:187px; height:24px; background:url(images/search-background.png) no-repeat;border:1px black solid;background-position:24px 0; }
#searchetc #searchbox #s { float:right; padding:0; margin:5px 0 0 5px; border:0; width:154px; background:none; font:12px Arial, "Trebuchet MS", Helvetica, Verdana, Sans-serif; font-weight:700; color:#333333; }
#searchetc #searchbox #go { float:left; }

/* --Google Site Search Styles --*/
#gssetc {
    float: right;
    padding: 6px 8px 0 0;
    margin-bottom: 15px;
}
#gssetc #searchbox {
    background: url("images/gss-background.gif") no-repeat scroll 20px 0 transparent;
    border: 1px solid #808080;
    height: 20px;
    width: 135px;
}
#gssetc #searchbox #q {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    color: #333333;
    float: right;
    font: 700 12px Helvetica,Arial,Verdana,Sans-serif;
    margin: 3px 0 0 5px;
    padding: 0;
    width: 110px;
}
#gssetc #searchbox #go {
    float: left;
}

#___gcse_0 {
    width:925px;
}

.gs-title a, .gsc-result .gs-title b {
    line-height:1em;
    text-decoration:none;
}


/* --= End Searchbox =-- */


.clear { clear:both;}




hr {
width:250px;
text-align: left;/*this will align it for IE*/
margin: 0px auto 20px 0; /*this will align it left for Mozilla*/
border: none 0;
border-top: 1px solid #808080;/*the border*/
height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
}

.full {
width: 465px;
border-color:#000000;
}

.top {
    left: 465px;
    position: relative;
    top: 1px;
}

#objects {
	list-style-type:none;
	margin:25px 0;
	padding-left: 5px;
	font-size:100%;
}

#objects li {
	margin: 5px 0;
	min-height:32px;

}

#objects img {
	float:left;margin-right:10px;
}
#objects p {
	margin-left:42px;
}


/* Image Machine Styles */

#main_image{
	/*border:1px solid #cccccc;*/
    cursor: -moz-zoom-in !important;
    cursor: -webkit-zoom-in !important;
    cursor: zoom-in !important;
}

.thumbnails{
	display:block;
	margin:0;
	padding:0;
	width:&mvt:prod_imagemachine:image_width;px;
	list-style:none;
}

.thumbnails li{
	display:inline;
	
	margin:4px 4px 0 0;
	padding:0;
	width:55px;
	height:55px;
	text-align:center;

	cursor:pointer;
}

.thumbnails li span{
	display:inline-block;
	height:100%;
	text-align:center;
	vertical-align:middle;
}

.thumbnails li img{
	vertical-align:middle;
	border:1px solid #cccccc;

}

.indexThumb {
  float:left;
  margin-right:5px;
  border:1px solid #888888;
  margin-bottom:10px
}

.product-image-margin{
	height:8px;
}

.closeup{
	position:absolute;
	top:75px;
	padding:10px 10px 5px 10px;
	background-color:#ffffff;
	border:1px solid #333333;
	display:none;
	text-align:center;
	z-index:2;
	min-width:350px;
	min-height:350px;
}

.closeup_backing{
	position:absolute;
	left:0px;
	top:0px;
	background-color:#333333;
	opacity:0.75;
	filter:alpha(opacity=75);
	width:100%;
}

.closeup div
{
	padding:2px 0 0 0;
}

.closeup a{
	cursor:pointer;
	margin:8px 0 0 0;
	z-index:2;
}

/*-- colorbox additional styles--*/
#cboxTitle a {
    color: #ffffff;
    text-decoration: underline;
}

/*-- colorbox help form styles--*/
.help-form-cbox #cboxContent {
	background: none;
}

.help-form-cbox #cboxLoadedContent {
	border: 1px solid #333333;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
	behavior: url(http://xfrog.com/mm5/css/00000001/imageSlider/border-radius.htc);
	border-radius: 10px;
}

.help-form-cbox #cboxClose {
	background:url('http://xfrog.com/mm5/css/00000001/closeBox.jpg') no-repeat scroll center top transparent;
	height:12px;
	width:12px;
	top:7px;
	right:7px;
}

.help-form-cbox #cboxClose:hover {
	background-position:center bottom;
}

.help-button {
	background:url('http://xfrog.com/mm5/graphics/00000001/ask-xfrog.png') no-repeat scroll center top transparent; 
	width: 90px;
	min-height: 65px;
	border: 1px solid #999;
	text-indent:-9009px;
	float:right;
	margin: 5px 100px 0 0;

}

.help-button.category-help {
	background:url('http://xfrog.com/mm5/graphics/00000001/ask-xfrog-transparent.png') no-repeat scroll center top #000; 
	bottom:0;
	float:none;
	position:absolute;
	margin:20px;
}

.help-button:hover {
	background-position:center bottom;
	background-color: #DAF3DA
}

.help-button.category-help:hover {
		background-color: #000
}

/*--- Checkout Progress Bar ---*/

.progressBar { 
	list-style: none; 
	overflow: hidden; 
	font: 12px Helvetica, Arial, Sans-Serif;
}
.progressBar li { 
	float: left;
	line-height:10px;
}
.progressBar li a {
	color: #006600;
	text-decoration: none; 
	padding: 10px 0 10px 55px;
	background: #d6d6d6;                   /* fallback color */ 
	position: relative; 
	display: block;
	float: left;
}
.progressBar li a:after { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
	border-bottom: 50px solid transparent;
	border-left: 30px solid #d6d6d6;
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	left: 100%;
	z-index: 2; 
}	
.progressBar li a:before { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
	border-bottom: 50px solid transparent;
	border-left: 30px solid white;
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	margin-left: 5px;
	left: 100%;
	z-index: 1; 
}	

.progressBar li.complete a {
	background: #daf3da;
}
.progressBar li.complete a:after {
	border-left-color: #daf3da;
}

.progressBar li.active a {
	background: #006600;
	color:white;
}
.progressBar li.active a:after {
	border-left-color: #006600;
}

.progressBar li:first-child a {
	padding-left: 20px;
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10p;
	-khtml-border-radius: 10px 0 0 10p;
	border-radius: 10px 0 0 10px;
}
.progressBar li:last-child a {
	padding-right: 20px;
	-moz-border-radius: 0 10px 10px 0;
	-webkit-border-radius: 0 10px 10px 0;
	-khtml-border-radius: 0 10px 10px 0;
	border-radius: 0 10px 10px 0;
}

.progressBar li:last-child a:after { border: 0;padding-right:10px; }


/*--- Social ---*/
#social{
	float:right;
	/*width:105px;*/
	position:relative;
	top:-35px;
	margin-bottom:-10px;
}
#socialSoftware{
	position:relative;
	margin-top:15px;
	
}
.socialButton{
	/*width:44px;*/
	float:left;
	margin:2px;
}

.socialButton.pinIt {
	overflow:hidden;
}