/* siteFeature CSS */

/* ----------------------------------------------------------------------
    In the name of Progressive Enhancement, this is the default style for 4 "tabs" that will be seen by users with Javascript turned off.
    Notice that the width/height match the plugin defaults.
 ---------------------------------------------------------------------- */
#preFeature {
    overflow:hidden;
}
#preFeature * {
    padding:0px;
    margin:0px;
    border:none;
}
#preFeature div {
    width:24.8%;
    height:99.25%;
    float:left;
    background:#606060;
    color:#ffffff;
    font-size:11px;
    line-height:15px;
}
#preFeature div.clear {
    float:none;
    clear:both;
    width:auto;
    border:none;
}
#preFeature div h3 {
    font-size:1.1em;
    padding:0.5em 1em;
    font-weight:normal;
    background:#333333;
}
#preFeature div p {
    font-size:1em;
    margin: 0.5em 1em 1em 1em;
}
#preFeature div img {
    width:100%;
    display:block;
}
#preFeature div a:link {
    font-size:1em;
    margin:1em;
    text-decoration:none;
}
#preFeature div a:visited {
    font-size:1em;
    margin:1em;
    padding:0.25em;
    text-decoration:none;
}
#preFeature div a:hover {
    background:#333333;
}
/* ----------------------------------------------------------------------
    The default output id is "siteFeature". If you changed this in the $.makeFeature() call you'll need to update the CSS below.
    As a general rule, I tried to clump like-declarations.  Because of the tab side (left/right) and text layout options (horizontal/vertical) inheritance can get messy.
    FireBug - http://getfirebug.com/ (Joe Hewitt / Firebug Working Group) is strongly recommended.
 ---------------------------------------------------------------------- */
#siteFeature {
    position:relative;
    overflow:hidden;
    border:1px solid #b1b1b1;
}
#siteFeature * {
    padding:0px;
    margin:0px;
    border:none;
}
#siteFeature * a {
    opacity: 1 !important;
    filter: alpha(opacity=100)!important;
}
#siteFeature #imgBgContainer {
    position:absolute;
}
#siteFeature.left #imgBgContainer {
    right:0px;
}
#siteFeature.right #imgBgContainer {
    left:0px;
}
#siteFeature #imgBgContainer div {
    position:absolute;
}
#siteFeature #txtBoxContainer {
    position: absolute;
    height: 100%;
    width: 100%;
    color: #333333;
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
}
#siteFeature.left #txtBoxContainer {
    right:0px;
}
#siteFeature.right #txtBoxContainer {
    left:0px;
}
#siteFeature #txtBoxContainer div {
    position:absolute;
    overflow:hidden;
}
#siteFeature #txtBoxContainer div span {
    display:block;
    width:100%;
    height:100%;
    position:absolute;
}
#siteFeature #txtBoxContainer div div {
}
#siteFeature #txtBoxContainer div.horizontal div h3 {
    font-size:24px;
    line-height:normal;
    margin:5px 0px 0px 0px;
}
#siteFeature.left #txtBoxContainer div div h3 {
    padding:0px 0.5em 0px 0.5em;
}
#siteFeature.right #txtBoxContainer div div h3 {
    padding:0px 0.5em 0px 0.5em;
}
#siteFeature.right #txtBoxContainer div.horizontal div h3 {
    padding:0px 0.5em 0px 0.5em;
}
#siteFeature #txtBoxContainer div.horizontal div p {
    width:320px;
    margin:0px 0px 0px 0px;
}
#siteFeature.left #txtBoxContainer div div p {
    padding:0px 1em 0px 1em;
}
#siteFeature.right #txtBoxContainer div div p {
    padding:0px 1em 0px 1em;
}
#siteFeature.right #txtBoxContainer div.horizontal div p {
    padding:0px 1em 0px 1em;
}
#siteFeature #txtBoxContainer div.horizontal div a:link {
    position:absolute;
    right:25px;
    bottom:10px; /*IE6|7*/
    *bottom:5px;
}
#siteFeature #txtBoxContainer div.horizontal div a:visited {
    position:absolute;
    right:25px;
    bottom:10px; /*IE6|7*/
    *bottom:5px;
}
#siteFeature.left #txtBoxContainer div {
    right: 0px;
}
#siteFeature.left #txtBoxContainer div.horizontal div {
    left:25px;
    height:100%;
}
#siteFeature.right #txtBoxContainer div.horizontal {
    left:0px;
    bottom:0px;
}
#siteFeature.right #txtBoxContainer div {
    left:0px;
}
#siteFeature.right #txtBoxContainer div.horizontal div {
    left:0px;
    height:100%;
    width:100%;
}
#siteFeature #tabContainer {
    position:absolute;
    background: #f4f4f4;
 }
