/* Theme Name: Travel and Transport Theme URI: http://www.turnpost.com Description: HTML5 responsive WordPress framework based on ZURB's Foundation for travel and transport Version: 3.0.0 Author: Jamison Hiner Author URI: http://turnpost.com/ License: MIT License License URI: http://www.opensource.org/licenses/mit-license.php */ /* -------------------------------------------------- Table of Contents ----------------------------------------------------- :: Customized Adjustments of Foundation for WordPress :: Styling Basic WordPress Outputs :: Customize Foundation Style Pagination for WP-Pagenavi :: Customize for BuddyPress :: Your Customized Style */ /* --------------------------------------------------- Customized Adjustments of Foundation for WordPress --------------------------------------------------- */ * {list-style-image: none !important;} /* Foundation-specific presentation CSS by ZURB */ div.reverie-header { margin: 0 0 0px 0; padding: 15px 0 0 0; height: 90px;} div.reverie-header h1 { font-weight: 500; margin-bottom: 0; padding: 0; width: 250px;} div.reverie-header h1 a { color: #181818; } div.reverie-header h1 a:hover { color: #181818; } @media handheld, only screen and (max-width: 767px) { header { position: relative; } header .subheader { margin-bottom: 0; } header .menu-action { float: left; position: relative; top: 1px; margin-top: -12px; } header .menu-action .button.small { padding: 8px; } header .menu-action .button.small svg { opacity: 0.5; } header h1 { font-size: 27px; font-size: 2.7rem; margin-bottom: 18px; } header h4 { font-size: 17px; font-size: 1.7rem; } } .navigation {margin-top: 31px; white-space: nowrap;} .logomain {position: absolute; top: 0px; left: 0px;} @media only screen and (max-width: 767px) { /* Small Device Styles here */ .logomain {text-align: center!important; margin: 10px auto!important; position: relative!important;} } /* ----------------------------------------- Styling Basic WordPress Outputs ----------------------------------------- */ /* Global */ h1, h2, h3, h4, h5 { font-family: "myriad-pro",sans-serif; font-weight: 300; } /* Add Divider for Listed Posts */ .divider { background:url(images/blog_hr.jpg) no-repeat center top; height:36px; margin:20px 0 27px; clear: both;} /* Add Class for Images */ img {border: 0px;} img.alignright { float: right; margin: 0 0 18px 18px; } img.alignleft { float: left; margin: 0 18px 18px 0; } img.aligncenter { display: block; margin: 18px auto; } figure {margin: 0px!important;} h1 {padding: 0 0 10px 0;} /* Sidebar Adjustment */ .sidebar-section { padding-bottom: 10px; padding-top: 20px; font-size: 13px; font-size: 1.3rem; font-weight: normal; } .sidebar-section li {line-height: 1.4;} #sidebar {padding-left: 20px;} #sidebarblog {padding-left: 20px;} /* Footer Nav */ .footer-section { padding-bottom: 10px; padding-top: 20px; font-size: 13px; font-size: 1.3rem; font-weight: normal; } .footer-nav li { display: block; float: right; padding-left: 3%; margin-bottom: 0; } /* Breadcrumb Adjustment */ ul.breadcrumbs li span { padding-left: 3px; } ul.breadcrumbs li a { padding-left: 0; } /* Comment Textarea Adjustment */ #respond textarea { height: 100px; } /* ------------------------------------------------------- Adjust Foundation 3 Pagination Style for WordPress ---------------------------------------------------- */ ul.page-numbers { display: block; height: 24px; margin-left: -5px; } ul.page-numbers li {float: left; display: block; height: 24px; color: #999; font-size: 14px; margin-left: 5px; } ul.page-numbers li a { display: block; padding: 1px 7px 1px; color: #555; } ul.page-numbers li:hover a, ul.page-numbers li a:focus { background: #e6e6e6; } ul.page-numbers li.unavailable a { cursor: default; color: #999; } ul.page-numbers li.unavailable:hover a,ul.page-numbers li.unavailable a:focus { background: transparent; } ul.page-numbers li span.current { background: #2ba6cb; color: #fff; font-weight: bold; cursor: default; display: block; padding: 1px 7px 1px; } /* --------------------------- :: Customize for BuddyPress --------------------------- */ .padder label + textarea { margin-top: 0; } .padder #item-body #message-threads .thread-avatar img { max-width: 50px; } ul.item-list.activity-list li.new_blog_post { padding-bottom: 15px; } .padder select { display: inline-block; } .padder div.item-list-tabs { margin: 25px 0; } .padder form#whats-new-form textarea { height: 30px; } .padder .button { display: inline; } /* -------------------------- Your Customized Style ----------------------- */ .topsocial {position:absolute; right: 155px; top: 10px; text-transform: uppercase;} #panel { background: #75B345; display: none;} .slider {margin: 0; padding: 0; border-top: solid 3px #75b345; width: 100%; margin: 0 auto;} .slider.warning{margin: 0; padding: 0; border-top: solid 3px #d68809; width: 100%; margin: 0 auto;} .slider.alert{margin: 0; padding: 0; border-top: solid 3px #d60909; width: 100%; margin: 0 auto;} .slide {margin: 0; padding: 0; border-top: solid 0px #2BA6CB; position: relative; width: 960px; margin: 0 auto;} .btn-slide {float:right; font-style: italic; font-size: 10px!important; font-family: georgia; margin-right: 0px; padding: 15px 10px 10px 10px!important;} .btn-slide:hover {color:#ebebeb;} .active {background-position: right 12px;} ul.sociallinks li {display: inline-block; float:left; padding: 2px; vertical-align:middle; font-size: 10px; font-family: sans-serif;} .sociallinks a{color:#6d6e71;} ul.sociallinksfoot li {display: inline-block; vertical-align:middle; text-align: center; font-style: italic; padding-right: 5px;} .sociallinksfoot a{color:#6d6e71;} ul.sociallinksfoot li.textfoot {padding: 5px;} .icon-user{color:#75b445;} ul.sociallinks li.custlogin {padding: 5px;} .searchbar {width: 240px; position: absolute; z-index: 333; right: 1px; top: 90px; padding: 0px; height:35px; margin: 0px;} .slidermain {height: 446px;} .slidermainbottom {background:url(images/slider_bottom.jpg) no-repeat center top; height:15px; width:100%;} .sliderpagebottom {background: #f6f6f6 url(images/sliderpage_bottom.jpg) no-repeat center top; height:40px; width:100%;padding: 13px} .homeslidenav {position: absolute; width: 77px; height: 39px; top: 500px; right: 0px; z-index: 1000; } .homecopy p{font-size: 22px; font-family: "myriad-pro",sans-serif; font-weight: 300; text-align: center; line-height: 32px} .homecopy span{font-weight: 500; color:#0063a4;} .darkblue {color:#0063a4;} .lightblue {color:#67c7e9;} .orange {color: #fcb033;} .green {color: #75B445;} .phome {padding: 0 20px 0 0; min-height: 150px; overflow: hidden;} .learnmore {border-top: 1px solid #f1f1f1; padding: 15px 0; font-family: georgia, serif; font-style: italic; width: 91px;} .learnmore a {color:#75b445;font-size: 13px!important; background: transparent url(images/leftarrow.png) 0px 3px no-repeat!important; padding-left: 15px!important;} .viewall {text-align: right; margin: 15px 0 0 0;} .paddingleft {padding-right: 10px!important;} .paddingcenter {padding: 0 30px 0 10px!important;} .paddingright {padding-left: 10px!important;} /* -------------------------- Customized iPhone ----------------------- */ @media only screen and (max-width: 767px) { .learnmore {text-align: center; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; padding: 15px 0; font-family: georgia, serif; font-style: italic; width: 100%; margin-bottom: 10px; } .phome {padding: 20px; min-height: 5px;} } .bw_logos_01, .bw_logos_02, .bw_logos_03, .bw_logos_04, .bw_logos_05, .bw_logos_06, .bw_logos_07, .bw_logos_08, .bw_logos_09, .bw_logos_10 { background: url(images/sprites_logos.png) no-repeat; } .bw_logos_01{ background-position: 0 0; width: 136px; height: 80px; } .bw_logos_01:hover{ background-position: 0 -86px ; width: 136px; height: 80px; } .bw_logos_02{ background-position: -141px 0; width: 101px; height: 80px; } .bw_logos_02:hover{ background-position: -141px -86px ; width: 101px; height: 80px; } .bw_logos_03{ background-position: -250px 0; width: 176px; height: 80px; } .bw_logos_03:hover{ background-position: -251px -85px ; width: 176px; height: 80px; } .bw_logos_04{ background-position: -431px 0; width: 127px; height: 80px; } .bw_logos_04:hover{ background-position: -431px -86px ; width: 127px; height: 80px; } .bw_logos_05{ background-position: -565px 0; width: 120px; height: 80px; } .bw_logos_05:hover{ background-position: -566px -86px; width: 120px; height: 80px; } #content-info {background: #efefef url(images/footer_fade.jpg) repeat-x; min-height: 412px;} .topimage {background: url(images/footer_top.png) no-repeat top center;} .centeredfooter {text-align: center; font-style: italic; height: 100px; padding: 0px 0 0 0;} .bottomfooter {margin: 0 0 0 30px; color: #fff; line-height: 1em; font-family: "myriad-pro",sans-serif; font-weight: 600; font-size: 12px;} .bottomfooter span {float: right; text-align: right; width: 400px; font-size: 30px; padding-right: 30px;} hr.white {border: solid #fff; border-width: 1px 0 0; clear: both; margin: 22px 0 10px 0px; height: 0; padding-top:10px;} #content-info p{color:#fff; padding: 0 15px 0 0; font-family: "myriad-pro",sans-serif;} #content-info a:link{color:#fff; padding: 0px; width: 100%; line-height: 1em; font-family: sans-serif; font-weight: 600; font-size: 12px; margin-bottom: 3px } #content-info a:visited{color:#fff;} #menu-links li {padding-bottom: 5px; margin-left: 0px; list-style: none;} #menu-additional-resources li {padding-bottom: 5px; margin-left: 0px; list-style: none;} .emailsignup .gfield_label {display: none!important; visibility: hidden;} .warning {background: #d68809!important;} .alert {background: #d60909!important;} #menu-travel-resources-a li a{font-size: 10px; font-family: sans-serif; font-weight: bold; color: #fff; line-height: 1;} #menu-travel-resources-b li a{font-size: 10px; font-family: sans-serif; font-weight: bold; color: #fff; line-height: 1;} #menu-travel-resources-c li a{font-size: 10px; font-family: sans-serif; font-weight: bold; color: #fff; line-height: 1;} .menu-travel-text {font-size: 10px; font-family: sans-serif; font-weight: bold; color: white;} .textwidget {font-family: sans-serif; padding-left: 15px!important; padding-right: 15px!important;} .widgettitle {padding-left: 15px!important;} .submenu-widget-home {padding-left: 10px!important;} .submenu-widget {padding-left: 14px!important;} .widget_sp_image h2 {display: none; visibility: hidden;} .arrowicon {background: transparent url(images/leftarrow.png) 0px 3px no-repeat!important; padding-left: 15px!important; } .arrowiconwhite {background: transparent url(images/arrow_white.png) 0px 3px no-repeat!important; padding-left: 15px!important; line-height: 1em; } .tricon {background: transparent url(images/tricon.png) 0px 0px no-repeat!important; padding-right: 15px!important; } .lockicon {background: transparent url(images/lockicon.png) 0px 0px no-repeat!important; padding-left: 15px!important; } .alertpanel {border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 10px 0 10px 60px; margin: 20px 0 20px 0; color: #fff; background: transparent url(images/alert_icon.png) 5px 10px no-repeat!important;} .alertpanel a{color: #fff; font-size: 24px; font-family: sans-serif;} .footerblog {padding-bottom: 50px;} .fleftlink a {background: transparent url(images/arrow_white.png) 0px 5px no-repeat!important; padding-left: 15px!important; font-family: georgia, serif!important; font-style: italic!important;} .pullquote1 {border-bottom: 1px solid #e7e7e7; border-top: 1px solid #e7e7e7; padding: 30px 0 30px 80px; color: #75b345; font-size: 30px; line-height: 1; background: transparent url(images/tpicon_light.jpg) 0px 10px no-repeat!important; font-family: sans-serif; font-weight: 200; text-transform: uppercase; margin-bottom: 20px;} #breadcrumbs {font-size: 11px; font-style: italic; font-weight: bold;} nav {position: absolute; right: 7px; top: 20px;} nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { color: #75b345; list-style: none; position: relative; display: inline-table; z-index: 3000; padding: 5px 10px; } nav ul:after {content: ""; clear: both; display: block;} nav ul li {color: #333;float: left;} nav ul li:hover {} nav ul li:hover a {color: #75b345;} nav ul li a {display: block; padding-bottom: 0px; color: #75b345; text-decoration: none; font-weight: bold; font-style: italic; line-height: 2em;} .alltech {background: #f9f9f9; outline: 1px solid #ebebeb; padding-left: 2px; padding-right: 2px; margin-bottom: 10px!important; position: absolute; width: 150px; right: 10px; top: 1px; text-align: center; -moz-box-shadow: 2px 2px 3px #e9e7e7; -webkit-box-shadow: 2px 2px 3px #e9e7e7; box-shadow: 2px 2px 3px #e9e7e7; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#e9e7e7')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#e9e7e7'); } nav ul ul { position: absolute; top: 30px; right: 0; border: 1px solid #e7e7e7; background: #fff; width: 200px; } nav ul ul li {float: none; position: relative;color: #333;} nav ul ul li a {padding: 5px 10px 5px 15px; color: #333!important; background: transparent url(images/leftarrow.png) 0px 10px no-repeat!important; font-style: normal; font-weight: normal;} nav ul ul li a:hover {color: #444; text-decoration: underline; } nav-tech {position: absolute; right: 7px; top: 145px;} nav-tech ul ul { display: none; } nav-tech ul li:hover > ul { display: block; } nav-tech ul { color: #75b345; list-style: none; position: relative; display: inline-table; z-index: 3000; padding: 5px 10px; } nav-tech ul:after {content: ""; clear: both; display: block;} nav-tech ul li {color: #333;float: left;} nav-tech ul li:hover {} nav-tech ul li:hover a {color: #75b345;} nav-tech ul li a {display: block; padding-bottom: 5px; color: #75b345; text-decoration: none;font-size: 12px; font-weight: bold; font-style: italic; line-height: 2em;} nav-tech ul ul { position: absolute; top: 30px; right: 0px; border: 1px solid #e7e7e7; background: #fff; width: 200px; line-height: 1em; } nav-tech ul ul li {float: none; position: relative;color: #333;} nav-tech ul ul li a {padding: 5px 10px 5px 15px; color: #333!important; background: transparent url(images/leftarrow.png) 0px 10px no-repeat!important; font-style: normal; font-weight: normal;} nav-tech ul ul li a:hover {color: #444; text-decoration: underline; } /*Again getting rid of the bullets*/ .portfolio-grid { font-family: sans-serif; font-size: 12px!important; line-height: 15px; list-style: none; min-height: 165px; } .portfolio-grid a{ font-family: sans-serif; font-size: 12px; font-weight: bold; color: #6d6e71; } /*Floating left gets us the grid. There's some stuff in here you probably could omit, like the height and width.*/ .portfolio-grid li.peeps{ min-height: 165px; } /*Let's get that title to display like a nice label. If you wanted to get really fancy you could add some opacity values.*/ .portfolio-grid a.portfolio-title { color: #75b345; font-size: 16px!important; font-family: sans-serif; margin-bottom: 5px; font-weight: 400; } .portfolio-grid div { margin-left: 125px; font-size: 12px; line-height: 15px; } /*Technology*/ .portfolio-grid2 { font-family: sans-serif; font-size: 12px!important; line-height: 15px; } .portfolio-grid2 a{ font-family: sans-serif; font-size: 12px; font-weight: bold; color: #6d6e71; } .portfolio-grid2 p{ font-size: 11px; padding-right: 10px; } /*Floating left gets us the grid. There's some stuff in here you probably could omit, like the height and width.*/ .portfolio-grid2 li { font-size: 12px!important; line-height: 15px; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; padding: 25px 0!important; height: 275px; margin-bottom: 20px; } /*Let's get that title to display like a nice label. If you wanted to get really fancy you could add some opacity values.*/ .portfolio-grid2 a.portfolio-title { color: #75b345; font-size: 16px!important; font-family: sans-serif; margin-bottom: 5px; font-weight: 400; } .portfolio-title { color: #75b345; font-size: 16px!important; font-family: sans-serif; padding-bottom: 10px; font-weight: 400; padding-top: 40px; line-height: 1; } .portfolio-title-peep { color: #75b345; font-size: 16px!important; font-family: sans-serif; margin-bottom: 5px; font-weight: 400; padding-top: 0px; line-height: 1; } .box { z-index: 1; /* prevent shadows falling behind containers with backgrounds */ margin: 0; padding: 0; } .box img { position: relative; float: left; width: 115px; height: 115px; padding: 0; border: 1px solid #efefef; margin: 0 10px 10px 0; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; behavior: url(pie/PIE.htc); } .box img:before, .box img:after { content: ''; z-index: -1; position: absolute; left: 10px; bottom: 10px; width: 35%; max-width: 75px; /* avoid rotation causing ugly appearance at large container widths */ max-height: 50px; height: 27%; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); -ms-transform: skew(-15deg) rotate(-6deg); -o-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); behavior: url(pie/PIE.htc); } .box img:after { left: auto; right: 10px; -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); -ms-transform: skew(15deg) rotate(6deg); -o-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); } .boxbig { z-index: 1; /* prevent shadows falling behind containers with backgrounds */ margin: 0; padding: 0; } .boxbig img { position: relative; float: left; padding: 0; border: 1px solid #efefef; margin: 0 10px 10px 0; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; behavior: url(pie/PIE.htc); } .boxbig img:before, .boxbig img:after { content: ''; z-index: -1; position: absolute; left: 10px; bottom: 10px; width: 35%; max-width: 75px; /* avoid rotation causing ugly appearance at large container widths */ max-height: 50px; height: 27%; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); -ms-transform: skew(-15deg) rotate(-6deg); -o-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); behavior: url(pie/PIE.htc); } .boxbig img:after { left: auto; right: 10px; -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); -ms-transform: skew(15deg) rotate(6deg); -o-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); } .box2 { z-index: 1; /* prevent shadows falling behind containers with backgrounds */ list-style: none; margin: 0; padding: 0; } .box2 img { position: relative; float: left; padding: 10px; margin: 0 10px 10px 0; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; behavior: url(pie/PIE.htc); } .box2 img:before, .box2 img:after { content: ''; z-index: -1; position: absolute; left: 10px; bottom: 10px; width: 35%; max-width: 75px; /* avoid rotation causing ugly appearance at large container widths */ max-height: 50px; height: 27%; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); -ms-transform: skew(-15deg) rotate(-6deg); -o-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); behavior: url(pie/PIE.htc); } .box2 img:after { left: auto; right: 10px; -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); -ms-transform: skew(15deg) rotate(6deg); -o-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); behavior: url(pie/PIE.htc); } .filterable-grid li {width:48%; float: left; padding-right: 10px; min-height: 285px;} #featured { background: url(spinner.gif) center center #f4f4f4; height: 300px; } #featured img { display: none; } #featured.orbit { background: none; } #featured.orbit img { display: block; } /* CSS */ .orbit-wrapper .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; } .orbit-wrapper:hover .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .view { width: 234px; height: 235px; margin: 0px; overflow: hidden; position: relative; text-align: center; cursor: default; background: #ebebeb; } .view .mask,.view .content { width: 234px; height: 235px; position: absolute; overflow: hidden; top: 0; left: 0; background: #ebebeb; } .view img { display: block; position: relative; } .view h2 { color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; margin: 20px 0 0 0; } .news {background: url(images/news.png) no-repeat center center; position: absolute; bottom: 0px; width: 27px; height:25px;} .video {background: url(images/video.png) no-repeat center center; position: absolute; bottom: 0px; width: 32px; height:30px;} .events {background: url(images/events.png) no-repeat center center; position: absolute; bottom: 0px; width: 32px; height:32px;} .downloads {background: url(images/downloads.png) no-repeat center center; position: absolute; bottom: 0px; width: 24px; height:32px;} .view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center; } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; } .view a.info: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .view-fifth img { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .view-fifth .mask { background-color: rgba(246,246,246,0.9); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .view-fifth h2 { margin: 70px auto 0px auto; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); color: #333; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .view-fifth p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; } .view-fifth a.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; } .view-fifth:hover img { -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .view-fifth:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .view-fifth:hover h2,.view-fifth:hover p,.view-fifth:hover a.info { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .techcontent {width: 680px;} .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* states and images */ .ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); } .ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); } .ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); } .ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); } .ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); } .ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); } /* positioning */ .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-accordion-header {background: #f6f6f6; padding: 10px; } .ui-accordion { width: 100%; } .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; margin-bottom: 10px!important;} .ui-accordion .ui-accordion-header:focus {outline: none;} .ui-accordion .ui-accordion-li-fix { display: inline; } .ui-accordion .ui-accordion-header-active a{ border-bottom: 0 !important; color:#565759!important; font-weight: bold!important;} .ui-accordion .ui-accordion-header a { display: block; color: #6d6e71; font-family: "myriad-pro",sans-serif; font-weight: 600; font-size: 12px;} .ui-accordion-icons .ui-accordion-header a { padding-left: 0.2em; } .ui-accordion .ui-accordion-header .ui-icon { position: absolute; right: .5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 1em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } .ui-accordion .ui-accordion-content-active { display: block; } .loyaltychart {position: relative; background: url(images/bkgd-01.png) center no-repeat; width: 686px; height: 686px; margin-top: -45px;} /* button1 */ #button1 { width: 200px; height: 200px; background-image: url(images/deployoff.png); background-repeat: no-repeat; background-position: center; position:absolute; float: left; overflow: visible; -ms-transition: all .5s ease-in-out; /* THIS IS FOR THE ANIMATION */ -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; bottom: 50px; right: 100px; } #button1 .overlay { width: 495px; height: 495px; position: absolute; top: -150px; left: -150px; text-indent: -9999px;ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background-image: url(images/deployon.png); background-repeat: no-repeat; background-position: center; /* rgba gives color and opacity (transparency) (you can change it to whatever you want) */ -ms-transition: all .3s ease-in-out; /* THIS IS FOR THE ANIMATION */ -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; } #button1:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); -moz-filter: grayscale(0%); } #button1:hover .overlay { width: 495px; height: 495px; margin-top: -25px; opacity: 1; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); filter:0; } /* button2 */ #button2 { width: 200px; height: 200px; background-image: url(images/matureoff.png); background-repeat: no-repeat; background-position: center; position:absolute; float: left; overflow: visible; -ms-transition: all .5s ease-in-out; /* THIS IS FOR THE ANIMATION */ -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; bottom: 50px; left: 100px; } #button2 .overlay { width: 495px; height: 495px; position: absolute; top: -150px; left: -150px; opacity: 0; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); background-image: url(images/matureon.png); background-repeat: no-repeat; background-position: center; /* rgba gives color and opacity (transparency) (you can change it to whatever you want) */ -ms-transition: all .3s ease-in-out; /* THIS IS FOR THE ANIMATION */ -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; } #button2:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); -moz-filter: grayscale(0%); } #button2:hover .overlay { width: 495px; height: 495px; margin-top: -25px; opacity: 1; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); filter:0; } /* button3 */ #button3 { width: 200px; height: 200px; background-image: url(images/refineoff.png); background-repeat: no-repeat; background-position: center; position:absolute; float: left; overflow: visible; -ms-transition: all .5s ease-in-out; /* THIS IS FOR THE ANIMATION */ -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; top: 190px; left: 10px; z-index: 300; } #button3 .overlay { width: 495px; height: 495px; position: absolute; top: -150px; left: -150px; opacity: 0; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); background-image: url(images/refineon.png); background-repeat: no-repeat; background-position: center; /* rgba gives color and opacity (transparency) (you can change it to whatever you want) */ -ms-transition: all .3s ease-in-out; /* THIS IS FOR THE ANIMATION */ -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; } #button3:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); -moz-filter: grayscale(0%); } #button3:hover .overlay { width: 495px; height: 495px; margin-left: 25px; opacity: 1; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); filter:0; } /* button4 */ #button4 { width: 200px; height: 200px; background-image: url(images/designoff.png); background-repeat: no-repeat; background-position: center; position:absolute; float: left; overflow: visible; -ms-transition: all .5s ease-in-out; /* THIS IS FOR THE ANIMATION */ -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; top: 190px; right: 10px; } #button4 .overlay { width: 495px; height: 495px; position: absolute; top: -150px; left: -150px; opacity: 0; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); background-image: url(images/designon.png); background-repeat: no-repeat; background-position: center; /* rgba gives color and opacity (transparency) (you can change it to whatever you want) */ -ms-transition: all .3s ease-in-out; /* THIS IS FOR THE ANIMATION */ -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; } #button4:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); -moz-filter: grayscale(0%); } #button4:hover .overlay { width: 495px; height: 495px; margin-left: -25px; opacity: 1; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); filter:0; } /* button5 */ #button5 { width: 200px; height: 200px; background-image: url(images/exploreoff.png); background-repeat: no-repeat; background-position: center; position:absolute; float: left; overflow: visible; -ms-transition: all .5s ease-in-out; /* THIS IS FOR THE ANIMATION */ -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; top: 40px; left: 240px; z-index:500; } #button5 .overlay { width: 495px; height: 495px; position: absolute; top: -150px; left: -150px; opacity: 0; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); background-image: url(images/exploreon.png); background-repeat: no-repeat; background-position: center; /* rgba gives color and opacity (transparency) (you can change it to whatever you want) */ -ms-transition: all .3s ease-in-out; /* THIS IS FOR THE ANIMATION */ -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; behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ",sizingMethod='crop')"); } #button5:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); -o-filter: grayscale(0%); -ms-filter: grayscale(0%); -moz-filter: grayscale(0%); } #button5:hover .overlay { width: 495px; height: 495px; margin-top: 25px; opacity: 1; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); filter:0; } .fancybox-hidden {display: none;} .smallnav {margin: 40px auto 0px auto; text-align: center; width: 100%; position: relative; clear: both;} @media only screen and (max-width: 1279px) and (min-width: 768px) { .navigation {margin-top: 50px;} .homepeep img {width:150px;} .phonecenter{text-align: center; margin: 0 auto;} .homecopy p { font-size: 18px; font-family: "myriad-pro",sans-serif; font-weight: 300; text-align: center; line-height: 22px; padding-top: 20px; } .homepeepmain {padding:20px;} .bottomfooter { margin: 0 0 0 20px; color: #fff; line-height: 1em; font-family: "myriad-pro",sans-serif; font-weight: 600; font-size: 12px; float: left; } } /* Small screens */ @media only screen and (max-width: 767px) { .topimage {background: none; padding: 20px;} #main {padding: 20px;} .homecopy p { font-size: 16px; font-family: "myriad-pro",sans-serif; font-weight: 300; text-align: center; line-height: 22px; padding-top: 20px; } .homepeep {padding: 20px!important;} #menu-travel-resources-a li a { font-size: 14px; font-family: sans-serif; font-weight: bold; color: #fff; line-height: 1;} #menu-travel-resources-b li a { font-size: 14px; font-family: sans-serif; font-weight: bold; color: #fff; line-height: 1; } #menu-travel-resources-c li a { font-size: 14px; font-family: sans-serif; font-weight: bold; color: #fff; line-height: 1; } ul.side-nav { display: block; list-style: none; margin: 0; padding: 10px 0 0px 20px;} .people {min-height: 250px;} h5 {margin: 0; padding: 0;} .phonecenter{text-align: center; margin: 0 auto;} .phome {padding: 5px; min-height: 5px;} .pullquote1 { border-bottom: 1px solid #e7e7e7; border-top: 1px solid #e7e7e7; padding: 30px 0 30px 80px; color: #75b345; font-size: 22px; line-height: 1; background: transparent url(images/tpicon_light.jpg) 0px 10px no-repeat!important; font-family: sans-serif; font-weight: 200; text-transform: uppercase; margin-bottom: 20px; } .bottomfooter { margin: 0 0 0 0px; color: #fff; line-height: 1em; font-family: "myriad-pro",sans-serif; font-weight: 600; font-size: 12px; } .filterable-grid li {width:250px; margin: 0 auto; padding: 10px;} #content-info {background: #838182; padding: 10px;} .post-box ul li { line-height: 1.5; list-style-type: disc; font-size: 12px; margin-left: 20px; } .btn-slide {font-style: italic; font-size: 10px!important; font-family: georgia; margin-right: 0px; padding: 15px 10px 10px 10px!important; width: 100%; text-align: left;} .alertpanel a { color: #fff; font-size: 16px; font-family: sans-serif;} .alertpanel { border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 10px 0 10px 60px; margin: 5px 0 20px 0; color: #fff; background: transparent url(images/alert_icon.png) 5px 10px no-repeat!important; } .image-resized img { width:100%; height:auto;} #content-info a:link {line-height: 1.5em;} } /* --------------------------------------------------- Video Embed - Updates for responsive --------------------------------------------------- */ .embed-container { position: relative; padding-bottom: 56.25%; /* 16/9 ratio */ padding-top: 30px; /* IE6 workaround*/ height: 0; overflow: hidden; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* --------------------------------------------------- Fancybox edits --------------------------------------------------- */ #fancybox-close{ right:-34px !important; } #fancybox-title{ width: 680px !important; } /* 240px screens */ @media only screen and (max-width: 319px) { .image-resized img { width:200px; height:auto; } } /* 320px screens */ @media only screen and (min-width: 320px) and (max-width: 479px) { .image-resized img { width:280px; height:auto; } } /* 480px screens */ @media only screen and (min-width: 480px) and (max-width: 767px) { .image-resized img { width:440px; height:auto; } }