/*Begins styles for content slideshow at top*/

 .glidecontentwrapper{
 position: relative; /* Do not change this value */
 width: 555px;
 height: 210px; /* Set height to be able to contain height of largest content shown*/
 border: 1px solid #FFFFFF;
 padding:0;
 overflow: hidden;
 }
 /*
 Total wrapper width: 350px+5px+5px=360px
 Or width of wrapper div itself plus any left and right CSS border and padding
 Adjust related containers below according to comments
 */

 .glidecontent{ /*style for each glide content DIV within wrapper.*/
 position: absolute; /* Do not change this value */
 background: #FFFFFF;
 visibility: hidden;
 width: 555px;
 }
 /*
 Total glidecontent width: 330px+10px+10px=350px
 Or width of wrapper div itself (not counting wrapper border/padding)
 */

 .glidecontenttoggler{ /*style for DIV used to contain toggler links. */
 width: 360px;
 text-align: center; /*How to align pagination links: "left", "center", or "right"
 background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
 }
 /*
 Total contenttoggler width: 350px+5px+5px=360px
 Or total width of wrapper div (counting wrapper border/padding)
 */

 .cssbuttonstoggler{ /*style for DIV used to contain toggler links. */
 width: 556px;
 background-color:#0066cc;
 /*margin-left: 30px;*/
 text-align: center; /*How to align pagination links: "left", "center", or "right"
 background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
 overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
 }
 /*
 Total contenttoggler width: 350px+5px+5px=360px
 Or total width of wrapper div (counting wrapper border/padding)
 */

 .cssbuttonstoggler a{ /*style for every navigational link within toggler */
	 background: transparent url("../images/square-gray-left.gif") no-repeat top left;
	 color: #fff;
	 display: block;
	 float: left;
	 margin-right: 6px;
	 font: normal 10px Arial; /* Change 12px as desired */
	 line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
	 height: 23px; /* Height of button background height */
	 padding-left: 9px; /* Width of left menu image */
	 text-decoration: none;
}

 .cssbuttonstoggler a span{
	 background: transparent url(../images/square-gray-right.gif) no-repeat top right;
	 display: block;
	 padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
 }

 .cssbuttonstoggler a.selected, .cssbuttonstoggler a:hover{ /*style for selected and hover page's toggler link. ".selected" class auto generated! */
 	background-position: bottom left;
 }

 .cssbuttonstoggler a.selected span, .cssbuttonstoggler a:hover span{ /*style for selected and hover page's toggler link. ".selected" class auto generated! */
	 background-position: bottom right;
	 color: black;
 }

 .cssbuttonstoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
 }

 .cssbuttonstoggler a.prev, .glidecontenttoggler-2 a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
 }

 .cssbuttonstoggler a.prev:hover, .glidecontenttoggler-2 a.next:hover{
 }
 /*End styles for content slideshow at top*/

 /*Begin styles for sliding product menu */
 .stepcarousel{
	 position: relative; /*leave this value alone*/
	 border-left: 10px solid #fafafa;
	 border-right: 10px solid #fafafa;
	
	 overflow: scroll; /*leave this value alone*/
	 width: 825px; /*Width of Carousel Viewer itself*/
	 height: 125px; /*Height should enough to fit largest content's height*/
	 padding-right: 3px;
	 padding-left: 3px;
	 margin-left:4px;
 }

 .stepcarousel .belt{
 position: absolute; /*leave this value alone*/
 left: 0;
 top: 0;
 }

 .stepcarousel .panel{
	 float: left; /*leave this value alone*/
	 overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	 margin: 10px 3px 10px 5px; /*margin around each panel*/
	 width: 160px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
 }
 
 /*Endtyles for sliding product menu */

