/* This file has been modified (by Strodlee) from the orignal (styles.css), to work with the WYSIWYG Web Builder Contextual Slideout extension and to provide extra styling options. Original files download and tutorial at :-  http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/   */



/* The slideout background  colors */

.AvacadoBg .ctxbg{ background-color:#D2DFB3; }
.BlackBg .ctxbg{ background-color:#111111;  }
.BlueCloudBg .ctxbg{ background-color:#DAD4EC;  }
.CoffeeBg .ctxbg{ background-color:#AE8E82;  }
.DarkBrownBg .ctxbg{ background-color:#6C3600;  }
.DarkGrayBg .ctxbg{ background-color:#3C3C3C;  }
.DarkOliveBg .ctxbg{ background-color:#4A4A00 ; }
.DeepGreenBg .ctxbg{ background-color:#004200; }
.ForestGreenBg .ctxbg{ background-color: #83A368; }
.LightGrayBg .ctxbg{ background-color:#D8D8D8;  }
.LightTanBg .ctxbg{ background-color:#E8CEBD;  } 
.MidGrayBg .ctxbg{ background-color:#696969;  }
.ParchmentBg .ctxbg{ background-color:#F2DFCB;  }
.SlateBlueBg .ctxbg{ background-color:#7B7BC0;  }
.SoftVioletBg .ctxbg{ background-color:#8A5692;  }
.TrBg { background-color:transparent;  }




/*Background color opacity*/
.OpacitySolid .ctxbg{opacity: 1.0}
.Opacity95 .ctxbg{opacity: .95}
.Opacity90 .ctxbg{opacity: .90}
.Opacity85 .ctxbg{opacity: .85}
.Opacity80 .ctxbg{opacity: .80}
.Opacity75 .ctxbg{opacity: .75}
.Opacity70 .ctxbg{opacity: .70}
.Opacity65 .ctxbg{opacity: .65}
.Opacity60 .ctxbg{opacity: .60}
.Opacity55 .ctxbg{opacity: .55}
.Opacity50 .ctxbg{opacity: .50}
.Opacity45 .ctxbg{opacity: .45}
.Opacity40 .ctxbg{opacity: .40}
.Opacity35 .ctxbg{opacity: .35}
.Opacity30 .ctxbg{opacity: .30}
.Opacity25 .ctxbg{opacity: .25}
.Opacity20 .ctxbg{opacity: .20}
.Opacity15 .ctxbg{opacity: .15}
.Opacity10 .ctxbg{opacity: .10}
/*.Blur .ctxbg{opacity:0} */


/* The main wrapping div of the slideout tips */
.slideOutTip{
	position:absolute;
	padding:3px;
	top:0;
	left:0;
	overflow:hidden;
	height:21px;


}



.slideOutTip.Blur{background-color:transparent;}

.slideOutTip.isOpened.Blur{outline:70px solid transparent;} /* To fix outline / artifacts problem in Safari on iMac and some iPads */

/* The title text colors */
.BlackTl .tipTitle{color:#000000;}
.GrayTl .tipTitle{color:#808080;}
.WhiteTl .tipTitle{color:#FFFFFF;}
.YellowTl .tipTitle{color:#FFFF00;}
.RedTl .tipTitle{color:#CD3A12;}
.GreenTl .tipTitle{color:#217E01;}
.BlueTl .tipTitle{color:#0000FF;}
.OrangeTl .tipTitle{color:#FC9803;}
.VioletTl .tipTitle{color:#C851E6;}
.FuschiaTl .tipTitle{color:#C00379; }
.BrownTl .tipTitle{color:#A24602; }




/* The open / close icon colors */
.GreenIc .tipIcon{ background-color:#61B035; }
.BlueIc .tipIcon{ background-color:#1078C7; }
.RedIc .tipIcon{ background-color:#CD3A12; }
.OrangeIc .tipIcon{ background-color:#FC9803; }
.VioletIc .tipIcon{ background-color:#C851E6; }
.PurpleIc .tipIcon{ background-color:#6B18B6; }
.FuschiaIc .tipIcon{ background-color:#C00379; }
.BrownIc .tipIcon{ background-color:#A24602; }
.OliveIc .tipIcon{ background-color:#808000; }
.DarkBlueIc .tipIcon{ background-color:#0000C6; }
.GrayIc .tipIcon{ background-color:#666666; }
.DarkGreenIc .tipIcon{ background-color:#056A00; }
.BlackIc .tipIcon{ background-color:#111111;  }

/* The holder for the title and the icon: */
.tipVisible{ cursor:pointer; height:22px; }

.tipTitle{
	float:left;
	font-weight:bold;
	white-space:nowrap;
	line-height:22px;
	padding-right:5px;
	margin:0;
	padding:0;
}

/* The title fonts: */
.ArialTl .tipTitle{font-family: Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;}
.ComicSansMSTl .tipTitle{font-family:'Comic Sans MS', cursive;}
.GeorgiaTl .tipTitle{font-family: Georgia, Constantina, 'Nimbus Roman No9 L', serif;}
.TahomaTl .tipTitle{font-family:Tahoma, Arial, Helvetica, sans-serif;}
.TrebuchetMSTl .tipTitle{font-family:'Trebuchet MS', Helvetica, sans-serif;}
.VerdanaTl .tipTitle{font-family:Verdana, Geneva, 'DejaVu Sans', sans-serif;}
.PalatinoLinotypeTl .tipTitle{font-family:'Palatino Linotype', 'Book Antiqua', 'URW Palladio L', serif;}
.LucidaSansUnicodeTl .tipTitle{font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;}


/* The title text size: */
.Tls13 .tipTitle{font-size:13px;}
.Tls14 .tipTitle{font-size:14px;}
.Tls15 .tipTitle{font-size:15px;}
.Tls16 .tipTitle{font-size:16px;}
.Tls17 .tipTitle{font-size:17px;}
.Tls18 .tipTitle{font-size:18px;}

.tipIcon{
	width:21px;
	height:21px;
	float:left;
	margin-right: 10px;
	
	/* CSS3 Rounded corners */
-webkit-transition: -webkit-border-radius 0.3s ease-in;
   	 -moz-transition: -moz-border-radius 0.3s ease-in;
   	 -o-transition: border-radius 0.3s ease-in;
  	  -ms-transition: border-radius 0.3s ease-in;
	   transition: border-radius 0.3s ease-in;

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}

.plusIcon{
	/* The plus icon */
	width:13px;
	height:13px;
	background:url('ctxso_plus.gif') no-repeat center center;
	margin:4px;

	/* Defining a CSS3 animation.  */
	-webkit-transition: -webkit-transform 0.2s linear;
	-moz-transition: -moz-transform 0.2s linear;
	-o-transition: -o-transform 0.2s linear;
	transition: transform 0.2s linear;
}

.slideOutTip.isOpened .plusIcon{
	/* Applying a CSS3 rotation  to the opened slideouts*/
-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+ */
transform: rotate(45deg);  /* Newer browsers (incl IE9) */
}

/* Special rules for the left and top opening versions */
.openLeft .tipIcon{
	/* Floating the title and the icon to the right */
	margin:0 0 0 10px;
	float:right;
}

.openLeft .tipTitle{ float:right; padding:0 0 0 5px; }
.openLeft .slideOutContent{ margin-top:22px; }
.openLeft.openTop .slideOutContent{	margin-top:0; }

.slideOutContent{
	/* Hiding the div with the slide out content: */
	display:none;
	padding:10px 10px 12px 10px;
	
}

/* Hiding the original paragraphs if they have not been replaced (JS disabled): */

.contip > .ctxcontent{ display:none; }

.ctxcontent{ width:auto; overflow:auto;overflow-x:hidden; }

.InsetYes .ctxcontent {
    box-shadow: 4px 4px 7px 1px rgba(0, 0, 0, 0.4) inset, -4px -4px 5px 1px rgba(0, 0, 0, 0.2), 4px 4px 7px 1px rgba(255, 255, 255, 0.4);
    padding: 10px;
}

.InsetNo .ctxcontent{ padding: 2px ; }

.ctxadv{ position:relative;clear:both; }

.spaceBottom{ margin:0 0 10px; }
.spaceTop{ margin:10px 0 0; }

/* Image float options */
.ctximgright{ float:right;display:inline; }
.ctximgleft{ float:left;display:inline; }
.ctximgnofloat{ float:none;display:block; }

/* Drop shadow*/
.ctxSmallShadow {
-webkit-box-shadow: 4px 4px 10px rgba(30, 30, 30, 0.4);
-moz-box-shadow:    4px 4px 10px rgba(30, 30, 30, 0.4);
box-shadow:         4px 4px 10px rgba(30, 30, 30, 0.4);
}

.ctxLargeShadow {
-webkit-box-shadow: 6px 6px 12px  rgba(30, 30, 30, 0.4);
-moz-box-shadow:    6px 6px 12px  rgba(30, 30, 30, 0.4);
box-shadow:         6px 6px 12px  rgba(30, 30, 30, 0.4);
}

/* Round corners options - 2divs*/
.slideOutTip.isOpened.ctxopRound-Large, .slideOutTip.isOpened.ctxopRound-Large .ctxbg {
-webkit-transition: -webkit-border-radius 0.6s ease-in;
    -moz-transition: -moz-border-radius 0.6s ease-in;
    -o-transition: border-radius 0.6s ease-in;
    -ms-transition: border-radius 0.6s ease-in;
    transition: border-radius 0.6s ease-in;

   -moz-border-radius:12px;
   -webkit-border-radius:12px;
    border-radius:12px;
}

.slideOutTip.isOpened.openLeft.openBottom.ctxopRound-Large .tipIcon{	
	-webkit-transition: -webkit-border-radius 0.6s ease-in;
   	 -moz-transition: -moz-border-radius 0.6s ease-in;
   	 -o-transition: border-radius 0.6s ease-in;
  	  -ms-transition: border-radius 0.6s ease-in;
	   transition: border-radius 0.6s ease-in;

	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
}


.slideOutTip.isOpened.openLeft.openTop.ctxopRound-Large .tipIcon{
	-webkit-transition: -webkit-border-radius 0.6s ease-in;
   	 -moz-transition: -moz-border-radius 0.6s ease-in;
   	 -o-transition: border-radius 0.6s ease-in;
  	  -ms-transition: border-radius 0.6s ease-in;
	   transition: border-radius 0.6s ease-in;


	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottom-right: 10px;
	border-bottom-right-radius: 10px;
}


.slideOutTip.isOpened.openRight.openTop.ctxopRound-Large .tipIcon{

	-webkit-transition: -webkit-border-radius 0.6s ease-in;
   	 -moz-transition: -moz-border-radius 0.6s ease-in;
   	 -o-transition: border-radius 0.6s ease-in;
  	  -ms-transition: border-radius 0.6s ease-in;
	   transition: border-radius 0.6s ease-in;

	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottom-left: 10px;
	border-bottom-left-radius: 10px;
}


.slideOutTip.isOpened.openRight.openBottom.ctxopRound-Large .tipIcon{
	-webkit-transition: -webkit-border-radius 0.6s ease-in;
   	 -moz-transition: -moz-border-radius 0.6s ease-in;
   	 -o-transition: border-radius 0.6s ease-in;
  	  -ms-transition: border-radius 0.6s ease-in;
	   transition: border-radius 0.6s ease-in;

	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-top-left: 10px;
	border-top-left-radius: 10px;
}


.slideOutTip.ctxclRound-Small, .slideOutTip.ctxclRound-Small .ctxbg{
	-webkit-transition: -webkit-border-radius 0.3s ease-in;
   	 -moz-transition: -moz-border-radius 0.3s ease-in;
   	 -o-transition: border-radius 0.3s ease-in;
  	  -ms-transition: border-radius 0.3s ease-in;
	   transition: border-radius 0.3s ease-in;

	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}


.slideOutTip.isOpened.ctxopRound-Small, .slideOutTip.isOpened.ctxopRound-Small .ctxbg{
	-webkit-transition: -webkit-border-radius 0.6s ease-in;
   	 -moz-transition: -moz-border-radius 0.6s ease-in;
   	 -o-transition: border-radius 0.6s ease-in;
  	  -ms-transition: border-radius 0.6s ease-in;
	   transition: border-radius 0.6s ease-in;

	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.slideOutTip.ctxclSquare, .slideOutTip.ctxclSquare .ctxbg{
	-webkit-transition: -webkit-border-radius 0.3s ease-in;
   	 -moz-transition: -moz-border-radius 0.3s ease-in;
   	 -o-transition: border-radius 0.3s ease-in;
  	  -ms-transition: border-radius 0.3s ease-in;
	   transition: border-radius 0.3s ease-in;

	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
}


.slideOutTip.isOpened.ctxopSquare{
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
}




.ctxhtabsolute{position:relative;}
.ctxhtstatic{position:static;}