#siteFeature.left #tabContainer {
    left:0px;
}
#siteFeature.right #tabContainer {
    right:0px;
}
#siteFeature #tabContainer a:link,  #siteFeature #tabContainer a:visited {
    display: block;
    width: 100%;
    position: relative;
    opacity: 0.95;
}
/*
#siteFeature #tabContainer a:hover {
    background:#e9e9e9;
    opacity: 1;
}*/
#siteFeature #tabContainer a:active {
    outline:none;
}
#siteFeature #tabContainer a:focus {
    outline:none;
}
#siteFeature-nav #SF-n-prev {
    position:absolute;
    top:0px;
    display:block;
    width:20px;
    height:20px;
    background:#ffffff url(../../../images/webandpeople/advancedslider/tab-nav-arrows.gif) 0px 0px no-repeat;
    border:1px solid #b1b1b1;
    outline:none;
    z-index:1337;
    border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    -webkit-border-top-left-radius:6px;
    border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    -webkit-border-top-right-radius:6px;
}
#siteFeature-nav #SF-n-prev i {
    display:none;
}
#siteFeature-nav #SF-n-next {
    position:absolute;
    top:0px;
    display:block;
    width:20px;
    height:20px;
    background:#ffffff url(../../../images/webandpeople/advancedslider/tab-nav-arrows.gif) -20px 0px no-repeat;
    border:1px solid #b1b1b1;
    outline:none;
    margin:-1px 0px 0px 0px;
    z-index:1337;
    border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    -webkit-border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    -webkit-border-bottom-right-radius:6px;
}
#siteFeature-nav #SF-n-next i {
    display:none;
}
/* ----------------------------------------------------------------------
    The 2 declarations below style the text in the tabs. If you have more/less than the default 4 tabs, you'll likely need to tweak the padding.
    Be aware of the IE6,7 specific padding on the h4.
 ---------------------------------------------------------------------- */
#siteFeature #tabContainer a h4 {
    padding:1em 1em 0px 1em;
    position:relative;
    /*IE6|7*/ *padding:10px 11px 0px 11px;
    font-size: 13px;
    text-align: left;
}
#siteFeature #tabContainer a p {
    padding:2px 1em 0px 1em;
    position:relative;
    text-align: left;
}
#siteFeature #tabContainer a span {
    display:none;
}
#siteFeature #tabContainer a.selected span {
    overflow:hidden;
    display:block;
    position:absolute;
    top:0px;
}
#siteFeature #tabContainer a.selected span span {
    height:100%;
}
#siteFeature.left #tabContainer a.selected span {
    left:0px;
}
#siteFeature.right #tabContainer a.selected span {
    right:0px;
}
#siteFeature #tabContainer a span img {
    /*height:100%;*/
    position:absolute;
    top:0px;
}
#siteFeature.left #tabContainer a span img {
    left:0px;
}
#siteFeature.right #tabContainer a span img {
    left:0px;
}
/*COLORS*/
#siteFeature #tabContainer a.selected span span {
    /*background:#e9e9e9;*/
}
#siteFeature #txtBoxContainer div span {
   background:#fff; /*right conteiner*/
}
#siteFeature.right #tabContainer,
#siteFeature.left #tabContainer,
#siteFeature #tabContainer {
    border-color: #b1b1b1
}

#siteFeature #tabContainer a:link,  #siteFeature #tabContainer a:visited {
    background-color: #f4f4f4;
    border-bottom: 1px solid #b1b1b1;
    font-size: 11px;
    text-decoration: none;
    opacity: 0.95;
}
#siteFeature #tabContainer a:hover {
    background:#e7e7e7;
    opacity: 1;
}
/*left tabs text*/
#siteFeature #tabContainer a h4 {
    color:#333333;
    font-size: 14px;
    text-align: left;
    margin: 0;
    padding: 3px 0px 0px 10px;
}
#siteFeature #tabContainer a p {
    text-align: left;
}
/*right tabs text*/
#siteFeature #txtBoxContainer div div h3 {
    font-size: 20px;
    line-height: 18px;
    margin: 25px 0px 15px 0px;
    text-align: left;
    color: #333333;
}
#siteFeature #txtBoxContainer div div p {
    margin: 0px 0px 15px 0px;
    text-align: left;
}

/* link */
#siteFeature #txtBoxContainer div div a:link, #siteFeature #txtBoxContainer div div a:visited {
    color: #FFFFFF;
    margin: 0 0 0 1em;
    padding: 2px 5px;
    text-decoration: none;
    border-radius: 3px;
    float: left;
    position:relative;
}

#siteFeature #txtBoxContainer div div a:hover {
    color: #FFFFFF;
}

/*GRAY*/
#preFeature div a:link,
#preFeature div a:visited,
#siteFeature #tabContainer a h4 {
    color:#7F7F7F;
}
#siteFeature #txtBoxContainer div div a:link,
#siteFeature #txtBoxContainer div div a:visited,
#siteFeature #txtBoxContainer div div a:hover  {
    background: #7F7F7F;
}
#siteFeature #tabContainer a p {
    color: #4D4D4D;
}