/* * jQuery FlexSlider v1.8 * http://flex.madebymufffin.com * * Copyright 2011, Tyler Smith * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* Browser Resets */ .flex-container a:active, .flexslider a:active {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider {width: 100%; margin: 0; padding: 0;} .flexslider .slides > li {display: none;width:1003px;height:327px;cursor:pointer;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {max-width: 100%; display: block;border:0px solid #CCC;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;} .flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative;} /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container {zoom: 1; position: relative;} /* Caption style */ /* IE rgba() hack */ .flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;} .flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;} /* Direction Nav */ .flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;z-index:10000;} .flex-direction-nav li .next {background-position: -52px 0; right: -21px;} .flex-direction-nav li .prev {left: -20px;} .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;z-index:10000;} /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;z-index:10000;} .flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;} .flex-control-nav li:first-child {margin: 0;} .flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;} .flex-control-nav li a:hover {background-position: 0 -13px;} .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;} /* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ .home-container { position: relative; width:1003px; margin: 0 auto; padding: 0;border:0px solid #FFF;height:327px; } .column, .columns { float: left; display: inline; margin-left:0px; margin-right:0px; } .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .home-container .one.column { width: 40px; } .home-container .two.columns { width: 100px; } .home-container .three.columns { width: 160px; } .home-container .four.columns { width: 220px; } .home-container .five.columns { width: 280px; } .home-container .six.columns { width: 340px; } .home-container .seven.columns { width: 400px; } .home-container .eight.columns { width: 460px; } .home-container .nine.columns { width: 520px; } .home-container .ten.columns { width: 580px; } .home-container .eleven.columns { width: 640px; } .home-container .twelve.columns { width: 700px; } .home-container .thirteen.columns { width: 760px; } .home-container .fourteen.columns { width: 820px; } .home-container .fifteen.columns { width: 880px; } .home-container .sixteen.columns { width: 1003px; height:326px;} .home-container .one-third.column { width: 300px; } .home-container .two-thirds.column { width: 620px; } /* Offsets */ .home-container .offset-by-one { padding-left: 60px; } .home-container .offset-by-two { padding-left: 120px; } .home-container .offset-by-three { padding-left: 180px; } .home-container .offset-by-four { padding-left: 240px; } .home-container .offset-by-five { padding-left: 300px; } .home-container .offset-by-six { padding-left: 360px; } .home-container .offset-by-seven { padding-left: 420px; } .home-container .offset-by-eight { padding-left: 480px; } .home-container .offset-by-nine { padding-left: 540px; } .home-container .offset-by-ten { padding-left: 600px; } .home-container .offset-by-eleven { padding-left: 660px; } .home-container .offset-by-twelve { padding-left: 720px; } .home-container .offset-by-thirteen { padding-left: 780px; } .home-container .offset-by-fourteen { padding-left: 840px; } .home-container .offset-by-fifteen { padding-left: 900px; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .home-container { width: 768px; } .home-container .column, .home-container .columns { margin-left: 10px; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .home-container .one.column { width: 28px; } .home-container .two.columns { width: 76px; } .home-container .three.columns { width: 124px; } .home-container .four.columns { width: 172px; } .home-container .five.columns { width: 220px; } .home-container .six.columns { width: 268px; } .home-container .seven.columns { width: 316px; } .home-container .eight.columns { width: 364px; } .home-container .nine.columns { width: 412px; } .home-container .ten.columns { width: 460px; } .home-container .eleven.columns { width: 508px; } .home-container .twelve.columns { width: 556px; } .home-container .thirteen.columns { width: 604px; } .home-container .fourteen.columns { width: 652px; } .home-container .fifteen.columns { width: 700px; } .home-container .sixteen.columns { width: 748px; } .home-container .one-third.column { width: 236px; } .home-container .two-thirds.column { width: 492px; } /* Offsets */ .home-container .offset-by-one { padding-left: 48px; } .home-container .offset-by-two { padding-left: 96px; } .home-container .offset-by-three { padding-left: 144px; } .home-container .offset-by-four { padding-left: 192px; } .home-container .offset-by-five { padding-left: 240px; } .home-container .offset-by-six { padding-left: 288px; } .home-container .offset-by-seven { padding-left: 336px; } .home-container .offset-by-eight { padding-left: 348px; } .home-container .offset-by-nine { padding-left: 432px; } .home-container .offset-by-ten { padding-left: 480px; } .home-container .offset-by-eleven { padding-left: 528px; } .home-container .offset-by-twelve { padding-left: 576px; } .home-container .offset-by-thirteen { padding-left: 624px; } .home-container .offset-by-fourteen { padding-left: 672px; } .home-container .offset-by-fifteen { padding-left: 720px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .home-container { width: 300px; } .columns, .column { margin: 0; } .home-container .one.column, .home-container .two.columns, .home-container .three.columns, .home-container .four.columns, .home-container .five.columns, .home-container .six.columns, .home-container .seven.columns, .home-container .eight.columns, .home-container .nine.columns, .home-container .ten.columns, .home-container .eleven.columns, .home-container .twelve.columns, .home-container .thirteen.columns, .home-container .fourteen.columns, .home-container .fifteen.columns, .home-container .sixteen.columns, .home-container .one-third.column, .home-container .two-thirds.column { width: 300px; } /* Offsets */ .home-container .offset-by-one, .home-container .offset-by-two, .home-container .offset-by-three, .home-container .offset-by-four, .home-container .offset-by-five, .home-container .offset-by-six, .home-container .offset-by-seven, .home-container .offset-by-eight, .home-container .offset-by-nine, .home-container .offset-by-ten, .home-container .offset-by-eleven, .home-container .offset-by-twelve, .home-container .offset-by-thirteen, .home-container .offset-by-fourteen, .home-container .offset-by-fifteen { padding-left: 0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .home-container { width: 420px; } .columns, .column { margin: 0; } .home-container .one.column, .home-container .two.columns, .home-container .three.columns, .home-container .four.columns, .home-container .five.columns, .home-container .six.columns, .home-container .seven.columns, .home-container .eight.columns, .home-container .nine.columns, .home-container .ten.columns, .home-container .eleven.columns, .home-container .twelve.columns, .home-container .thirteen.columns, .home-container .fourteen.columns, .home-container .fifteen.columns, .home-container .sixteen.columns, .home-container .one-third.column, .home-container .two-thirds.column { width: 420px; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .home-container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* #White Message Box ================================================== */ .whitemessagebox { background: #ffffff; border-radius: 10px; padding-top: 3px; padding-left: 20px; padding-bottom: 3px; padding-right: 20px; margin-bottom: 0px; } .orangemessagebox { background: #ff8a00; border-radius: 10px; background-image: url(http://www.moofwd.com/wp-content/uploads/2011/12/orange-kraft.png); padding-top: 3px; padding-left: 20px; padding-bottom: 3px; padding-right: 20px; margin-bottom: 20px; } .graymessagebox { background: #9e9b89; border-radius: 10px; padding-top: 3px; padding-left: 20px; padding-bottom: 3px; padding-right: 20px; margin-bottom: 20px; } a, a:hover{ color: #ee7727; text-decoration: none; font-weight: bold; } a:hover{} .module a:hover{opacity: 1;} .flexslider {background: transparent; border: 0 solid #fff;-webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0;} .flexslider-container {overflow: hidden;margin-bottom:30px;} .slider-shadow:after {content:"\00a0";background: url(../images/home-slider/slide-shadow.png) bottom center no-repeat;-webkit-background-size: contain;-moz-background-size: contain;-o-background-size: contain;background-size: contain;overflow: visible;display: block; position: absolute;margin-top: -32px;height: 62px; /* Same as your image height */ width: 100%; /* Same as your image width */ } .flex-caption {width: 100%; z-index: 9999; padding: 22px; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 15px; line-height: 21px; margin-bottom: 0;} /* Next/Previous Buttons *********************************/ .flex-direction-nav{overflow: hidden; margin: 0;} .flex-direction-nav li{margin-bottom: 0;} .flex-direction-nav li a {width: 45px; height: 38px; margin: -13px 0 0; display: block; background: url(../images/home-slider/next-prev.png) no-repeat 0 0; position: absolute; top: 45%; cursor: pointer; text-indent: -9999px;z-index:10000;} .flex-direction-nav li a.next {background-position: -38px 0; right: -150; text-indent: -9999px;z-index:10000;} .flex-direction-nav li a.prev {background-position: 0 0; left: -150; text-indent: -9999px;z-index:10000;} .flex-direction-nav li a.next, .flex-direction-nav li a.prev, .flex-control-nav { /* default opacity */-moz-opacity:0.0; filter: alpha(opacity=00);opacity:0.0; -moz-transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;z-index:10000;} .flexslider-container:hover li a.next,.flexslider-container:hover li a.prev{ /* hover opacity */-moz-opacity:0.7 !important; filter: alpha(opacity=70) !important;opacity:0.7 !important;z-index:10000;} .flex-direction-nav li a.next:hover,.flex-direction-nav li a.prev:hover{ /* hover opacity */-moz-opacity:1.0 !important; filter: alpha(opacity=100) !important;opacity:1.0 !important;z-index:10000;} .flexslider-container:hover li a.next {right: 30px;} /* hover position */ .flexslider-container:hover li a.prev {left: 30px;} /* hover position */ /* Control Nav *********************************/ .flex-control-nav {margin:20px 0 0 0;position: absolute;bottom:20px;width: 100%;text-align:center; -moz-opacity:0.0;filter: alpha(opacity=00);opacity:0.0;border:0px solid #fff;display:block;} .flexslider-container:hover .flex-control-nav{-moz-opacity:1;filter: alpha(opacity=100);opacity:1;} .flex-control-nav li {margin: 0 0 0 5px; /* float: left; */} .flex-control-nav li:first-child {margin: 0;} .flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(../images/home-slider/dot-circul.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;} .flex-control-nav li a:hover {background-position: 0 -13px;} .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}