/* 
 * ---------------------------------------- *
 * Name: Banner Carousel Styles             *
 * Type: CSS                                *
 * Version: v1.2.1                          *
 * Author: Matt O'Neill                     *
 * ---------------------------------------- *
 */

/* -------------------------------
   Core Styling
   ------------------------------- */

/* Reset Styles */
.carousel-type-1, .carousel-type-2 {width: 970px; margin: auto; overflow: hidden; position: relative;margin-bottom: 20px;}
.banner ul, .banner ol, .banner article { list-style: none; }
.banner {width: 970px; height: 269px; z-index: 1; position: relative; overflow: hidden; float: left; margin: 0 auto;}
.banner.infinite { overflow: visible; }
.banner.infinite .mask { z-index: 3; background: #fff; position: absolute; top: 0; left: 0;height:100%;float: left; opacity: 0.7; filter: alpha(opacity=70);-moz-opacity: 0.7;-khtml-opacity: 0.7; }
.banner .slide-container { position: relative;width: 99999px;float: left; height: 264px; background:#fff;}
.banner .loader { background: url(/Styles/plugins/src/banner-loader.gif) center rgba(255,255,255,0.7) no-repeat; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; }

/* temp bg color */
.banner .slide-container > article { background: #deefff;overflow: hidden; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlZWZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OGJlZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #deefff 0%, #98bede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#98bede)); background: -webkit-linear-gradient(top, #deefff 0%,#98bede 100%); background: -o-linear-gradient(top, #deefff 0%,#98bede 100%); background: -ms-linear-gradient(top, #deefff 0%,#98bede 100%); background: linear-gradient(to bottom, #deefff 0%,#98bede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 ); }

/* For slide */
.banner .slide-container > article  { display: block; position: relative; width: 970px; height: 269px; float: left; }

/* For fade */
.banner.fade .slide-container { width: 920px; }
.banner.fade .mask { display: none; }
.banner.fade .slide-container > article  { position: absolute; display:none; z-index:0;}
.banner.fade .slide-container > article:first-child  { display: block; }

/* controls */
.banner > .step.prev { z-index: 3000; width: 40px; height:60px; background: url(/Styles/plugins/src/step-arrows.png) -40px rgba(0,0,0,0.6) no-repeat; position: absolute; top: 50%; left: -20px; margin-top: -30px; cursor: pointer; }
.banner > .step.next { z-index: 3000; width: 40px; height: 60px; background: url(/Styles/plugins/src/step-arrows.png) rgba(0,0,0,0.6) no-repeat; position: absolute; top: 50%; right: -20px; margin-top: -30px; cursor: pointer; }
.banner > .pagination-controls { z-index: 3; position: absolute; left:50%; bottom: 0; padding: 10px;}
.banner > .pagination-controls > span { cursor: pointer; float: left; margin-left: 7px; width: 10px; height: 10px; border-radius: 10px; background: #222; /*-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;  */ }
.banner > .pagination-controls > span.active { background: #444; }
.banner > .pagination-controls > span:first-child {margin-left: 0; } 
.banner > .pagination-controls > span:hover { background: #666; }

/* Primary Article */
.banner article:first-child { display: block;}
.banner article img.fullsize{ z-index: 0; position: absolute; left: 0px; top: 0px; width: 960px; height: 295px; }
.banner article .title { padding-right: 20px; height: 50px; position: absolute; z-index: 1;  }
.banner article .title h2 {}
.banner article .description { width: 420px; padding-right: 20px; position: absolute;  z-index: 1; }

.banner .slide-container > article > .inner { margin: 20px 30px; z-index: 1; position: relative; }

/* Legend Pagination */
.banner .legend { margin: 0; display: none;height: 25px; padding: 0 9px; position: absolute; background: #ccc; left: 50%; bottom: 0px; z-index: 2;}
.banner .legend li{background: url(/Styles/img/plugins/banner/legend.png); display: none; float: left; height: 10px; width: 10px; margin: 8px 0px 8px 10px; cursor: pointer; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.banner .legend li.active{ background:  url(/Styles/img/plugins/banner/legend-active.png); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.banner .legend li:first-child{ margin-left: 0;}

/* custom area */
.carousel-type-2, .carousel-type-1 {width: 970px; margin: auto; overflow: hidden; position: relative;margin-bottom: 20px;}
.carousel-type-1 {height: 310px;}
.banner .content-areas {width: 100%; position: absolute;left: 0;right: auto;color: #000;}
.banner .content-areas div { position: relative; height: 269px}
.banner .content-areas .half-left { width: 475px; left: 10px;right: auto;float: left; }
.banner .content-areas .half-right { width: 475px; left: auto; right: 10px;float: right;}
.banner .content-areas .full-width { width: 950px;margin: auto; }
/*.banner .content-areas a { text-transform: uppercase;text-decoration: underline !important;color: #E30613 !important;background: transparent !important;}*/
.ie7 .banner .content-areas p, .ie7 .banner .content-areas h2, .ie7 .banner .content-areas h3 { margin: 0.83em 0;}

.carousel-type-2 .banner .content-areas {  }
.carousel-type-2 .banner .content-areas .half-left { width: 415px; left: 70px; }
.carousel-type-2 .banner .content-areas .half-right { width: 415px; right: 70px; }
.carousel-type-2 .banner .content-areas .full-width { width: 830px;margin: auto;}

.banner article.blue .content-areas a { color: #0088C2 !important; }
.banner article.magenta .content-areas a { color: #D7007F !important; }
.banner article.yellow .content-areas a { color: #fc0 !important; }
.banner article.gray .content-areas a { color: #D0D0d0 !important; }
.banner article.grey-medium .content-areas a { color: #9d9d9c !important; }
.banner article.grey-dark .content-areas a { color: #646363 !important; }

.carousel-type-1 .banner > .pagination-controls {width: 100%; clear: both;bottom: 7px; left: 0; margin: 0 !important; padding: 0; background: none; height: 55px; position: relative;}
.carousel-type-1 .banner > .pagination-controls > span {display: none;}
.carousel-type-1 .banner > .pagination-controls > .bottom-control {display: block; width: 25%; float: left; text-align: center;margin: 0; padding: 0; background: none !important; margin-left: 0; position: relative; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; height: 55px;}
.carousel-type-1 .banner > .pagination-controls > .bottom-control > .link-area {margin: 0; background: url(/images/dummyForCarousel/gradient-sprite.png) center -822px; height: 15px; padding: 19px 0 21px; }
.carousel-type-1 .banner > .pagination-controls > .bottom-control.active > .link-area {background-position: center -56px;}
.carousel-type-1 .banner > .pagination-controls > .bottom-control > .link-area a.read-more, .carousel-type-1 .banner > .pagination-controls > .bottom-control .link-area > span.title {display: block; padding: 6px 10px; border-left: 1px solid white; color: white; text-decoration: none; cursor: pointer;background: none !important;}
.carousel-type-1 .banner > .pagination-controls > .bottom-control > .link-area a.read-more, .carousel-type-1 .banner > .pagination-controls > .bottom-control > .link-area.active span.title {display: none;}
.carousel-type-1 .banner > .pagination-controls > .bottom-control > .link-area a.read-more:hover { text-decoration: underline;}
.carousel-type-1 .banner > .pagination-controls > .bottom-control > .link-area.active a.read-more {display: block;}
.carousel-type-1 .banner > .pagination-controls > .bottom-control:first-child  > .link-area a.read-more, .carousel-type-1 .banner > .pagination-controls > .bottom-control:first-child  > .link-area span.title {border-left: none;}
.carousel-type-1 .banner > .pagination-controls > .bottom-control .description {position: absolute; bottom: 44px; left: 0; z-index: 200; height: 268px; overflow: hidden; display: none;}
.carousel-type-1 .banner > .pagination-controls > .bottom-control .description .header {background: url(/images/dummyForCarousel/gradient-sprite.png) center top white; overflow: hidden; clear: both; text-align: center; display: block; color: white; height: 55px; line-height: 45px;zoom: 1;}
.carousel-type-1 .banner > .pagination-controls > .bottom-control .description .content {display: block; text-align: left; padding: 15px; background: white; height: 235px; color: black;}
.banner > .step.next { background: url(/images/dummyForCarousel/carousel-nav-sprite.png) -75px -2.5px; right: 0; width: 42px; height: 85px; margin-top: -42.5px;}
.banner > .step.prev { background: url(/images/dummyForCarousel/carousel-nav-sprite.png) -30px -2.5px; left: 0; width: 42px; height: 85px; margin-top: -42.5px;}
.banner > .pagination-controls { background: url(/images/dummyForCarousel/carousel-nav-sprite.png) -25px -80px; padding: 14px 18px; }
.banner > .pagination-controls > span { -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: url(/images/dummyForCarousel/carousel-nav-sprite.png) 0 -11px; width: 11px; height: 11px; margin-left: 10px;}
.banner > .pagination-controls > span:hover { background: url(/images/dummyForCarousel/carousel-nav-sprite.png) 0 -11px;}
.banner > .pagination-controls > span.active { background: url(/images/dummyForCarousel/carousel-nav-sprite.png) 0 0;}

.carousel-type-1 .banner > .pagination-controls > .bottom-control.blue .description .header { background-position: center -118px; }
.carousel-type-1 .banner > .pagination-controls > .bottom-control.active.blue > .link-area {background-position: center -174px;}

.carousel-type-1 .banner > .pagination-controls > .bottom-control.magenta .description .header { background-position: center -236px; }
.carousel-type-1 .banner > .pagination-controls > .bottom-control.active.magenta > .link-area {background-position: center -292px;}

.carousel-type-1 .banner > .pagination-controls > .bottom-control.yellow .description .header { background-position: center -354px; }
.carousel-type-1 .banner > .pagination-controls > .bottom-control.active.yellow > .link-area {background-position: center -410px;}

.carousel-type-1 .banner > .pagination-controls > .bottom-control.gray .description .header { background-position: center -472px; }
.carousel-type-1 .banner > .pagination-controls > .bottom-control.active.gray > .link-area {background-position: center -528px;}

.carousel-type-1 .banner > .pagination-controls > .bottom-control.grey-medium .description .header { background-position: center -590px; }
.carousel-type-1 .banner > .pagination-controls > .bottom-control.active.grey-medium > .link-area {background-position: center -646px;}

.carousel-type-1 .banner > .pagination-controls > .bottom-control.grey-dark .description .header { background-position: center -708px; }
.carousel-type-1 .banner > .pagination-controls > .bottom-control.active.grey-dark > .link-area {background-position: center -764px;}

.carousel-type-1 .banner.greyscale article { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: gray; }


/* page editor */
.carousel-type-1.edit-mode { height: auto;margin-top: 10px;}
.carousel-type-1.edit-mode .banner { height: auto}
.carousel-type-1.edit-mode .slide-container { width: 100%;height: auto }
.carousel-type-1.edit-mode .slide-container > article { float: left;margin-bottom: 5px;}

.carousel-type-1.edit-mode .pagination-controls { position: relative;height:auto;margin-top: 269px!important;float: left;}
.carousel-type-1.edit-mode .pagination-controls > .bottom-control { height: auto; }
.carousel-type-1.edit-mode .pagination-controls > .bottom-control .description { display: block;width: 100%;position: relative;margin-top: -269px;}
.carousel-type-1.edit-mode .pagination-controls > .link-area { position: relative;  }


.carousel-type-2.edit-mode { height: auto;margin-top: 10px;}
.carousel-type-2.edit-mode .banner { height: auto}
.carousel-type-2.edit-mode .slide-container { width: 100%;height: auto }
.carousel-type-2.edit-mode .slide-container > article { float: left;margin-bottom: 5px;}