/* * ------------------------------------------------------------------------ * Corpora Premium Template for joomla 2.5 * ------------------------------------------------------------------------ * Copyright (C) 2012 Sasu Themes. All Rights Reserved. * @license - Copyrighted Commercial Software * Author: dmsumon (Sasu Themes) * Websites: http://www.dmsumon.com * This file may not be redistributed in whole or significant part. * ------------------------------------------------------------------------ */ /* CSS for tablets/iPad --------------------------------------------------------- */ @media only screen and (min-width: 768px) and (max-width: 949px) { body { -webkit-text-size-adjust: 100%; /*Fix Mobile Safari Font Scale*/ } /* MAIN LAYOUT DIVS --------------------------------------------------------- */ .main { width: 700px !important; } /* MAIN NAVIGATION --------------------------------------------------------- */ /* Main Nav ---*/ #ja-mainnav { display: block; height: auto; margin: 0; width: 100%; } /* Mega Menu Layout ---*/ .ja-megamenu { clear: both; height: auto; display: none !important; } .ja-megamenu.active { display: block !important; } .ja-megamenu .megacol, .ja-megamenu li.mega .childcontent, .ja-megamenu li.mega .childcontent .childcontent-inner-wrap, .ja-megamenu li.mega .childcontent .childcontent-inner-wrap .childcontent-inner { display: none !important; } .ja-megamenu ul.level0 li.mega { height: auto !important; margin: 0 !important; padding: 0 !important; width: 100% !important; border-top: 1px solid #353637 !important; border-bottom: 0 !important; min-height: 0 !important; } .ja-megamenu ul.level0 li.over { border-left: 0 !important; border-right: 0 !important; } .ja-megamenu ul.level0 li.active, .ja-megamenu ul.level0 li.mega { border-color: #353637 !important; } .ja-megamenu ul.level0 li.mega a.mega { height: auto !important; margin: 0 !important; padding: 10px !important; background: #151617; min-height: 0 !important; } .ja-megamenu ul.level0 li.mega span.menu-title, .ja-megamenu ul.level0 li.haschild span.menu-title { font-size: 10px !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; } .ja-megamenu ul.level0 li.mega span.menu-title { font-size: 100% !important; } .ja-megamenu ul.level1 li.mega span.menu-title { margin-top: 0 !important; } .ja-megamenu ul.level1 li.mega { height: auto !important; } .ja-megamenu ul.level1 li.mega a.mega { height: auto !important; } .ja-megamenu ul.level0 li.mega span.menu-desc { display: none; } /* Mega Menu Stylings --- */ .ja-megamenu { background: #fafbfc !important; } .ja-megamenu ul.level0 li.mega { border-top: 1px solid #e5e6e7; text-align: center; } .ja-megamenu ul.level0 li.mega span.menu-title{ -webkit-text-shadow: none; -moz-text-shadow: none; -o-text-shadow: none; text-shadow: none; } .ja-megamenu a { color: #fff !important; } .ja-megamenu a:hover, .ja-megamenu a:focus { color: #fff; } /* Menu Button --- */ /* to use this value to detect responsive * > 3: mean responsive * 4: is mobile device, which the menu show only first level */ #ja-menu-button { display: block; font-size: 100%; font-weight: normal; padding: 10px; text-transform: uppercase; z-index: 4; background: #151617; color: #fff; font-family: Arial,Helvetica,sans-serif; text-align: center; } #ja-menu-button:hover, .rjd-active #ja-menu-button { color: #fff; cursor: pointer; background: #DFDF00; } .rjd-active #ja-menu-button { border-radius: 0; border-bottom-width: 0; border-color: #e5e6e7; } #contact-form dl dt { float: none; } #contact-form dl dd { margin-left: 0 !important; } #contact-form dl dd input.required, #contact-form dl dd textarea.required { width: 60% !important; } .ja-megamenu ul.level0 li.mega a.mega:hover{ background: #F9F900; } .ja-megamenu ul.level0 li.mega a.mega{ -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /*************************** logo *****************************************/ #ja-header h1.logo, #ja-header h1.logo a{ width: 250px; } #ja-search #mod-search-searchword{ width: 200px; } /*************************** slider *****************************************/ #ja-slider .gkIsWrapper-gk_bikestore figcaption h3{ font-size: 32px; } /************************ corpora-tab ************************************/ div.corpora-tab ul.gkTabs { border: none !important; } div.corpora-tab ul.gkTabs li{ float: none; border: 1px solid #ddd !important; border-top: none !important; } div.corpora-tab ul.gkTabs li:hover, div.corpora-tab ul.gkTabs li.active { border-bottom: 1px solid #ddd !important; } div.corpora-tab div.gkTabContainer0{ margin-top: 90px; padding-top: 15px; } /************************ ja-projects ************************************/ #ja-projects div.projects div.ja-box-ct{ margin-left: 44px; } /************************ ja-clients ************************************/ #ja-clients #piecemaker_holder, #ja-clients #piecemaker{ width: 670px !important; } /************************ featured-project ************************************/ div.featured-project div.nspArt, div.featured-project img.nspImage{ width: 100% !important; height: auto !important; } div.featured-project h4.nspHeader{ width: 82%; } div.featured-project h4.nspHeader a{ display: block; } /************************ k2 blog ************************************/ span.catItemImage img, span.itemImage img, span.tagItemImage img, span.userItemImage img, div.blog div.contentpaneopen p > img, div.item-page p > img{ max-width: 68%; } /************************ portfolio-3-columns ************************************/ div.portfolio-3-columns img.nspImage{ max-width: 200px !important; height: 112px !important; } div.portfolio-3-columns span.over{ max-width: 212px !important; height: 124px !important; } div.portfolio-3-columns span.over span{ font-size: 12px; } /************************ portfolio-4-columns ************************************/ div.portfolio-3-columns img.nspImage{ max-width: 140px !important; height: 95px !important; } div.portfolio-3-columns span.over{ max-width: 152px !important; height: 107px !important; } /************************ portfolio-2-columns ************************************/ div.portfolio-2-columns img.nspImage{ max-width: 100% !important; height: 181px !important; } div.portfolio-2-columns span.over{ max-width: 105% !important; height: 193px !important; } /***************** registration form ************************/ textarea#description{ width: 80% !important; } } /* CSS for mobile phones/ smart phones/ PDA --------------------------------------------------------- */ @media only screen and (min-width: 480px) and (max-width: 767px) { body { -webkit-text-size-adjust: 100%; /*Fix Mobile Safari Font Scale*/ } /* MAIN LAYOUT DIVS --------------------------------------------------------- */ .main { width: 100% !important; max-width: 690px; } /* MAIN NAVIGATION --------------------------------------------------------- */ /* Main Nav ---*/ #ja-mainnav { display: block; height: auto; margin: 0; width: 100%; } /* Mega Menu Layout ---*/ .ja-megamenu { clear: both; height: auto; display: none !important; } .ja-megamenu.active { display: block !important; } .ja-megamenu .megacol, .ja-megamenu li.mega .childcontent, .ja-megamenu li.mega .childcontent .childcontent-inner-wrap, .ja-megamenu li.mega .childcontent .childcontent-inner-wrap .childcontent-inner { display: none !important; } .ja-megamenu ul.level0 li.mega { height: auto !important; margin: 0 !important; padding: 0 !important; width: 100% !important; border-top: 1px solid #353637 !important; border-bottom: 0 !important; min-height: 0 !important; } .ja-megamenu ul.level0 li.over { border-left: 0 !important; border-right: 0 !important; } .ja-megamenu ul.level0 li.active, .ja-megamenu ul.level0 li.mega { border-color: #353637 !important; } .ja-megamenu ul.level0 li.mega a.mega { height: auto !important; margin: 0 !important; padding: 10px !important; background: #151617; min-height: 0 !important; } .ja-megamenu ul.level0 li.mega span.menu-title, .ja-megamenu ul.level0 li.haschild span.menu-title { font-size: 10px !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; } .ja-megamenu ul.level0 li.mega span.menu-title { font-size: 100% !important; } .ja-megamenu ul.level1 li.mega span.menu-title { margin-top: 0 !important; } .ja-megamenu ul.level1 li.mega { height: auto !important; } .ja-megamenu ul.level1 li.mega a.mega { height: auto !important; } .ja-megamenu ul.level0 li.mega span.menu-desc { display: none; } /* Mega Menu Stylings --- */ .ja-megamenu { background: #fafbfc !important; } .ja-megamenu ul.level0 li.mega { border-top: 1px solid #e5e6e7; text-align: center; } .ja-megamenu ul.level0 li.mega span.menu-title{ -webkit-text-shadow: none; -moz-text-shadow: none; -o-text-shadow: none; text-shadow: none; } .ja-megamenu a { color: #fff !important; } .ja-megamenu a:hover, .ja-megamenu a:focus { color: #fff; } /* Menu Button --- */ /* to use this value to detect responsive * > 3: mean responsive * 4: is mobile device, which the menu show only first level */ #ja-menu-button { display: block; font-size: 100%; font-weight: normal; padding: 10px; text-transform: uppercase; z-index: 4; background: #151617; color: #fff; font-family: Arial,Helvetica,sans-serif; text-align: center; } #ja-menu-button:hover, .rjd-active #ja-menu-button { color: #fff; cursor: pointer; background: #DFDF00; } .rjd-active #ja-menu-button { border-radius: 0; border-bottom-width: 0; border-color: #e5e6e7; } #contact-form dl dt { float: none; } #contact-form dl dd { margin-left: 0 !important; } #contact-form dl dd input.required, #contact-form dl dd textarea.required { width: 60% !important; } .ja-megamenu ul.level0 li.mega a.mega:hover{ background: #DFDF00; } .ja-megamenu ul.level0 li.mega a.mega{ -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /*************************** logo *****************************************/ #ja-header .main div.main-inner1{ padding-bottom: 70px; } #ja-header h1.logo{ float: none; } #ja-header h1.logo, #ja-header h1.logo a{ width: 100%; } #ja-search{ left:122px; bottom: 20px; } #ja-search #mod-search-searchword{ width: 200px; } /*************************** ja-promo *****************************************/ #ja-promo div.promo p.heading{ line-height: 40px; } #ja-promo div.promo p.desc{ line-height: 30px; } /*************************** slider *****************************************/ #ja-slider .gkIsWrapper-gk_bikestore figcaption h3{ font-size: 32px; } /************************ corpora-tab ************************************/ div.corpora-tab ul.gkTabs { border: none !important; } div.corpora-tab ul.gkTabs li{ float: none; border: 1px solid #ddd !important; border-top: none !important; } div.corpora-tab ul.gkTabs li:hover, div.corpora-tab ul.gkTabs li.active { border-bottom: 1px solid #ddd !important; } div.corpora-tab div.gkTabContainer0{ margin-top: 90px; padding-top: 15px; } /************************ ja-clients ************************************/ #ja-clients #piecemaker_holder, #ja-clients #piecemaker{ width: 570px !important; } /************************ featured-project ************************************/ div.featured-project div.nspArt, div.featured-project img.nspImage{ width: 100% !important; height: auto !important; } div.featured-project h4.nspHeader{ width: 82%; } div.featured-project h4.nspHeader a{ display: block; } /************************ k2 blog ************************************/ span.catItemImage img, span.itemImage img, span.tagItemImage img, span.userItemImage img, div.blog div.contentpaneopen p > img, div.item-page p > img{ width: 407px !important; } /************************ portfolio-3-columns ************************************/ div.portfolio-3-columns img.nspImage{ max-width: 175px !important; height: 98px !important; } div.portfolio-3-columns span.over{ max-width: 187px !important; height: 110px !important; } div.portfolio-3-columns span.over span{ font-size: 9.5px; padding: 5px 11px 5px 7px; } /************************ portfolio-4-columns ************************************/ div.portfolio-3-columns img.nspImage{ max-width: 100px !important; height: 80px !important; } div.portfolio-3-columns span.over{ max-width: 112px !important; height: 92px !important; } div.portfolio-4-columns span.over span{ width: 72px; left: 10%; } div.login button.button{ margin-left: 35%; } #user-registration button.validate{ margin-left: 40%; } /************************ portfolio-2-columns ************************************/ div.portfolio-2-columns img.nspImage{ max-width: 100% !important; height: 181px !important; } div.portfolio-2-columns span.over{ max-width: 105% !important; height: 193px !important; } /***************** registration form ************************/ textarea#description{ width: 60% !important; } } /* CSS for mobile phones --------------------------------------------------------- */ @media only screen and (max-width: 479px) { /****************************************************************/ body { -webkit-text-size-adjust: 100%; /*Fix Mobile Safari Font Scale*/ } /************************ general ************************************/ #ja-right, #ja-left, .column{ float: none !important; width: 100% !important; } .column { float: none; width: 100% !important; } #ja-mainbody, #ja-right{ width: 100% !important; } #ja-main div.inner{ padding: 0 5px !important; } div.ja-moduletable{ margin-left: 40px !important; margin-right: 40px !important; } #ja-right1 div.ja-moduletable{ margin-left: 25px !important; } /* MAIN LAYOUT DIVS --------------------------------------------------------- */ .main { width: 100% !important; max-width: 300px !important; } /* MAIN NAVIGATION --------------------------------------------------------- */ /* Main Nav ---*/ #ja-mainnav { display: block; height: auto; margin: 0; width: 100%; } /* Mega Menu Layout ---*/ .ja-megamenu { clear: both; height: auto; display: none !important; } .ja-megamenu.active { display: block !important; } .ja-megamenu .megacol, .ja-megamenu li.mega .childcontent, .ja-megamenu li.mega .childcontent .childcontent-inner-wrap, .ja-megamenu li.mega .childcontent .childcontent-inner-wrap .childcontent-inner { display: none !important; } .ja-megamenu ul.level0 li.mega { height: auto !important; margin: 0 !important; padding: 0 !important; width: 100% !important; border-top: 1px solid #353637 !important; border-bottom: 0 !important; min-height: 0 !important; } .ja-megamenu ul.level0 li.over { border-left: 0 !important; border-right: 0 !important; } .ja-megamenu ul.level0 li.active, .ja-megamenu ul.level0 li.mega { border-color: #353637 !important; } .ja-megamenu ul.level0 li.mega a.mega { height: auto !important; margin: 0 !important; padding: 10px !important; background: #151617; min-height: 0 !important; } .ja-megamenu ul.level0 li.mega span.menu-title, .ja-megamenu ul.level0 li.haschild span.menu-title { font-size: 10px !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; } .ja-megamenu ul.level0 li.mega span.menu-title { font-size: 100% !important; } .ja-megamenu ul.level1 li.mega span.menu-title { margin-top: 0 !important; } .ja-megamenu ul.level1 li.mega { height: auto !important; } .ja-megamenu ul.level1 li.mega a.mega { height: auto !important; } .ja-megamenu ul.level0 li.mega span.menu-desc { display: none; } /* Mega Menu Stylings --- */ .ja-megamenu { background: #fafbfc !important; } .ja-megamenu ul.level0 li.mega { border-top: 1px solid #e5e6e7; text-align: center; } .ja-megamenu ul.level0 li.mega span.menu-title{ -webkit-text-shadow: none; -moz-text-shadow: none; -o-text-shadow: none; text-shadow: none; } .ja-megamenu a { color: #fff !important; } .ja-megamenu a:hover, .ja-megamenu a:focus { color: #fff; } /* Menu Button --- */ /* to use this value to detect responsive * > 3: mean responsive * 4: is mobile device, which the menu show only first level */ #ja-menu-button { display: block; font-size: 100%; font-weight: normal; padding: 10px; text-transform: uppercase; z-index: 4; background: #151617; color: #fff; font-family: Arial,Helvetica,sans-serif; text-align: center; } #ja-menu-button:hover, .rjd-active #ja-menu-button { color: #fff; cursor: pointer; background: #DFDF00; } .rjd-active #ja-menu-button { border-radius: 0; border-bottom-width: 0; border-color: #e5e6e7; } #contact-form dl dt { float: none; } #contact-form dl dd { margin-left: 0 !important; } #contact-form dl dd input.required, #contact-form dl dd textarea.required { width: 60% !important; } .ja-megamenu ul.level0 li.mega a.mega:hover{ background: #DFDF00; } .ja-megamenu ul.level0 li.mega a.mega{ -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } /*************************** logo *****************************************/ #ja-header .main div.main-inner1{ padding-bottom: 100px; } #ja-header h1.logo{ float: none; margin-left: 12px; } #ja-header h1.logo a{ background: url("../images/corpora/logo-mobile-port.png") no-repeat scroll left center transparent !important; } #ja-header h1.logo, #ja-header h1.logo a{ width: 100%; } #ja-search{ left:22px; bottom: 20px; width: 100%; } #ja-search #mod-search-searchword{ width: 180px; } /*************************** ja-promo *****************************************/ #ja-promo div.promo p.heading{ line-height: 40px; } #ja-promo div.promo p.desc{ line-height: 30px; } /*************************** slider *****************************************/ #ja-slider .gkIsWrapper-gk_bikestore figcaption h3{ font-size: 12px; } .gkIsWrapper-gk_bikestore figcaption.left{ left: 0; bottom: 0 !important; } #ja-slider .gkIsButtons{ display: none; } #ja-slider .gkIsWrapper-gk_bikestore figcaption h3{ background: rgba(214, 40, 49, 0.6); } /************************ corpora-tab ************************************/ div.corpora-tab ul.gkTabs { border: none !important; } div.corpora-tab ul.gkTabs li{ float: none; border: 1px solid #ddd !important; border-top: none !important; } div.corpora-tab ul.gkTabs li:hover, div.corpora-tab ul.gkTabs li.active { border-bottom: 1px solid #ddd !important; } div.corpora-tab div.gkTabContainer0{ margin-top: 90px; padding-top: 15px; } /************************ ja-clients ************************************/ #ja-clients #piecemaker_holder, #ja-clients #piecemaker{ width: 200px !important; } /************************ k2 blog ************************************/ span.catItemImage img, span.itemImage img, span.tagItemImage img, span.userItemImage img, div.blog div.contentpaneopen p > img, div.item-page p > img{ width: 283px !important; } #ja-mainbody div.catItemHeader > span, #ja-mainbody div.itemHeader > span, #ja-mainbody div.tagItemHeader > span, #ja-mainbody div.catItemHeader span.catItemAuthor, #ja-mainbody div.itemHeader span.itemAuthor, #ja-mainbody span.userItemDateCreated, #ja-mainbody span.userItemCategory, #ja-mainbody span.userItemCommentsLink, dl.article-info dd, dt.article-info-term{ display: block !important; margin-bottom: 15px !important; padding-bottom: 15px !important; font-size: 12px !important; text-align: center; border-right: none !important; margin-left: 0 !important; } dl.article-info{ display: block !important; width: 100%; } div.catItemHeader span.catItemDateCreated, div.itemHeader span.itemDateCreated, div.tagItemHeader span.tagItemDateCreated, div.catItemHeader span.catItemCategory, div.itemHeader span.itemCategory, div.tagItemHeader span.tagItemCategory, div.catItemHeader > span, div.itemHeader > span, div.tagItemHeader > span, div.catItemHeader span.catItemAuthor, div.itemHeader span.itemAuthor, div.catItemHeader span.catItemCommentsLink, div.itemHeader span.post-comment, #ja-mainbody span.userItemDateCreated, #ja-mainbody span.userItemCategory, #ja-mainbody span.userItemCommentsLink, dl.article-info dd, dt.article-info-term{ background-position: 42px 0; border-bottom: 1px dashed #ddd; } div.catItemHeader h3.catItemTitle, div.itemHeader h2.itemTitle, div.tagItemHeader h2.tagItemTitle{ text-align: center; } /************************ pagination ************************************/ div.k2Pagination ul li{ display: block !important; margin-bottom: 20px; } div.pagination ul li{ margin-bottom: 20px; margin-left: 85px; float: none; } /************************ portfolio-3-columns ************************************/ div.portfolio-3-columns{ margin-left: 10px !important; } div.portfolio-3-columns img.nspImage{ max-width: 95% !important; height: auto !important; } div.portfolio-3-columns span.over{ max-width: 100% !important; height: 100% !important; } div.portfolio-3-columns div.nspArt{ float: none; width: 100% !important; } /************************ portfolio-2-columns ************************************/ div.portfolio-2-columns img.nspImage{ max-width: 100% !important; height: 181px !important; } div.portfolio-2-columns span.over{ max-width: 105% !important; height: 193px !important; } div.login button.button{ margin-left: 19px; } #user-registration button.validate{ margin-left: 0; } .item{ float: none !important; width: 100% !important; } .k2AccountPage table tr td{ display: block !important; } .k2AccountPage table tr td textarea{ width: 87% !important; } /***************** registration form ************************/ textarea#description{ width: 85% !important; } }