@charset "utf-8"; /* $Date: 2013-09-06 12:22:18 +0900 (金, 06 9 2013) $ $Rev: 1102 $ */ /* ---------- ---------- ---------- ::index:: 1. Container 2. HeaderArea 3. ContentsArea 4. FooterArea 5. Popup -1. Container -2. HeaderArea -3. ContentsArea -4. FooterArea 6. ContentsArea Grid Pattern 7. ContentsArea GridUtility ---------- ---------- ---------- */ /* 1. Container ---------- ---------- ---------- */ html, body { min-height: 100%; } div#Container { margin: 0 auto; min-height: 100%; _height: 100%; position: relative; min-width: 1280px; } #ContentsArea #Container { min-width: inherit; } /* 2. HeaderArea ---------- ---------- ---------- */ div#HeaderArea:after { content: ""; display: block; clear: both; } div#HeaderArea { margin: 0 0 15px; position: relative; border-bottom: 1px solid #d0d0d0; z-index: 10; zoom:1; } /* 3. ContentsArea ---------- ---------- ---------- */ div#ContentsArea { margin: 0 auto; padding: 0; width: 970px; position: relative; z-index: 1; } div#ContentsArea.Popup { max-width: 720px; margin-right: auto; margin-left: auto; padding: 20px 50px; } [data-select-types="true"] div#ContentsArea { z-index: inherit; } [class*="theme-K"] div#ContentsArea { padding: 0; width: auto; } div#ContentsLayout { margin: 0 -5px; padding: 0 5px 30px; width: 100%; } div#ContentsLayoutInner:after { content: ""; display: block; clear: both; } div#ContentsLayoutInner { margin: 0 -5px; padding: 0 5px; width: 100%; zoom:1; } /* Double (ContentsArea Layout Pattern) ---------- ---------- */ /* Main-Sub ---------- */ div#ContentsLayout.DoubleMainSub { margin-top: 58px; background: url("../../img/common/bg_contentslayout_double_mainsub_body_flat.png") 0 0 repeat-y; } div#PageTopMessage + div#ContentsLayout.DoubleMainSub { margin-top: 78px; } div#ContentsLayout.DoubleMainSub div#ContentsLayoutInner { } div#ContentsLayout.DoubleMainSub div#MainContent { margin-top: -58px; position: relative; z-index: 5; float: left; width: 760px; } div#ContentsLayout.DoubleMainSub div#MainContentBody { margin: 0 -5px; padding: 30px 25px 0; width: 720px; background: url("../../img/common/bg_contentslayout_double_mainsub_top.png") 0 0 no-repeat; } div#ContentsLayout.DoubleMainSub div#MainContentBody div#MainContentBodyExtra { margin-top: 20px; } div#ContentsLayout.DoubleMainSub div#SubContent { margin-right: -5px; padding-right: 5px; position: relative; z-index: 6; float: right; width: 210px; min-height: 50px; } /* without pagetop utilityes */ div#ContentsArea div#ContentsLayout.DoubleMainSub:first-child { margin-top: 71px; } /* Main-Sub (no frame) ---------- */ div#ContentsLayout.DoubleMainSub.NoFrame { background: none; margin-top: 0; } div#ContentsLayout.DoubleMainSub.NoFrame div#MainContent { width: 605px; margin: 0; } div#ContentsLayout.DoubleMainSub.NoFrame div#MainContentBody { width: 605px; margin: 0; padding: 0; background: none; } div#ContentsLayout.DoubleMainSub.NoFrame div#SubContent { width: 335px; margin: 0; padding: 0; background: none; } /* Sub-Main ---------- */ div#ContentsLayout.DoubleSubMain { margin-top: 17px; background: url("../../img/common/bg_contentslayout_double_submain_body.png") 0 0 repeat-y; } div#ContentsLayout.DoubleSubMain div#ContentsLayoutInner { } div#ContentsLayout.DoubleSubMain div#MainContent { margin-top: -17px; position: relative; z-index: 5; float: right; width: 761px; } div#ContentsLayout.DoubleSubMain div#MainContentBody { margin: 0 -5px; padding: 30px 26px 0 25px; width: 720px; background: url("../../img/common/bg_contentslayout_double_submain_main_top.png") 0 0 no-repeat; } div#ContentsLayout.DoubleSubMain div#SubContent { margin: 0 0 0 -5px; padding: 0 0 0 5px; position: relative; z-index: 3; float: left; width: 209px; background: url("../../img/common/bg_contentslayout_double_submain_sub_top.png") 0 0 no-repeat; } /* Single (ContentsArea Layout Pattern) ---------- ---------- */ /* Narrow ---------- */ div#ContentsLayout.SingleNarrow { background: url("../../img/common/bg_contentslayout_single_wide_body.png") 0 0 repeat-y; } div#ContentsLayout.SingleNarrow div#ContentsLayoutInner { background: url("../../img/common/bg_contentslayout_single_wide_top.png") 0 0 no-repeat; } div#ContentsLayout.SingleNarrow div#MainContent { margin: 0 auto; padding: 30px 0 0; width: 720px; } div#ContentsLayout.SingleNarrow div#MainContentBody { margin: -30px 0 0; padding: 30px 0 0; } /* without pagetop utilityes */ div#ContentsArea div#ContentsLayout.SingleNarrow:first-child { padding-top: 40px; } /* Wide ---------- */ div#ContentsLayout.SingleWide { background: url("../../img/common/bg_contentslayout_single_wide_body.png") 0 0 repeat-y; } div#ContentsLayout.SingleWide div#ContentsLayoutInner { background: url("../../img/common/bg_contentslayout_single_wide_top.png") 0 0 no-repeat; } div#ContentsLayout.SingleWide div#MainContent { margin: 0 auto; padding: 30px 0 0; width: 910px; } div#ContentsLayout.SingleWide div#MainContentBody { margin: -30px 0 0; padding: 30px 0 0; } div#ContentsLayout.SingleWide div#MainContentBody div#MainContentBodyExtra { margin-top: 20px; } /* without pagetop utilityes */ div#ContentsArea div#ContentsLayout.SingleWide:first-child { padding-top: 40px; } /* Wide (no frame) ---------- */ div#ContentsLayout.SingleWide.NoFrame , div#ContentsLayout.SingleWide.NoFrame div#ContentsLayoutInner { background: none; } div#ContentsLayout.SingleWide.NoFrame div#MainContent { padding-top: 0; width: 970px; } div#ContentsLayout.SingleWide.NoFrame div#MainContentBody { margin-top: 0; padding-top: 0; } /* Wide (contract) ---------- */ div.SingleWide div#MainContent div.Contract { margin: 0 auto; width: 720px; } /* Full Width ---------- */ #ContentsArea.FullWidth { width: 100%; } #ContentsArea.FullWidth div#ContentsLayout, #ContentsArea.FullWidth div#ContentsLayoutInner { margin: 0; padding: 0; } #ContentsArea.FullWidth div#ContentsLayout.SingleWide.NoFrame div#MainContent { width: 100%; } /* home 1column (ContentsArea Layout Pattern) ---------- ---------- */ body#Home .WrapperContent{ display: table; width: 955px; margin-top: 18px; } body#Home .WrapperContent .WrapperContentMain{ display: table-cell; width: 740px; padding: 0 0 40px; vertical-align: top; } body#Home div#ContentsLayout.DoubleMainSub .WrapperContent div#SubContent{ display: table-cell; width: 209px; float: none; vertical-align: top; background: url("../../img/common/bg_contentslayout_double_mainsub_body_flat.png") 100% 0 repeat-y; } body#Home div#ContentsLayout.DoubleMainSub .WrapperContent div#SubContent .Section{ border-top: none; } body#Home div#ContentsLayout.DoubleMainSub .WrapperContent div#SubContent div.Section div.SectionContent{ background: none; } body#Home div#MainContent .Section.HomeStr01.Bg{ position: relative; } body#Home div#MainContent .Section.HomeStr01.Bg:before { background: #fff none repeat scroll 0 0; content: ""; height: 100%; left: 0; padding: 19px 0; position: absolute; top: -20px; width: 949px; z-index: -1; } /* 4. FooterArea ---------- ---------- ---------- */ div#FooterArea { position: relative; z-index: 0; width: 100%; background-color: #333; } div#FooterAreaInner:after { content: ""; display: block; clear: both; } div#FooterAreaInner { margin: 0 auto; padding: 22px 15px 18px; width: 940px; min-height: 55px; color: #fff; background: #333; zoom:1; } /* Adjust FooterArea Padding (DownloadList Status) ---------- */ /* DownloadList close */ body.DownloadListClose div#FooterAreaInner { padding-bottom: 83px; /* 18px ("div#FooterAreaInner" padding-bottom) + 65px ("div#DownloadList" height) */ } /* DownloadList open */ body.DownloadListOpen div#FooterAreaInner { padding-bottom: 225px; /* 18px ("div#FooterAreaInner" padding-bottom) + 207px ("div#DownloadList" height) */ } /* 5. Popup ---------- ---------- ---------- */ /* Container ---------- ---------- */ body.Popup div#ContentsArea { padding-bottom: 10px; } body.Popup.WithoutFooterArea div#ContentsArea { padding-bottom: 10px; } /* HeaderArea ---------- ---------- */ body.Popup div#HeaderArea { margin-bottom: 0; padding-right: 20px; padding-left: 20px; min-width: 400px; background: none; } /* ContentsArea ---------- ---------- */ body.Popup div#ContentsArea { padding-top: 20px; padding-right: 20px; padding-left: 20px; width: auto; } /* FooterArea ---------- ---------- */ body.Popup div#FooterArea { width: 100%; min-width: 440px; background: #ededed url("../../img/common/bg_popup_footerarea.png") 0 0 repeat-x; } body.Popup div#FooterAreaInner { margin-right: 0; margin-left: 0; padding-right: 20px; padding-left: 20px; width: auto; min-height: 0; color: #333; background: none; } /* ie debug (test) */ body.Popup div#FooterArea { zoom:1; } body.Popup div#FooterAreaInner { overflow: hidden; zoom:1; position: relative; } /* 6. ContentsArea Grid Pattern ---------- ---------- ---------- */ div#MainContent div.GridWrap:after , div#ModalContent div.GridWrap:after { content: ""; display: block; clear: both; } div#MainContent div.GridWrap , div#ModalContent div.GridWrap { zoom: 1; } div#MainContent div.GridWrap.ExtensiveSpace , div#ModalContent div.GridWrap.ExtensiveSpace { margin-bottom: 20px; } div#MainContent div.GridWrap div.Col , div#ModalContent div.GridWrap div.Col { float: left; display: inline; } /* "Single (Narrow)" and "Double (Main-Sub)" and "Modal Content" ---------- ---------- */ /* Column Size 1/2 */ div#MainContent div.Grid2 , div#ModalContent div.Grid2 { margin-right: -20px; } div#MainContent div.Grid2 div.Col , div#ModalContent div.Grid2 div.Col { margin-right: 20px; } div#MainContent div.Grid2 div.Col.Size1 , div#ModalContent div.Grid2 div.Col.Size1 { width: 350px; } /* Column Size 1/3 */ div#MainContent div.Grid3 , div#ModalContent div.Grid3 { margin-right: -21px; } div#MainContent div.Grid3 div.Col , div#ModalContent div.Grid3 div.Col { margin-right: 21px; } div#MainContent div.Grid3 div.Col.Size1 , div#ModalContent div.Grid3 div.Col.Size1 { width: 226px; } div#MainContent div.Grid3 div.Col.Size2 , div#ModalContent div.Grid3 div.Col.Size2 { width: 473px; } /* Column Size 1/4 */ div#MainContent div.Grid4 , div#ModalContent div.Grid4 { margin-right: -20px; } div#MainContent div.Grid4 div.Col , div#ModalContent div.Grid4 div.Col { margin-right: 20px; } div#MainContent div.Grid4 div.Col.Size1 , div#ModalContent div.Grid4 div.Col.Size1 { width: 165px; } div#MainContent div.Grid4 div.Col.Size2 , div#ModalContent div.Grid4 div.Col.Size2 { width: 350px; } div#MainContent div.Grid4 div.Col.Size3 , div#ModalContent div.Grid4 div.Col.Size3 { width: 535px; } /* Column Size Auto */ div#MainContent div.GridAuto , div#ModalContent div.GridAuto { margin-left: -20px; } div#MainContent div.GridAuto div.Col , div#ModalContent div.GridAuto div.Col { display: block; margin-left: 20px; } /* "Single (Wide)" ---------- ---------- */ /* Column Size 1/2 */ div.SingleWide div#MainContent div.Grid2 { margin-right: -20px; } div.SingleWide div#MainContent div.Grid2 div.Col { margin-right: 20px; } div.SingleWide div#MainContent div.Grid2 div.Col.Size1 { width: 445px; } /* Column Size 1/3 */ div.SingleWide div#MainContent div.Grid3 { margin-right: -20px; } div.SingleWide div#MainContent div.Grid3 div.Col { margin-right: 20px; } div.SingleWide div#MainContent div.Grid3 div.Col.Size1 { width: 290px; } div.SingleWide div#MainContent div.Grid3 div.Col.Size2 { width: 600px; } /* Column Size 1/4 */ div.SingleWide div#MainContent div.Grid4 { margin-right: -19px; } div.SingleWide div#MainContent div.Grid4 div.Col { margin-right: 19px; } div.SingleWide div#MainContent div.Grid4 div.Col.Size1 { width: 213px; } div.SingleWide div#MainContent div.Grid4 div.Col.Size2 { width: 445px; } div.SingleWide div#MainContent div.Grid4 div.Col.Size3 { width: 677px; } /* Column Size 1/5 */ div.SingleWide div#MainContent div.Grid5 { margin-right: -20px; } div.SingleWide div#MainContent div.Grid5 div.Col { margin-right: 20px; } div.SingleWide div#MainContent div.Grid5 div.Col.Size1 { width: 166px; } div.SingleWide div#MainContent div.Grid5 div.Col.Size2 { width: 352px; } div.SingleWide div#MainContent div.Grid5 div.Col.Size3 { width: 538px; } div.SingleWide div#MainContent div.Grid5 div.Col.Size4 { width: 724px; } /* "Single (Wide, no frame)" ---------- ---------- */ /* Column Size 1/2 */ div.SingleWide.NoFrame div#MainContent div.Grid2 div.Col.Size1 { width: 475px; } /* Column Size 1/3 */ div.SingleWide.NoFrame div#MainContent div.Grid3 { margin-right: -20px; } div.SingleWide.NoFrame div#MainContent div.Grid3 div.Col { margin-right: 20px; } div.SingleWide.NoFrame div#MainContent div.Grid3 div.Col.Size1 { width: 310px; } div.SingleWide.NoFrame div#MainContent div.Grid3 div.Col.Size2 { width: 640px; } /* Column Size 1/4 */ div.SingleWide.NoFrame div#MainContent div.Grid4 { margin-right: -19px; } div.SingleWide.NoFrame div#MainContent div.Grid4 div.Col { margin-right: 19px; } div.SingleWide.NoFrame div#MainContent div.Grid4 div.Col.Size1 { width: 228px; } div.SingleWide.NoFrame div#MainContent div.Grid4 div.Col.Size2 { width: 475px; } div.SingleWide.NoFrame div#MainContent div.Grid4 div.Col.Size3 { width: 722px; } /* Column Size 1/5 */ div.SingleWide.NoFrame div#MainContent div.Grid5 { margin-right: -20px; } div.SingleWide.NoFrame div#MainContent div.Grid5 div.Col { margin-right: 20px; } div.SingleWide.NoFrame div#MainContent div.Grid5 div.Col.Size1 { width: 178px; } div.SingleWide.NoFrame div#MainContent div.Grid5 div.Col.Size2 { width: 376px; } div.SingleWide.NoFrame div#MainContent div.Grid5 div.Col.Size3 { width: 574px; } div.SingleWide.NoFrame div#MainContent div.Grid5 div.Col.Size4 { width: 772px; } /* "Single (Wide, contract)" ---------- ---------- */ /* Column Size 1/2 */ div.SingleWide div#MainContent div.Contract div.Grid2 div.Col.Size1 { width: 350px; } /* Column Size 1/3 */ div.SingleWide div#MainContent div.Contract div.Grid3 { margin-right: -21px; } div.SingleWide div#MainContent div.Contract div.Grid3 div.Col { margin-right: 21px; } div.SingleWide div#MainContent div.Contract div.Grid3 div.Col.Size1 { width: 226px; } div.SingleWide div#MainContent div.Contract div.Grid3 div.Col.Size2 { width: 473px; } /* Column Size 1/4 */ div.SingleWide div#MainContent div.Contract div.Grid4 { margin-right: -20px; } div.SingleWide div#MainContent div.Contract div.Grid4 div.Col { margin-right: 20px; } div.SingleWide div#MainContent div.Contract div.Grid4 div.Col.Size1 { width: 165px; } div.SingleWide div#MainContent div.Contract div.Grid4 div.Col.Size2 { width: 350px; } div.SingleWide div#MainContent div.Contract div.Grid4 div.Col.Size3 { width: 535px; } /* "MultipleImages" ---------- ---------- */ div#MainContent div.MultipleImages{ margin-right: -20px; overflow: hidden; letter-spacing: -.40em; } div#MainContent div.MultipleImages p.Image{ margin-right: 20px; display:inline-block; letter-spacing: normal; /display:inline; /zoom:1; } /* "CvBoxBanner" ---------- ---------- */ div#MainContent p.CvBoxBanner{ background-color: #fff; border-width: 1px; border-style: solid; } div#MainContent p.CvBoxBanner.Bg1{ border-color: #000; } div#MainContent p.CvBoxBanner.Bg2{ border-color: #0f5189; } div#MainContent p.CvBoxBanner > a{ display: block; text-decoration: none; } div#MainContent p.CvBoxBanner > a:hover, div#MainContent p.CvBoxBanner > a:focus{ opacity: .8; } div#MainContent p.CvBoxBanner span.CvThumbBlock{ display: table; box-sizing: border-box; width: 100%; padding: 5px; word-break: break-all; direction: rtl; } div#MainContent p.CvBoxBanner.Bg1 span.CvThumbBlock{ background: #26303a url("../../img/common/bg_thumb_block_01.jpg") no-repeat 0 0; } div#MainContent p.CvBoxBanner.Bg2 span.CvThumbBlock{ background: #40a1a7 url("../../img/common/bg_thumb_block_02.jpg") no-repeat 0 0; } div#MainContent p.CvBoxBanner span.CvThumbBlock > span{ display: table-cell; width: 100%; } div#MainContent p.CvBoxBanner span.CvThumbBlock span.CvThumbText{ padding-left: 7px; font-size: 1.07em; line-height: 1.2; color: #fff; vertical-align: middle; direction: ltr; } div#MainContent p.CvBoxBanner span.CvThumbBlock span.CvThumbImage > img{ border: 1px solid #909090; } div#MainContent p.CvBoxBanner span.CvText{ display: block; padding: 1px 5px; font-size: 1.083333em; text-align: center; color: #e60012; } div#MainContent p.CvBoxBanner span.CvText span.CvTextInner{ display: inline-block; padding-left: 14px; } div#MainContent p.CvBoxBanner span.CvText span.Download{ background: url("../../img/common/mkr_tabnav_dl.png") 0 50% no-repeat; } /* 修正分(2015/02) ---------- ---------- ---------- */ div#ContentsArea #BtnGroup{ display: table; table-layout: auto; box-sizing: border-box; width: 100%; background: #ddd; padding: 20px 20px 20px 14px; margin-bottom: 20px; } div#ContentsArea #BtnGroup > #BtnList01{ display: table-cell; vertical-align: middle; } div#ContentsArea #BtnGroup > #BtnList01 > ul{ display: table; border-spacing: 6px 0; margin: 0; } div#ContentsArea #BtnGroup > #BtnList01 > ul > li { display: table-cell; background-image: none !important; margin: 0; padding: 0; } div#ContentsArea #BtnGroup ul > li > a{ vertical-align: bottom; padding: 0; } div#ContentsArea #BtnGroup > #TelArera{ display: table-cell; width: 100%; vertical-align: middle; } div#ContentsArea #BtnGroup #TelArera > dl { background: #f5f5f5 url("../../img/icon_tel.gif") no-repeat 10px center; margin: 0; padding: 15px 10px; } div#ContentsArea #BtnGroup #TelArera.FreeArea > dl{ background-image: url("../../img/icon_tel_free.gif"); } div#ContentsArea #BtnGroup #TelArera > dl > dt, div#ContentsArea #BtnGroup #TelArera > dl > dd{ padding: 0 0 0 38px; } div#ContentsArea #BtnGroup #TelArera > dl > dt { font-size: 16px; font-weight: bold; line-height: 1; white-space: nowrap; } div#ContentsArea #BtnGroup #TelArera.FreeArea > dl > dt{ font-weight: normal; font-size: 12px; } div#ContentsArea #BtnGroup #TelArera.FreeArea > dl > dd a{ font-size: 24px; font-weight: bold; color: #333; display: inline-block; margin-top: 3px; } div#ContentsArea #BtnGroup #TelArera.FreeArea > dl > dd a:hover, div#ContentsArea #BtnGroup #TelArera.FreeArea > dl > dd a:focus{ cursor: text; text-decoration: none; } div#ContentsArea #BtnGroup #TelArera > dl > dt .numbertitle{ margin-left: 0; } div#ContentsArea #BtnGroup #TelArera > dl > dt > a{ font-size: 24px; display: inline-block; cursor: default; text-decoration: none; color: #1a5c9a; } /*電話番号フォント調整(16px~22px)【default:24px】*/ div#ContentsArea #BtnGroup #TelArera > dl > dt > a.FontSize16{ font-size: 16px; } div#ContentsArea #BtnGroup #TelArera > dl > dt > a.FontSize18{ font-size: 18px; } div#ContentsArea #BtnGroup #TelArera > dl > dt > a.FontSize20{ font-size: 20px; } div#ContentsArea #BtnGroup #TelArera > dl > dt > a.FontSize22{ font-size: 22px; } div#ContentsArea #BtnGroup #TelArera > dl > dt > span{ display: inline-block; margin: 0 10px 0 0; } #ContentsLayout.DoubleMainSub a:hover img, #ContentsLayout.DoubleMainSub a:focus img, #ContentsLayout.SingleWide a:hover img, #ContentsLayout.SingleWide a:focus img, #HeaderArea a:hover img, #HeaderArea a:focus img, #FooterArea a:hover img, #FooterArea a:focus img, #PageBottomContent a:hover img, #PageBottomContent a:focus img, #MegaMenu a:hover img, #MegaMenu a:focus img{ opacity: .8; -ms-filter: "alpha(opacity=80)"; } #ContentsLayout.SingleWide.NoFrame a:hover img, #ContentsLayout.SingleWide.NoFrame a:focus img{ opacity: 1; -ms-filter: "alpha(opacity=100)"; } /* 7. ContentsArea GridUtility ---------- ---------- ---------- */ div#MainContent .GridUtility{ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } div#MainContent .GridUtility img{ max-width: 100%; } div#MainContent .GridUtility[class*="Col"]{ margin-left: -20px; } div#MainContent .GridUtility > [class*="ColSize"]{ box-sizing: border-box; padding-left: 20px; } div#MainContent .GridUtility.MarginAdjust > [class*="ColSize"]{ margin: 0 0 16px; } div#MainContent .GridUtility.MarginAdjust > [class*="ColSize"] > *:last-child{ margin-bottom: 0; } div#MainContent .GridUtility.MiddleVAlign{ -ms-flex-align: center; align-items: center; } div#MainContent .GridUtility.BottomVAlign{ -ms-flex-align: end; align-items: flex-end; } div#MainContent .GridUtility.Auto { flex-wrap: nowrap; margin-left: -20px; } div#MainContent .GridUtility.ItemCenter { justify-content: center; } div#MainContent .GridUtility.ItemEnd { justify-content: flex-end; } div#MainContent .GridUtility.ItemStart { justify-content: flex-start; } div#MainContent .GridUtility.Col1 .ColSize1{ width: 100%; } div#MainContent .GridUtility.Col2 .ColSize1{ width: 50%; } div#MainContent .GridUtility.Col2 .ColSize2{ width: 100%; } div#MainContent .GridUtility.Col3 .ColSize1{ width: 33.333%; } div#MainContent .GridUtility.Col3 .ColSize2{ width: 66.666%; } div#MainContent .GridUtility.Col3 .ColSize3{ width: 100%; } div#MainContent .GridUtility.Col4 .ColSize1{ width: 25%; } div#MainContent .GridUtility.Col4 .ColSize2{ width: 50%; } div#MainContent .GridUtility.Col4 .ColSize3{ width: 75%; } div#MainContent .GridUtility.Col4 .ColSize4{ width: 100%; } div#MainContent .GridUtility.Col5 .ColSize1{ width: 20%; } div#MainContent .GridUtility.Col5 .ColSize2{ width: 40%; } div#MainContent .GridUtility.Col5 .ColSize3{ width: 60%; } div#MainContent .GridUtility.Col5 .ColSize4{ width: 80%; } div#MainContent .GridUtility.Col5 .ColSize5{ width: 100%; }