/* This file was generated with Grunt using Compass - Last modification: Thu May 12th 2016, 11:35:52 AM *//* MAZDA MOBILE */ /* Mazda Project Global common used mixins The following file contains several mixings that can be used across the site. @author luis.corrales@possible.com, hugo.alvarez@possible.com @version 0.1 @created June 12th, 2013 @updated September 12th, 2014 @ToDo - Specify the places where each mixin is being used. */ /** Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */ /* Mazda Project Mazda VLP components File: _side_arrows_button.scss @author sebastian.gamboa@possible.com @version 0.1 @created 08/09/2013 @updated 08/09/2013 */ /** * sideArrowButton * */ /* line 20, ../../scss/vlp/components/_side_arrows_button.scss */ .sideArrowButton { display: block; height: 36px; width: 32px; position: relative; } /* line 26, ../../scss/vlp/components/_side_arrows_button.scss */ .sideArrowButton span { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; filter: Alpha(opacity=70); transition: opacity 500ms ease-in-out; } /* line 37, ../../scss/vlp/components/_side_arrows_button.scss */ .sideArrowButton span:hover { opacity: 1; filter: Alpha(opacity=100); } /** * galleryHeroButton * */ /* line 63, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton { display: block; height: 47px; width: 44px; position: absolute; cursor: pointer; } /* line 70, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton span { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 500ms ease-in-out; } /* line 83, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton.galleryHeroButtonLeft span.active { opacity: 0; filter: alpha(opacity=0); } /* line 86, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton.galleryHeroButtonLeft span.active, .ie9 .galleryHeroButton.galleryHeroButtonLeft span.active { filter: none; display: none; } /* line 94, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton.galleryHeroButtonLeft:hover span { opacity: 0.5; filter: alpha(opacity=50); } /* line 96, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton.galleryHeroButtonLeft:hover span, .ie9 .galleryHeroButton.galleryHeroButtonLeft:hover span { filter: none; } /* line 100, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton.galleryHeroButtonLeft:hover span.active { opacity: 1; filter: alpha(opacity=100); } /* line 102, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton.galleryHeroButtonLeft:hover span.active, .ie9 .galleryHeroButton.galleryHeroButtonLeft:hover span.active { filter: none; display: none; } /* line 117, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton.galleryHeroButtonRight span.active { opacity: 0; filter: alpha(opacity=0); } /* line 120, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton.galleryHeroButtonRight span.active, .ie9 .galleryHeroButton.galleryHeroButtonRight span.active { filter: none; display: none; } /* line 128, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton.galleryHeroButtonRight:hover span { opacity: 0.5; filter: alpha(opacity=50); } /* line 130, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton.galleryHeroButtonRight:hover span, .ie9 .galleryHeroButton.galleryHeroButtonRight:hover span { filter: none; } /* line 134, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton.galleryHeroButtonRight:hover span.active { opacity: 1; filter: alpha(opacity=100); } /* line 136, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton.galleryHeroButtonRight:hover span.active, .ie9 .galleryHeroButton.galleryHeroButtonRight:hover span.active { filter: none; display: none; } /** * galleryHeroButton2 * */ /* line 152, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton2 { display: block; height: 47px; width: 44px; position: absolute; cursor: pointer; } /* line 159, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton2 span { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 500ms ease-in-out; } /* line 172, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton2.galleryHeroButtonLeft2 span.activeb { opacity: 0; filter: alpha(opacity=0); } /* line 175, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton2.galleryHeroButtonLeft2 span.activeb, .ie9 .galleryHeroButton2.galleryHeroButtonLeft2 span.activeb { filter: none; display: none; } /* line 183, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton2.galleryHeroButtonLeft2:hover span { opacity: 0.5; filter: alpha(opacity=50); } /* line 185, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton2.galleryHeroButtonLeft2:hover span, .ie9 .galleryHeroButton2.galleryHeroButtonLeft2:hover span { filter: none; } /* line 189, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton2.galleryHeroButtonLeft2:hover span.activeb { opacity: 1; filter: alpha(opacity=100); } /* line 191, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton2.galleryHeroButtonLeft2:hover span.activeb, .ie9 .galleryHeroButton2.galleryHeroButtonLeft2:hover span.activeb { filter: none; display: none; } /* line 206, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton2.galleryHeroButtonRight2 span.activeb { opacity: 0; filter: alpha(opacity=0); } /* line 209, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton2.galleryHeroButtonRight2 span.activeb, .ie9 .galleryHeroButton2.galleryHeroButtonRight2 span.activeb { filter: none; display: none; } /* line 217, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton2.galleryHeroButtonRight2:hover span { opacity: 0.5; filter: alpha(opacity=50); } /* line 219, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton2.galleryHeroButtonRight2:hover span, .ie9 .galleryHeroButton2.galleryHeroButtonRight2:hover span { filter: none; } /* line 223, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryHeroButton2.galleryHeroButtonRight2:hover span.activeb { opacity: 1; filter: alpha(opacity=100); } /* line 225, ../../scss/vlp/components/_side_arrows_button.scss */ .ie8 .galleryHeroButton2.galleryHeroButtonRight2:hover span.activeb, .ie9 .galleryHeroButton2.galleryHeroButtonRight2:hover span.activeb { filter: none; display: none; } /** * galleryCarouselButton * */ /* line 242, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryCarouselButton { display: block; height: 16px; width: 10px; position: relative; } /* line 248, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryCarouselButton span { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; filter: Alpha(opacity=70); transition: opacity 500ms ease-in-out; } /* line 259, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryCarouselButton span:hover { opacity: 1; filter: Alpha(opacity=100); } /* line 266, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryCarouselButton.galleryCarouselButtonLeft span { width: 10px; height: 16px; top: 7px; left: 10px; } /* line 276, ../../scss/vlp/components/_side_arrows_button.scss */ .galleryCarouselButton.galleryCarouselButtonRight span { width: 10px; height: 16px; left: 10px; top: 7px; } /** * SLIDES CIRCLE ARROWS (slidesjs) */ /* line 291, ../../scss/vlp/components/_side_arrows_button.scss */ .slidesjs-navigation { position: absolute; top: 50%; z-index: 11; cursor: pointer; } /* line 296, ../../scss/vlp/components/_side_arrows_button.scss */ .slidesjs-navigation.slidesjs-next { right: 30px; } /* line 299, ../../scss/vlp/components/_side_arrows_button.scss */ .slidesjs-navigation.slidesjs-previous { left: 30px; } /* line 7, ../../scss/footer/mobile.scss */ #main_content { background-color: #000; } /* line 8, ../../scss/footer/mobile.scss */ #content_wrap { background: none repeat scroll 0 0 #000000; margin: 35px 0 25px; } /* line 13, ../../scss/footer/mobile.scss */ #header { background-color: #000; } /* line 14, ../../scss/footer/mobile.scss */ #header img { padding: 10px 0 0 0; } /* line 15, ../../scss/footer/mobile.scss */ #header h2 { color: #999999; font: 16px/18px interstate,sans-serif,arial; letter-spacing: 1px; margin: 0 0 10px; padding: 0; } /* line 23, ../../scss/footer/mobile.scss */ #content { padding: 0; width: 950px; } /* line 24, ../../scss/footer/mobile.scss */ .mobile_content { width: 975px; } /* line 25, ../../scss/footer/mobile.scss */ .mymazda_content { width: 975px; } /*Mazda Mobile*/ /* line 29, ../../scss/footer/mobile.scss */ a.animated { font: 12px/14px interstate-bold,sans-serif,arial !important; background: url(/MusaWeb/musa2/images/home/musaLinkArw.gif) no-repeat top right transparent; padding-right: 20px; color: #0089cf; text-decoration: none !important; margin: 0; display: inline-block !important; } /* line 39, ../../scss/footer/mobile.scss */ .mobile_content .module_ipad_app { display: block; background: url("/MusaWeb/musa2/images/footer/mazda_ipad_app.jpg") no-repeat; height: 464px; width: 975px; background-color: white; margin-bottom: 20px; } /* line 49, ../../scss/footer/mobile.scss */ .mobile_content .module_ipad_app #download_link { position: relative; top: 130px; } /* line 53, ../../scss/footer/mobile.scss */ .mobile_content .module_ipad_app #ipad_content { font: 11px/13px interstate,sans-serif,arial !important; position: relative; left: 556px; top: 34px; height: 425px; width: 380px; } /* line 61, ../../scss/footer/mobile.scss */ .mobile_content .module_ipad_app #ipad_content h1 { color: #0089cf; font: 15px/17px interstate,sans-serif,arial; letter-spacing: 1px; margin: 0 0 10px; padding: 0; } /* line 68, ../../scss/footer/mobile.scss */ .mobile_content .module_ipad_app #ipad_content h2 { color: #000; font: 11px/13px interstate-bold,sans-serif,arial; margin: 0 0 10px; padding: 0; } /* line 74, ../../scss/footer/mobile.scss */ .mobile_content .module_ipad_app #ipad_content p { color: #000; font: 11px/13px interstate,sans-serif,arial; margin: 0 0 10px; padding: 0; } /* line 81, ../../scss/footer/mobile.scss */ .mobile_content .module_ipad_app #ipad_content ul { list-style: disc; margin-left: 40px; } /* line 85, ../../scss/footer/mobile.scss */ .mobile_content .module_ipad_app #ipad_content ul li { color: #000; font: inherit !important; margin-top: 10px; margin-bottom: 10px; clear: both; } /* line 92, ../../scss/footer/mobile.scss */ .mobile_content .module_ipad_app #ipad_content .leftList { position: absolute; float: left; left: 170px; } /* line 98, ../../scss/footer/mobile.scss */ .mobile_content .module_ipad_app #ipad_content .rightList { position: absolute; float: right; left: -10px; /*top:0px;*/ } /* line 105, ../../scss/footer/mobile.scss */ .mobile_content .mobile_divider { width: 975px; padding-bottom: 20px; border-top: 1px dotted #333; } /* line 111, ../../scss/footer/mobile.scss */ .mobile_content .module_left { background: url("http://images.mazdausa.com/MusaWeb/musa2/images/footer/img_mazdamobile_sprite.jpg") no-repeat scroll 0 0 #D5D5D5; display: block; float: left; min-height: 376px; width: 475px; } /* line 119, ../../scss/footer/mobile.scss */ .mobile_content .module_right { background: url("/MusaWeb/musa2/images/footer/img_mazdamobile_sprite.jpg") no-repeat -475px 0 #D5D5D5; display: block; width: 475px; min-height: 376px; float: right; } /* line 127, ../../scss/footer/mobile.scss */ .mobile_content .module_copy { width: 345px; margin: 200px 0 15px 20px; } /* line 128, ../../scss/footer/mobile.scss */ .mobile_content .module_copy p { letter-spacing: 1px; line-height: 16px; } /* line 129, ../../scss/footer/mobile.scss */ .mobile_content ul li, .mobile_content ul li a, .mymazda_content ul li a { font: 12px/14px interstate-bold,sans-serif,arial !important; padding-right: 20px; text-decoration: none !important; } /* line 135, ../../scss/footer/mobile.scss */ a.downloadLink { background: url("/MusaWeb/musa2/images/home/musaLinkArw.gif") no-repeat top right transparent; color: #0089CF; margin: 5px 0 12px 20px; display: inline-block !important; } /* line 142, ../../scss/footer/mobile.scss */ #content ul li.soonLink { color: #3f3f3f; display: block; margin: 0 0 15px 20px; font-weight: bold; clear: both; } /*MyMazdaApp*/ /* line 151, ../../scss/footer/mobile.scss */ .mymazda_content .flash_content { width: 376px; height: auto; display: block; float: left; } /* line 158, ../../scss/footer/mobile.scss */ .mymazda_content .flash_content #showcase { height: 500px; padding-top: 20px; } /* line 163, ../../scss/footer/mobile.scss */ .mymazda_content .flash_content #showcase a { width: 10px; height: 17px; display: block; position: absolute; top: -20%; bottom: 0; margin: auto; background-image: url("/MusaWeb/musa2/images/footer/myMazdaApp/arrows.png"); background-repeat: no-repeat; background-position-x: 0px; ms-background-position-x: 0px; background-position-y: 0px; ms-background-position-y: 0px; background-position: 0px 0px; } /* line 182, ../../scss/footer/mobile.scss */ .mymazda_content .flash_content #showcase a:hover { background-position: 0px -17px; background-position-y: -17px; ms-background-position-y: -17px; } /* line 189, ../../scss/footer/mobile.scss */ .mymazda_content .flash_content #showcase a#nav-right { right: 0; left: auto; background-position: -10px 0px; background-position-x: -10px; ms-background-position-x: -10px; } /* line 198, ../../scss/footer/mobile.scss */ .mymazda_content .flash_content #showcase a#nav-right:hover { background-position: -10px -17px; background-position-y: -17px; ms-background-position-y: -17px; } /* line 207, ../../scss/footer/mobile.scss */ .mymazda_content .module_content { display: block; width: 570px; float: right; /* fallback */ background-color: #FFFFFF; background: url("/MusaWeb/musa2/images/footer/img_container_background.gif") repeat 0 0 #FFFFFF; background-repeat: repeat-x; background-position-y: bottom; /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #FFFFFF 70%, #CECECE); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #FFFFFF 70%, #CECECE); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } /* line 228, ../../scss/footer/mobile.scss */ .mymazda_content .module_content .module_copy { padding: 20px 25px; } /* line 229, ../../scss/footer/mobile.scss */ .mymazda_content .module_content .module_copy { letter-spacing: 1px; line-height: 16px; } /* line 230, ../../scss/footer/mobile.scss */ #main_content .mymazda_content .module_content h3 { margin-bottom: 15px; font: 14px/18px interstate,sans-serif,arial; color: #0099CC; } /* line 236, ../../scss/footer/mobile.scss */ .mymazda_content .module_content p { margin-bottom: 15px; } /* line 238, ../../scss/footer/mobile.scss */ .mymazda_content ul li a.downloadLink { display: block; margin: 0 0 5px 0; clear: both; } /* line 244, ../../scss/footer/mobile.scss */ .mymazda_content .module_content .feature_list ul { list-style-type: disc; margin: 0 0 18px 20px; display: block; float: left; line-height: 18px; width: 45%; } /* line 253, ../../scss/footer/mobile.scss */ .mymazda_content .module_content ul.last { position: relative; top: 0px; left: 10px; width: 200px; } /* line 260, ../../scss/footer/mobile.scss */ ul.social_links li { margin: 0 3px !important; padding: 0px !important; } /* line 264, ../../scss/footer/mobile.scss */ ul.social_links li div.on { margin-top: -20px; }