/*Popular sidebar */
 #popular{
 float: right;
 height:235px;
 width:100%;
 background:url("../images/popular-tasks-bg.gif") top left repeat-x;
 }

 #popular ul {
 margin-left: 0;
 padding-left: 0;
 list-style: none;
 }

 #popular ul li {
 background-image: url("../images/popular-li.gif");
 background-position: 6px left;
 background-repeat: no-repeat;
 padding:4px 5px 5px 15px;
 margin-left:7px;
 line-height:120%;
 font-size: 109.5%;
 }

 #popular a {
 color:#FFF;
 }

 #popular h3 {
 font-size: 150%;
 font-family: Arial,Verdana,Geneva,Helvetica,sans-serif;;
 font-weight: bold;
 color: #FFF;
 margin-bottom: 0.3em;
 padding: 0.3em;
 border-bottom:1px dotted #FFF;
 }

 .continue {
 position: absolute;
 top: 215px;
 right: 15px;
 }

 /*Fast pricing searchbox */
 .fastpricing{
 width:760px;
 height:35px;
 padding:10px 0 3px 0;
 background:url("../images/fast-pricing-bg.gif") no-repeat;
 }
 .fastpricing p {
 margin:0;
 line-height:1.5em;
 font-size:110%;
 }
 .fastpricing h3 {
 font-size: 120%;
 padding-left:70px;
 color: #FF6600;
 font-weight: bold;
 }

 /* STYLES FOR ROW OF 3 AD BOXES */

 /*Container for first set of ads */
 #ad{
 width:760px;
 height:165px;
 background:url("../images/ad-bg.gif") no-repeat;
 padding:10px 0 10px 0;
 }

 .adbox {
 width:238px;
 height:165px;
 float:left;
 padding:5px 5px 0 10px;
 position:relative;
 }

 .adbox h3 a {
 text-decoration: none;
 color:#666;
 font-size: 140%;
 font-family: Arial,Verdana,Geneva,Helvetica,sans-serif;
 font-weight: bold;
 color: #0066cc;
 margin:0;
 padding:8px 0 2px 0;
 }

 .adbox h3 a:hover {
 color:#FF6600;
 text-decoration:underline;
 }

 .adbox p {
 margin:0;
 padding:1px 2px 3px 6px;
 line-height:1.5em;
 font-size:109.5%;
 }

 .adbox img{
 padding:2px 2px 4px 7px;
 }

 a.adarrow {
 background: transparent url("../images/ad-arrows.gif") 0 0 no-repeat;
 display: block;
 width: 23px;
 height: 22px;
 overflow: hidden;
 text-indent: -999em;
 position: absolute;
 bottom: 18px;
 right: 3px
 }

 a.adarrow:hover {
 background-position: 0 -22px;
 }

 a.learnmore {
 background: transparent url("../images/learn-more-button.gif") 0 0 no-repeat;
 display: block;
 width: 79px;
 height: 17px;
 overflow: hidden;
 text-indent: -999em;
 position: absolute;
 bottom: 1.2em;
 right: 1.2em
 }

 a.learnmore:hover {
 background-position: 0 -17px;
 }

 a.viewall {
 background: transparent url("../images/view-all-button.gif") 0 0 no-repeat;
 display: block;
 width: 65px;
 height: 17px;
 overflow: hidden;
 text-indent: -999em;
 float:right;
 position: absolute;
 bottom: 1.2em;
 right: 1.2em
 }
 a.viewall:hover {
 background-position: 0 -17px;
 }

 /*Bottom Teaser Styles*/
 .HP_box_wrapper{
 width:760px;
 height:247px;
 }

 .HP_box {
 width:245px;
 height:245px;
 background:url("../images/box-245x245.jpg") no-repeat;
 float:left;
 margin:0 8px 2px 2px;
 position:relative;
 }
 .HP_box h3 {
 font-size: 180%;
 font-family: Arial;
 font-weight: bold;
 color: #0067B2;
 margin:0;
 padding:11px 10px 3px 10px;

 }
 .HP_box p {
 margin:0;
 padding:5px 10px 3px 10px;
 font-size:9pt;
 }

 .HP_box ul, ol, li{
 padding-right:5px;
 font-size:9pt;
 }

 .HP_box img.go {
 position: absolute;
 bottom: 2em;
 right: 1.5em
 }
 .HP_box img.apps{
 padding-bottom: 0;
 padding-right:5px;
 float:left;
 }
 .green{
 color:#75a244;
 font-weight:bold;
 }