/****** FILE: themes/alaark/css/main.css *****/ /* Filename: layout.css * Website: AllArk * Author: Eranga Lakmal Kapukotuwa. * Date Created: 27/06/2012 * Media: Screen * * Description * ----------- * Colours: * Background - #xxxxxx * Link - #xxxxxx * Link Hover - #xxxxxx * Link Active - #xxxxxx * *=====================================================================*/ /* Layout styles index -> CSS reset default styles */ /* = css reset --------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: inherit; font-family: inherit; vertical-align: baseline; list-style-type:none; text-decoration: none; } section, header, footer { display: block; } /* = default style --------------------- */ html { -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ } body { color: #888888; font: 14px/18px "myriad-pro", Helvetica, Arial, sans-serif; background: #FFF; } .emptyDiv { text-indent: -9999px; } h1 { color: #4e4e4e; font: 27px/27px "myriad-pro", Helvetica, Arial, sans-serif; font-weight: bold; margin-bottom: 31px; } h2 { color: #4e4e4e; font: 27px/27px "myriad-pro", Helvetica, Arial, sans-serif; font-weight: bold; margin-bottom: 31px; } h3 { color: #4e4e4e; font: 18px/18px "myriad-pro", Helvetica, Arial, sans-serif; font-weight: bold; margin-bottom: 25px; } h4 { color: #4e4e4e; font: 16px/16px "myriad-pro", Helvetica, Arial, sans-serif; font-weight: bold; margin-bottom: 5px; } h5 { color: #888888; font: 14px/14px "myriad-pro", Helvetica, Arial, sans-serif; font-weight: bold; margin-bottom: 4px; } a { color: #4796ce; } a:hover { color: #888888; } .learnMore { color: #ffffff; display: block; width: 101px; height: 16px; text-align: center; padding: 5px 0px; background: url('/themes/alaark/images/button-bg.jpg') top left repeat-x; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; behavior: url(/PIE.htc); position: absolute; bottom: 60px; left: 60px; } .learnMore:hover { color: #ffffff; background: url('/themes/alaark/images/button-bg-hover.jpg') top left repeat-x; } .orbit-wrapper .orbit-caption a.learnMore {position: absolute !important; top: 110px !important;} #Breadcrumbs { margin-bottom: 15px; margin-top: 10px; } #Breadcrumbs p { line-height: 20px; margin-bottom: 15px; } #Breadcrumbs p a { color: #4796ce; } #Breadcrumbs p a:hover { text-decoration: underline; } #Breadcrumbs p span { /*color: #4796ce;*/ margin: 0px 5px; } /*#Breadcrumbs p span.deeperPage:hover { text-decoration: underline; }*/ .print { color: #888888; padding-right: 24px; margin: 2px 2px 0px 0px; background: url('/themes/alaark/images/print-icon.png') right center no-repeat; float: right; } .print:hover { color: #4796ce; } ul.sidebarList a {font-size: 12px !important;} /* = form style --------------------------- */ input[type="text"], input[type="email"] { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; color: #4796ce; font: 12px/12px "myriad-pro", Helvetica, Arial, sans-serif; width: 100%; height: 12px; padding: 3px 1px 3px 0px; background: #eeeeee; border-width: 1px 0px 0px 1px; border-color: #949494; border-style: solid; } textarea { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; color: #4796ce; font: 12px/12px "myriad-pro", Helvetica, Arial, sans-serif; width: 100%; padding: 3px 1px 3px 0px; background: #eeeeee; border-width: 1px 0px 0px 1px; border-color: #949494; border-style: solid; } label { font: 12px/12px "myriad-pro", Helvetica, Arial, sans-serif; } .Actions .action { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; color: #ffffff; display: block; width: 101px; height: 26px; text-align: center; padding: 5px 0px; cursor: pointer; border: 0px; background: url('/themes/alaark/images/button-bg.jpg') top left repeat-x; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; behavior: url(/PIE.htc); } .Actions .action:hover { color: #ffffff; background: url('/themes/alaark/images/button-bg-hover.jpg') top left repeat-x; } .middleColumn label.required { color: #963232; } /* = header --------------------- */ .header { border-bottom: 5px solid #888888; padding: 17px 0px 0px 0px; height: 95px; } .header .logo { display: block; width: 124px; height: 51px; text-indent: -9999px; margin: 0px 0px 0px -1px; } .header .logo a { display: block; width: 175px; height: 72px; cursor: pointer; /*background: url('/themes/alaark/images/logo.jpg') top left no-repeat;*/ } .header .logo a img {display: block; max-width: 100%; height: auto;} .header ul li { float: left; } .header .navHolder { padding: 21px 0px 0px 0px; } .header .navHolder .topNavHolder { width: 100%; margin-bottom: 21px; } .header .navHolder ul { overflow: hidden; margin-left: 30px } .header .navHolder .searchForm { display: inline; float: right; margin: -4px 0px 0px 18px; } .header .navHolder .searchForm input[type="text"] { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; color: #4796ce; font: 12px/12px "myriad-pro", Helvetica, Arial, sans-serif; padding: 0px 0px 0px 0px; height: 19px; width: 174px; background: #fff url('/themes/alaark/images/header-search-icon.png') right 0px no-repeat; border-width: 0px 0px 1px 0px; border-color: #4796ce; border-style: solid; } .header .navHolder .searchForm .middleColumn label { position: absolute; margin: 6px 0px 0px 0px; color: #4796ce; font: 12px/12px "myriad-pro", Helvetica, Arial, sans-serif; } .header ul.topNav li { margin-left: 18px; } .header ul.topNav li.first { margin-left: 0px; border-top: none !important; } .header ul.topNav li a { color: #4796ce; } .header ul.topNav li a:hover, .header ul.topNav li a.active { text-decoration: underline; } .header ul.mainNav {margin} .header ul.mainNav li { margin-left: 21px; } .header ul.mainNav li.first { margin-left: 0px; } .header ul.mainNav li a { color: #888888; text-transform: uppercase; font-weight: bold; /*word-spacing: 5px;*/ } .header ul.mainNav li a:hover, .header ul.mainNav li a.active, .header ul.mainNav li a.section, .header ul.mainNav li a.current { color: #4796ce; } .header .secNavHolder { display: none; position: absolute; padding: 21px 0px 0px 0px; z-index: 99999; padding-top: 17px\9 !important;} .header ul.mainNav li:hover .secNavHolder { display: block; } .header .secNavHolder ul.secNav { display: block; background: #ffffff; border: 1px solid #969696; padding: 16px 0px 4px 0px; margin-left: 0px;} .header .secNavHolder ul.secNav li { float: none; margin: 0px 14px 12px 19px; padding: 0px 0px 0px 0px; } .header .secNavHolder ul.secNav li a { font-weight: normal; text-transform: none; } /* = slider style ------------------------ */ .orbit-wrapper { margin-bottom: 66px; } .orbit-wrapper .slider-nav .right { width: 23px; height: 33px; right: 17px; background: url('/themes/alaark/images/slider-arrow-sprite.png') -23px 0px no-repeat; } .orbit-wrapper .slider-nav .left { width: 23px; height: 33px; left: 17px; background: url('/themes/alaark/images/slider-arrow-sprite.png') 0px 0px no-repeat; } .orbit-wrapper .slider-nav span { margin-top: -23px !important; } .orbit-wrapper .slider-nav .right:hover { background-position: -23px -33px; } .orbit-wrapper .slider-nav .left:hover { background-position: 0px -33px; } .orbit-wrapper .orbit-bullets { bottom: -28px; left: 0px; margin-left: 0px; } .orbit-wrapper .orbit-bullets li { display: block; width: 188px; text-align: center; padding: 10px 0px 0px 0px; margin-left: 0px; } .orbit-wrapper .orbit-bullets li.active { background: url('/themes/alaark/images/orbit-bullet-arrow.png') top center no-repeat; } .orbit-wrapper .orbit-bullets li span { display: block; background: #dedede; padding: 8px 0px 9px 0px; color: #666666; text-indent: 0px; font: 12px/12px "myriad-pro", Helvetica, Arial, sans-serif; cursor: pointer; border-left: 1px solid #aaaaaa; } .orbit-wrapper .orbit-bullets li.active span { background: #2f88c8; color: #ffffff; border: 0px; padding: 8px 0px 9px 0px; } .orbit-wrapper .orbit-bullets li.first span { border-left: 0px; padding: 8px 0px 9px 0px; } .orbit-wrapper .orbit-bullets li:hover span { background: #aaaaaa; } .orbit-wrapper .orbit-bullets li.active:hover span { background: #2f88c8; } /* = main style ------------------------ */ .mainContent { padding: 7px 0px 25px 0px; } .mainContent .heroImage { font-size: 0px; line-height: 0px; margin-bottom: 16px; } .mainContent .content { width: 100%; padding: 0px 20px 0px 0px; min-height: 130px; } .mainContent.page .content { /*border-right: 1px dotted #888; padding-bottom: 10px;*/} .mainContent .content p { font: 14px/18px "myriad-pro", Helvetica, Arial, sans-serif; word-spacing: 1px; margin-bottom: 19px; } .mainContent .content ul { margin-left: 36px; margin-bottom: 20px; } .mainContent .content ul li { padding-left: 6px; background: url('/themes/alaark/images/mainContent-li-bullet.png') 0px 7px no-repeat; } .mainContent .content ul li p { margin-bottom: 0px; } .mainContent h5.back { margin: -4px 0px 10px 0px; } .mainContent h5.back a { color: #4796ce; font-weight: bold; padding-right: 20px; background: url('/themes/alaark/images/page-backLink-arrow.png') right center no-repeat; } .mainContent.page .shareButtons { font-weight: bold !important; text-transform: uppercase; } .mainContent.page .shareButtons .stButton { top: 5px; margin: 0px !important; } .mainContent.page .shareButtons .st_facebook_large { width: 18px !important; height: 18px !important; margin: 0px -1px 0px 23px; } .mainContent.page .shareButtons .st_twitter_large { width: 20px !important; height: 17px !important; } .mainContent.page .shareButtons .st_facebook_large .stLarge { width: 18px !important; height: 18px !important; background: url('/themes/alaark/images/footer-fb-button.png') -2px -1px no-repeat !important; } .mainContent.page .shareButtons .st_twitter_large .stLarge { width: 20px !important; height: 17px !important; background: url('/themes/alaark/images/footer-twitter-button.png') -2px -1px no-repeat !important; } .mainContent form .field { margin-bottom: 13px; width: 47%; } .mainContent form .field.textarea {width: 100%;} .mainContent form .middleColumn { margin: 7px 0px 0px 0px; } /* = sidebar style -------------------------- */ .mainContent.page .sidebar { margin-top: -2px; } .mainContent .sidebar .dottedBorderContainer { padding-left: 20px; border-left: 1px dotted #888; } .mainContent .sidebar .sidebarBlock { padding-bottom: 28px; margin-bottom: 35px; background: url('/themes/alaark/images/sidebarBlock-border.png') bottom repeat-x ; } .mainContent .sidebar .sidebarImageBlock { font-size: 0px; line-height: 0px; margin-bottom: 21px; } .mainContent .sidebar .sidebarImageBlock img:hover { opacity: 0.9; } .mainContent .sidebar h3 { color: #4e4e4e; margin-bottom: 15px; } .mainContent .sidebar ul.sidebarList { margin-left: 10px; } .mainContent .sidebar ul.sidebarList li { margin-bottom: 16px; } .mainContent .sidebar ul.sidebarList li a { color: #4796ce; font-weight: bold; text-transform: uppercase; } .mainContent .sidebar ul.sidebarList li a:hover,.mainContent .sidebar ul li.active a { color: #4796ce; text-decoration: underline; } .mainContent .sidebar .sidebarBlock.reacentNews h3 { margin-bottom: 12px; } .mainContent .sidebar .reacentNewsList { margin-left: 14px; } .mainContent .sidebar .reacentNewsList li { margin-bottom: 31px; } .mainContent .sidebar .reacentNewsList h5 p { color: #4796ce; line-height: 15px; } .mainContent .sidebar .reacentNewsList h5 p:hover { text-decoration: underline; } .mainContent .sidebar .newsArchives { background: none; padding-bottom: 12px; } .mainContent .sidebar .newsArchives h3 { margin-bottom: 11px; } .mainContent .sidebar .yearList { margin-left: 13px; } .mainContent .sidebar .yearList h5 { margin-bottom: 7px; } .mainContent .sidebar .yearList ul li { margin-bottom: 4px; } .mainContent .sidebar .yearList ul li a:hover, .mainContent .sidebar .yearList ul li a.active { color: #4796ce; text-decoration: underline; } .navBoxes h3 { color: #000000; font-weight: normal; word-spacing: 3px; margin-bottom: 12px; } .navBoxes li { display: block; } .navBoxes li img { margin-bottom: 6px; } .navBoxes li:hover img { opacity: 0.9; } .navBoxes li p { margin-bottom: 14px; line-height: 20px; } /* = home style ----------------------- */ .mainContent.home { padding: 0px 0px 50px 0px; } /* = detail page style ----------------------------- */ .detailpage { padding-bottom: 50px; /*69px;*/ } .detailpage h2 { margin-bottom: 11px; } .detailpage h5 { margin-left: 36px; } .detailpage h4 { margin-bottom: 3px; } .detailpage .sidebar.imageBlocks { padding-top: 40px; } .detailpage .sidebar h3 { font-size: 16px; margin-bottom: 13px; } .detailpage .sidebar .block2 { margin-bottom: 15px; } .detailpage .sidebar ul.sidebarList li { margin-bottom: 12px; } /* = landing page style ----------------------------- */ .landingPage { padding-bottom: 40px; } .landingPage #Breadcrumbs { margin-bottom: -4px; } .landingPage h2 { margin-bottom: 10px; } .landingPage .content { margin-bottom: 53px; } .landingPage .sidebar.imageBlocks { margin: 36px 0px 0px 0px; } .landingPage .sidebar.imageBlocks .sidebarImageBlock { margin-bottom: 0px; } .landingPage .sidebar .dottedBorderContainer { margin-top: 3px; border: 0px; } .landingPage .sidebar h3 { font-size: 16px; margin-bottom: 13px; } .landingPage .sidebar ul.sidebarList li { margin-bottom: 12px; } /* = contact page style ----------------------------- */ .contactPage { /*padding-bottom: 65px;*/ } .contactPage h2 { margin-bottom: 33px; } .contactPage.mainContent.page .content p { margin-bottom: 32px; } .contactPage form .field { float: left; margin-right: 20px; } .contactPage form .field.even { margin-right: 0px; } .contactPage.mainContent.page .sidebar { margin-top: 0px; } .contactPage.mainContent .sidebar .sidebarBlock{ padding-bottom: 49px; } .contactPage .sidebar .infoList { margin-left: 14px; } .contactPage .sidebar .infoList h5 { text-transform: uppercase; margin-bottom: 3px; } .contactPage .sidebar .infoList li { margin-bottom: 13px; } .contactPage .sidebar .infoList li p { margin-bottom: 0px; line-height: 14px; } .contactPage .sidebar .reacentNews { background: none; } /* = case study page style ----------------------------------- */ .caseStudyLandingPage { padding-bottom: 44px; } .caseStudyLandingPage h2 { margin-bottom: 35px; } .caseStudyLandingPage .content { overflow: hidden; } .caseStudyLandingPage .content ul.navBoxes { margin-left: 0px; } .caseStudyLandingPage .content ul.navBoxes li { padding: 0px 0px 38px 0px; background: none; } .caseStudyLandingPage .content ul.navBoxes li p { margin-bottom: 14px; line-height: 20px; } .caseStudyLandingPage .sidebar h3 { font-size: 16px; } .caseStudyLandingPage .sidebar .sidebarBlock { background: none; } /* = news index page ----------------------------- */ .newsIndexPage.page { padding-bottom: 43px; } .newsIndexPage .content ul.newsList { margin: 0px 0px 0px 0px; } .newsIndexPage .content ul.newsList li { padding: 0px 0px 0px 0px; margin: 0px 0px 33px 0px; background: none; } .newsIndexPage .content ul.newsList li h3 { font-size: 16px; margin-bottom: 2px; } .newsIndexPage .content ul.newsList li p { margin-bottom: 0px; } .newsIndexPage .content ul.newsList li .learnMore { background: none; color: #4796ce; text-transform: uppercase; text-align: left; width: auto; height: auto; padding: 0px; position: relative; bottom: auto; left:auto; } .newsIndexPage .content ul.newsList li .learnMore:hover { text-decoration: underline; } .newsIndexPage.page .sidebar { margin-top: 1px; } .newsIndexPage.page .sidebar h3 { font-size: 16px; } .newsIndexPage.page .sidebar .sidebarBlock { padding-bottom: 26px; } /* = footer ------------------------- */ .footer { overflow: hidden; padding-bottom: 100px; } .footer .container_16 .grid_8 { width: 470px; } .footer h2 { display: block; color: #ffffff; font: 12px/12px "myriad-pro", Helvetica, Arial, sans-serif; font-weight: bold; text-transform: uppercase; margin-bottom: 16px; padding: 0px 13px; vertical-align: middle; } .footer-head-bg {background: url('/themes/alaark/images/footer-h2-bg.jpg') top repeat-x; display: block; height: 23px; padding-top: 5px;} .footer ul li { margin-bottom: 2px; } .footer ul li a { color: #888888; } .footer ul li a:hover { color: #4796ce; } .footer ul.shareList li { padding: 0px 0px 0px 25px; margin-bottom: 3px; } .footer ul.shareList li.fb { background: url('/themes/alaark/images/footer-fb-button.png') -2px -1px no-repeat; } .footer ul.shareList li.twitter { background: url('/themes/alaark/images/footer-twitter-button.png') -2px -1px no-repeat; } .footer ul.shareList li.youtube { background: url('/themes/alaark/images/footer-youtube-button.png') -2px -1px no-repeat; } .footer ul.shareList li.flicker { background: url('/themes/alaark/images/footer-flicker-button.png') -2px -1px no-repeat; } .footer ul.partnerList { overflow: hidden; margin-top: 4px; } .footer ul.partnerList li { float: left; margin-right: 15px; max-width: 82px;} /* print */ .printHeader { display: none; } .navBoxes li a.learnMore {position: relative !important; bottom: auto !important; left: auto !important;} .content ol li {list-style-type: decimal;} .content ol { padding-left: 20px;} /****** FILE: themes/alaark/css/skeleton.css *****/ /* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; overflow: hidden; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column, .container .one.columns { width: 40px; } .container .two.columns { width: 100px; } .container .three.columns { width: 160px; } .container .four.columns { width: 220px; } .container .five.columns { width: 280px; } .container .six.columns { width: 340px; } .container .seven.columns { width: 400px; } .container .eight.columns { width: 460px; } .container .nine.columns { width: 520px; } .container .ten.columns { width: 580px; } .container .eleven.columns { width: 640px; } .container .twelve.columns { width: 700px; } .container .thirteen.columns { width: 760px; } .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; } .container .full.columns { width: 960px; margin-left: 0px; margin-right: 0px;} .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 120px; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 660px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .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) { .container { width: 768px; } .container .column, .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; } .alpha.omega { margin-left: 0; margin-right: 0; } .container .one.column, .container .one.columns { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns { width: 220px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.columns { width: 508px; } .container .twelve.columns { width: 556px; } .container .thirteen.columns { width: 604px; } .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; } .container .full.columns { width: 768px; margin-left: 0px; margin-right: 0px;} .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 384px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .container { width: 300px; } .container .columns, .container .column { margin: 0; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .full.columns, .container .one-third.column, .container .two-thirds.column { width: 300px; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .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) { .container { width: 420px; } .container .columns, .container .column { margin: 0; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .full.columns, .container .one-third.column, .container .two-thirds.column { width: 420px; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .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; } /****** FILE: themes/alaark/css/template.css *****/ /* print header */ .printHeader { display: none; } /* Share Links */ .mainContent .content ul.shareLinks { list-style: none; margin: 5px 0; padding: 0; } .mainContent .content ul.shareLinks li { float: left; margin: 0; padding: 0; list-style-type: none; background: none; } .mainContent .content ul li.shareButtons { margin-right: 20px; } .mainContent .content ul.shareLinks li a { display: block; width: 20px; height: 17px; } .mainContent .content ul li a.fb_icon { background: url('/themes/alaark/images/footer-fb-button.png') -2px -2px no-repeat !important; } .mainContent .content ul li a.tw_icon { background: url('/themes/alaark/images/footer-twitter-button.png') -2px -1px no-repeat !important; } /* search input */ .searchform ::-webkit-input-placeholder { color: #4796CE; } .searchform :-moz-placeholder { color: #4796CE; } /* search results */ /* SEARCH RESULTS STYLES ------------------------------------------------ */ ul#SearchResults { margin: 20px 0; list-style: none; padding: 0; } ul#SearchResults li { list-style: none; margin: 10px 0 30px; padding: 0; font-size: 1em; background: none !important; } span.highlight { font-weight: bold; } .content #SearchResults h3 { margin: 20px 0 3px; font-size: 16px; } /*=== Pagination ===*/ #PageNumbers {border:0; margin:0; padding:0;} #PageNumbers li{ border:0; margin:0; padding:0; font-size:11px; height: 14px; list-style:none; margin-right:4px; float:left; } #PageNumbers a{ border:solid 1px #9aafe5; } #PageNumbers .previous-off, #PageNumbers .next-off { border:solid 1px #DEDEDE; color:#888888; display:block; font-weight:bold; margin-right:2px; padding:3px 4px; } #PageNumbers .next a, #PageNumbers .previous a { font-weight:bold; } #PageNumbers .current{ background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; } #PageNumbers a:link, #PageNumbers a:visited { color:#0e509e; display: inline-block; padding:3px 6px; text-decoration:none; } #PageNumbers a:hover{ border:solid 1px #0e509e } #PageNumbers span.summary { padding:8px 6px 0; display: block; float: left; } /*Footer*/ .footer ul.shareList li.linkedin { background: url('/themes/alaark/images/footer-linkedin-button.png') 0px 0px no-repeat; } #chamber{ display: block; margin: 48px 15px 0px 0px; float: right; } .top-fix{ margin-top: 6px; } img.right{ float: right; margin-left: 10px; } img.left{ float: left; margin-right: 10px; } /* form tweaks */ fieldset h3, fieldset h4 { clear: both; } .field.textarea { clear: both; } form span.required { color: #990000; } /****** FILE: themes/alaark/css/layout.css *****/ /* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ #mobilenavs, #SubNavMobileBlocks {display: none;} .column-row {clear: both;} .printer {margin-top: 10px;} .topNav .first {border-top: none !important;} /* #Page Styles ================================================== */ ul#SearchResults li {background: none;} .content .divider-bottom, .content .divider-repeat {padding-top: 5px !important;} .JobSummary p {margin-bottom: 0px !important} .CaseMobile {display: none;} .CaseDesktop {display: block;} table.parts {min-width: 250px;} table.parts td {width: 33%;} .content img {max-width: 100%; height: auto;} /* #Images ================================================== */ img.scale-with-grid, .scale-with-grid { max-width: 100%; height: auto; } /* #Misc ================================================== */ .remove-bottom { margin-bottom: 0 !important; } .remove-top { margin-top: 0 !important; } .half-bottom { margin-bottom: 10px !important; } .half-top { margin-top: 10px !important; } .add-bottom { margin-bottom: 20px !important; } .add-top { margin-top: 20px !important; } .double-top { margin-top: 40px !important; } .double-bottom { margin-bottom: 40px !important; } .float-right {float: right !important;} .float-left {float: left !important;} #SilverStripeNavigatorMessage { padding: 0px !important; right: auto !important; left: 0px !important; top: 0 !important; font-size: 8px !important; } /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .topNavHolder, .mainNav, .printer, #Breadcrumbs, .orbit-bullets {display: none !important;} .mobile-menu {display: block; width: 125px; margin-top: 40px; } .mobile-navigation {z-index: 1001; float: right; margin-top: -60px;} #mobilenavs{ list-style:none; width: 105px; margin-left: auto; margin-right: auto; position:relative; z-index:550; display: block !important; } #mobilenavs li{ position:relative; width: 175px; text-align: center; } #mobilenavs a{ display:block; } #mobilenavs ul{ position:relative; left:-9999px; margin: 7px 0px 40px; background: url(/themes/alaark/images/mobile-menu-bg.png) repeat; transition: all 0.5s ease; overflow: hidden; height: 0px; } #mobilenavs ul a{ white-space:nowrap; padding: 6px 5px; height: auto; } #mobilenavs li ul{ margin-left: auto; margin-right: auto; left: -652px; width: 747px; display: block; top: 31px; z-index: 600 !important; } #mobilenavs li ul a{ text-decoration:none; color: #fff; font-size: 17px; font-weight: bold; } #mobilenavs li ul li.mobile-util a{ text-decoration:none; color: #1e1c2d; font-size: 16px; font-weight: normal; } #mobilenavs li:hover ul li a:hover{ text-decoration: none !important; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } #mobilenavs ul li { padding: 3px 0px 8px; width: 90%; margin: 0px auto; border-left: none; border-right: none; border-bottom: 2px solid #76c3e2; text-align: center; margin-left: 14px; } #mobilenavs ul li:last-child { border: none; } nav.mobile-subnav {display: block !important; } nav.mobile-subnav li {width: 767px !important;} .mobile-top {margin-top: 20px !important;} #SubNavMobileBlocks { display: block;} #SubNavMobileBlocks li a { background-color: #0d64c1; margin: 10px auto; text-align: center; display: block; color: #fff; padding: 4px 0px;} .header .three.columns.offset-by-one {margin-left: 0px !important; padding-left: 0px !important;} .mainContent.home .sixteen.columns {overflow: hidden;} div.slider-nav span {top: 200px !important;} /*.orbit-wrapper .slider-nav .right {right: 207px !important;}*/ .orbit-wrapper .orbit-caption {z-index: 540 !important; top: 220px !important;} .detailpage .sidebar.imageBlocks { padding-top: 60px; } .mainContent form .field { margin-bottom: 13px; width: 46%; } .mainContent form .field.textarea {width: 100% !important;} #featured>img {width: 748px; height: 384px;} #featured {width: 748px !important; height: 384px !important;} .orbit-caption {width: 748px !important;} div.orbit-wrapper {height: 350px !important;} .footer h2 {text-align: center;} .flex-copy {top: 230px !important;} .learnMore {bottom: 20px;} } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .topNavHolder, .mainNav, .printer, #Breadcrumbs, .orbit-bullets, .CaseDesktop {display: none !important;} .mobile-navigation {z-index: 1001; float: right; margin-top: -60px;} #mobilenavs{ list-style:none; width: 105px; margin-left: auto; margin-right: auto; position:relative; z-index:550; display: block !important; } #mobilenavs li{ position:relative; width: 175px; text-align: center; } #mobilenavs a{ display:block; } #mobilenavs ul{ position:relative; left:-9999px; margin: 7px 0px 40px; background: url(/themes/alaark/images/mobile-menu-bg.png) repeat; transition: all 0.5s ease; overflow: hidden; height: 0px; } #mobilenavs ul a{ white-space:nowrap; padding: 6px 5px; height: auto; } #mobilenavs li ul{ margin-left: auto; margin-right: auto; left: -195px; width: 300px; display: block; top: 31px; z-index: 600 !important; } #mobilenavs li ul a{ text-decoration:none; color: #fff; font-size: 17px; font-weight: bold; } #mobilenavs li ul li.mobile-util a{ text-decoration:none; color: #1e1c2d; font-size: 16px; font-weight: normal; } #mobilenavs li:hover ul li a:hover{ text-decoration: none !important; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } #mobilenavs ul li { padding: 3px 0px 8px; width: 90%; margin: 0px auto; border-left: none; border-right: none; border-bottom: 2px solid #76c3e2; text-align: center; margin-left: 14px; } #mobilenavs ul li:last-child { border: none; } .mobile-bottom {margin-bottom: 20px !important;} .mobile-top {margin-top: 20px !important;} .mobile-footer-top .two.columns, .mobile-footer-bottom .two.columns {width: 50% !important;} .mainContent .sidebar .dottedBorderContainer {padding-left: 0px; border: none;} .side {border-top: 2px solid #888;} #SubNavMobileBlocks {display: block;} #SubNavMobileBlocks li a { background-color: #0d64c1; margin: 10px auto; text-align: center; display: block; color: #fff; padding: 4px 0px;} .mainContent .content ul, .detailpage h5 {margin-left: 10px; } #chamber {display: inline-block; margin: 10px 0px 0px 10px; float: none;} .partner-companies {text-align: center;} ul.partnerList {display: inline-block;} li.mobile-utility a{font-weight: normal !important;} .orbit-wrapper {height: auto !important; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 2px solid #888;} .orbit-caption {position: relative !important; top: 0px !important; left: 0px !important;} .orbit-wrapper .orbit-caption h1 {color: #4e4e4e !important; font-size: 30px !important; line-height: 27px !important; margin-top: 10px;} .orbit-wrapper .orbit-caption a.learnMore {position: relative !important; top: 0px !important;} /*#featured>img {margin-left: -320px;}*/ #featured>img {width: 300px; height: auto; display: block;} #featured {width: 300px !important;} div.slider-nav span {top: 80px !important;} /*.orbit-wrapper .slider-nav .right {right: 657px !important;}*/ .orbit-caption {width: 300px !important;} .mainContent form .field { margin-bottom: 13px; width: 100%; } .detailpage .sidebar.imageBlocks { padding-top: 20px; } #featured {height: 153px !important;} .sidebarImageBlock img { display: block; margin-left: auto; margin-right: auto; padding-bottom: 20px; } .sidebarImageBlock {border-bottom: 2px solid #888;} .mainContent .sidebar ul.sidebarList li a {text-decoration: underline;} .footer h2 {text-align: center;} .CaseMobile {display: block} .learnMore {position: relative; bottom: auto; left: auto;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { #mobilenavs{ list-style:none; width: 105px; margin-left: auto; margin-right: auto; position:relative; z-index:601; display: block !important; } #mobilenavs li ul {width: 420px; right: 315px; left: auto;} #mobilenavs ul li { margin-left: 20px; } /*#featured>img {margin-left: -280px;}*/ #featured>img {width: 420px; height: auto;} #featured {width: 420px !important; height: 216px !important;} .orbit-caption {width: 420px !important;} /*.orbit-wrapper .slider-nav .right {right: 537px !important;}*/ div.slider-nav span {top: 120px !important;} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {} /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */ /****** FILE: themes/alaark/css/easy-responsive-tabs.css *****/ #demoTab {margin-bottom: 20px !important;} ul.resp-tabs-list { margin: 0px; padding: 0px; } .resp-tabs-list li { font-family: "nimbus-sans-condensed", Helvetica, Arial, sans-serif; font-weight: 900; font-size: 16px; display: inline-block; padding: 9px; margin: 0 5px 0 0; list-style: none; cursor: pointer; float: left; background: #84c827; color: #fff; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* border: 2px solid #84c827;*/ border-bottom: 5px solid #fff; } .resp-tabs-list li.Last {margin-right: 0px; padding-left: 11px; padding-right: 16px;} html.ie9 .resp-tabs-list li.Last, html.ie10 .resp-tabs-list li.Last {padding-right: 11px;} html.ie9 .resp-tabs-list li, html.ie10 .resp-tabs-list li {padding: 7px !important} .resp-tabs-container { padding: 0px; background-color: #fff; clear: left; /* margin-top: 5px;*/ } h2.resp-accordion { cursor: pointer; padding: 5px; display: none; } .resp-tab-content { display: none; padding: 15px; } .resp-tab-active { /* border: 2px solid #004b91 !important;*/ border-bottom-color: #1c94c4 !important; background: #004b91 !important; } .resp-content-active, .resp-accordion-active { display: block; } .resp-tab-content { border: 1px solid #dddddd; background: #eeeeee; } h2.resp-accordion { font-size: 16px; line-height: 21px; border: 1px solid #dddddd; margin: 0px; margin-top: 5px; padding: 10px 15px; background: #f6f6f6; color: #1c94c4; } h2.resp-tab-active { border: 1px solid #6699F0; margin-bottom: 0px !important; padding: 10px 15px !important; } h2.resp-tab-title:last-child { border-bottom: 12px solid #c1c1c1 !important; background: blue; } /*-----------Vertical tabs-----------*/ .resp-vtabs ul.resp-tabs-list { float: left; width: 30%; } .resp-vtabs .resp-tabs-list li { display: block; padding: 15px 15px !important; margin: 0; cursor: pointer; float: none; } .resp-vtabs .resp-tabs-container { padding: 0px; background-color: #fff; border: 1px solid #c1c1c1; float: left; width: 68%; min-height: 250px; border-radius: 4px; clear: none; } .resp-vtabs .resp-tab-content { border: none; } .resp-vtabs li.resp-tab-active { border: 1px solid #c1c1c1; border-right: none; background-color: #fff; position: relative; z-index: 1; margin-right: -1px !important; padding: 14px 15px 15px 14px !important; } .resp-arrow { width: 0; height: 0; float: right; margin-top: 5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 12px solid #c1c1c1; } h2.resp-tab-active span.resp-arrow { border: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #9B9797; } /*-----------Accordion styles-----------*/ h2.resp-tab-active { background: #1c94c4 !important; color: #fff; } .resp-easy-accordion h2.resp-accordion { display: block; } .resp-easy-accordion .resp-tab-content { border: 1px solid #c1c1c1; } .resp-easy-accordion .resp-tab-content:last-child { border-bottom: 1px solid #c1c1c1 !important; } .resp-jfit { width: 100%; margin: 0px; } .resp-tab-content-active { display: block; } /*Here your can change the breakpoint to set the accordion, when screen resolution changed*/ @media only screen and (max-width: 959px){ ul.resp-tabs-list { display: none; } h2.resp-accordion { display: block; } .resp-vtabs .resp-tab-content { border: 1px solid #C1C1C1; } .resp-vtabs .resp-tabs-container { border: none; float: none; width: 100%; min-height: initial; clear: none; } .resp-accordion-closed { display:none !important; } .resp-vtabs .resp-tab-content:last-child { border-bottom: 1px solid #c1c1c1 !important; } }