/* Stylesheet: docs/crb_default.css Purpose: Common stylesheet for Carringbush.Net web sites Structure: Two sections layout - deals with dimensions and form skin - deals colour Copyright: Copyright © 2011 by Corpita Pty Ltd 15 Bedford Street, Collingwood 3066, Australia History: 2014-11-25 by BMW Start conversion to responsive contruction 2012-07-03 by BMW Vary heading and link colour 2011-12-27 by Brian Warburton Initial version */ /* === GENERAL = */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { margin: 0 0 4em 0; color: #333333; font-size: 12pt; font-family: "Open Sans", "Lato", Verdana, arial, helvetica, sans-serif; background: url(/crb_docs/images/strip.gif) repeat-x; line-height: 1.3em; } div { text-align: left; box-sizing: border-box; } table { border-collapse: collapse; } p, ul, blockquote { margin: 0 0 1em 0; } ul { list-style-type: disc; } ul.plain { list-style-type: none; } li { margin: 0 0 0 1em; } ul.plain { list-style-type: none; } ul.plain li { margin: 0 0 0.5em 0; line-height: 1.1em; } h1, h2, h3, h4 { font-weight: bold; color: #666666;} h1 { font-size: 20pt; color: #333333; margin: 1pt 0 5pt 0; } h2 { font-size: 16pt; color: #333333; margin: 4pt 0 3pt 0; } h3 { font-size: 14pt; margin: 0 0 2pt 0; } h4 { font-size: 12pt; margin: 0 0 0 0; } hr.crb { margin: 5pt 0 10pt 0; color: #B6d909;; height:1pt;border-width:0;color:#999999;background-color:#CCCCCC; } /* === LAYOUT === */ /* 2016-03-04 / BMW #frame { width: 858px; margin: 0 auto 0 auto; padding: 0; background: #FFFFFF url(/crb_docs/images/strip_tab_858.gif) no-repeat; } */ /* 2020-03-23 .container { width: 858px; margin: 0 auto 0 auto; padding: 0 1em; clear: both; background-color: #F8F8F8; } */ .container { width: 858px; margin: 0 auto 0 auto; padding: 0 1em; clear: both; } .container::after { content: ""; display: table; clear: both; } .column_main { width: calc(100% - 250px - 35px); float: left; margin-right: 35px; } /* -- generic -- */ .crb_green { color: #B6d909; } .crb_orange { color: #F6CC18; } .crb_blue { color: #008080; } .font_small { font-size: 0.8em; line-height:1.1em; } .highlight_bold { color: #c85b2d; font-weight: bold; } .inline { display: inline; } .lead_text { font-size: 1.1em; font-weight: bold; margin-top: 1em; } .trail_text { font-weight: bold; margin-top: 1em; } .nowrap { white-space: nowrap; } .number_cell { text-align: right } .tick { color: #B6d909; } .cross::before { content: '\2718'; color: #999999; display: block; font-size: 18pt; } .tick::before { content: '\2714'; color: #B6d909; display: block; font-size: 18pt; margin: 4pt 0; } /* -- links -- */ a.crb_green { color: #B6d909; } a.crb_orange { color: #F6CC18; } a.crb_tan { color: #AF8414; } /* 2016-02-26 a.crb_green_dark { color: #6b8005; } */ a.crb_green_dark { color: #29761f; } #menu_block a, div.column_1 a { color: #888888; text-decoration: none; } #menu_block a { margin: 0 15pt 0 0; font-weight: bold; } #menu_block a:last-child { margin: 0; } #footer { color: #999999; } #footer a { color: #999999; text-decoration: none; } a:link, a:active, a:visited { color: #008080; text-decoration: none; } /* 2022-04-28 #c85b2d; */ a.link_more { font-size: 9pt; padding-right: 25pt; } h2 a:link, h2 a:active, h2 a:visited { color: #666666; } .front_box h2 a { text-decoration: none; color: #666666; } /* color: #6b8005; */ /* === PAGE COMPONENTS = */ /* = HEADER = */ #frame { width: 858px; margin: 0 auto 0 auto; padding: 0; background: #FFFFFF url(/crb_docs/images/strip_tab_858.gif) no-repeat; } #banner_top { width: 858px; margin: 0 auto 0 auto; text-align: right; font-weight: bold; font-size: 9pt; height: 30pt; padding: 4pt 18pt 0 0; background: #FFFFFF url(/crb_docs/images/strip_tab_858.gif) no-repeat; color: #FFFFFF; } #banner_top a { color: #FFFFFF; text-decoration: none; } #banner_logo { margin: 6pt 0 17pt 0; float: left; width: calc(50% - 16pt); background-color: #FFFFFF; } #banner_phone { text-align: right; margin: 28pt 25pt 0 0; float: left; width: calc(50% - 25pt); } #banner_phone, #banner_phone a { color: #F6CC18; font-weight: bold; font-size: 16pt; } #menu_block { width: calc( 100% ); padding: 0 0 0 0; font-size: 11pt; float: left; text-align: center; } #banner_image { clear: both; height: auto; padding: 0 0 2em 0; margin-top: 1em; } /* 2016-06-16 / BMW #bottom_row { height: 169px; width: 100%; padding-top: 25px; background-image: url( /images/box_wide_01.jpg ); background-repeat: no-repeat; clear:left; } */ #banner_image { border-bottom: 0 solid green; } /* - secure variant - */ #banner_image_secure { clear: both; height: 120px; width:860px; margin: 10px auto 0 auto; display: none;} /* ---- menu */ #menu_block ul li:first-of-type { display: none; } #menu_block ul li { display: block; float: left; position: relative; padding: 0 20pt 0 0; } #menu_block a { color: #818181; display: block; line-height: 1em; padding: 8pt 0 0 0; text-decoration: none; border-top: 3pt solid #FFFFFF; } #menu_block ul li ul { left: -99999px; position: absolute; } #menu_block ul li:hover ul { border-radius: 5pt; left: -20pt; top: 25pt; background-color: #FFFFFF; padding: 1em 0 5pt 20pt; position: absolute; z-index: 20000; } #menu_block ul li ul li:first-of-type { display: block; } .page_about #menu_block a.menu_about, .page_advice #menu_block a.menu_advice, .page_home #menu_block a.menu_home, .group_hosting #menu_block a.menu_hosting, .page_help #menu_block a.menu_help, .page_websites #menu_block a.menu_websites, .page_domain_names #menu_block a.menu_domain_names, .page_programming #menu_block a.menu_programming, .page_networks #menu_block a.menu_networks, .group_email #menu_block a.menu_email, .page_contact #menu_block a.menu_contact, .page_access #menu_block a.menu_access, #menu_block a:hover { color: #333333; text-decoration: none; border-top: 3pt solid #F6CC18;; } #menu_block a:hover { color: #999999; text-decoration: none; border-top: 3pt solid #B6d909; } a:hover { text-decoration: underline; } #menu_sub_email { width: 100pt; } #menu_sub_hosting { width: 120pt; } /* = CONTENT = */ .column { width: 100%; clear:both; } .column::after { content: ""; display: table; clear: both; } .main_column { width: 35em; float: left; padding-top: 10pt; } .column_3 { width: 16em; margin: 0 0 0 0; float: right; text-align: right; } .column_half_left { width: calc(50% - 1.5em); margin: 0 0.5em 0 0; float: left; } .column_half_right { width: calc(50% - 1.5em); margin: 0 0 0 auto; float: right; } /* = FOOTER = */ #footer { clear: both; font-size: 8pt; margin-top: 2em; } #footer div { float: left; width: 50%; } /* ================================================================================= */ /* ==== MULTIPLE PAGES */ /* - feature_box - */ .column_3 div.feature_box { margin: 0 0 0 auto; width: 193px; height: 193px; padding: 1pt 1em 0 1em; background-image: url(/images/feature_box_01.jpg); background-repeat: no-repeat; } .column_3 div.feature_box h2 { font-size: 12pt; color: #FFFFFF; text-align: center; } .column_3 div.feature_box h2 a { color: #FFFFFF; } .column_3 div.feature_box p { font-size: 10pt; } .column_3 div.feature_box h3 { color: #008080; font-size: 12pt; margin: 10pt 0 0.5em 0; } /* - green_box - */ .green_box { border: 1pt solid #AAffAA; padding: 10pt; background-color:#eeffee; } .blue_box { border: 1pt dotted #008080; margin: -5pt 0 10pt 10pt; padding: 5pt 10pt 5pt 10pt; } /* related_features */ #related_features { width: 858px; margin: 0.5em auto 0 auto; } /* - front_box - */ div.front_box { height: 130pt; width: 286px; padding: 18pt 10pt 0 20pt; background-repeat: no-repeat; float: left;} div.front_box p { font-size: 11pt; } div.front_box:nth-child(1) { background-image: url(/images/box_left.png); } div.front_box:nth-child(2) { background-image: url(/images/box_middle.png); } div.front_box:nth-child(3) { background-image: url(/images/box_right.png); } #product_box_set .product_row_not { display: none; } #product_box_set .feature_box h2 { font-size: 14pt; color: #008080; } #product_box_set .feature_box h3 { font-size: 12pt; color: #000000; } #product_box_set .feature_box { margin-top: -10px; } #access_packages td, #hosting_resource_prices td, #access_packages th, #hosting_resource_prices th { padding: 0; text-align: center; } #access_packages th, #hosting_resource_prices th { color: #98989C; padding-top: 2pt; } /* ==== SPECIFIC PAGES */ /* -- access -- */ #access_packages .column_heading { color: #000000; } #access_packages { width: 100%; margin: 20px 0 30px 0; } #access_packages td { height: 22px; } .page_access h3 { display: inline; font-size: 1em; font-weight: bold; text-decoration: none; } /* -- contact -- */ #contact_table { margin: 1.5em 0 1em 0; } #contact_table th { text-align: left; vertical-align: top; padding: 5pt 10pt 5pt 0pt; color: #666666; } #contact_table td { text-align: left; vertical-align: top; padding: 5pt 10pt 5pt 0pt; } #contact_table .odd { background-color: #EEFFEE; } #contact_table .even { background-color: #FFFFEE; } #crbform_sheet .formprompt p { margin-bottom: 2pt; font-weight: bold; } #message_form_pane { width: 20em; margin-left: auto; } #crbform_captcha_cell p { text-align: center; } #crbform_captcha_cell img { display: block; margin: 0.2em auto 0.2em auto; } /* -- hosting -- */ /* - product_box - div.product_box { float: left; width: calc(16.6% - 2pt); border: 1pt solid #CCCCCC;; margin: 0 2pt 0 0; box-sizing: border-box; } */ /* -- dektop -- */ /* -- hosting -- */ div.box_product { width: 32%; } #hosting_resource_prices { background: #FFFFFF url(/images/yellow_green_strip.png) no-repeat center top; height: auto; font-size: 0.8em; } .product_description { height: 80pt; padding-top: 1em; } .page_hosting_premium .box_product { width: 100%; } .page_hosting_premium .box_product .product_price { height: 5em; } .page_hosting_premium .box_product .product_description { height: 80pt; padding-top: 1em; } /* -- hosting_packages_standard -- */ div.product_box { float: left; width: calc(32%); border: 1pt solid #CCCCCC; margin: 0 2pt 1em 0; box-sizing: border-box; min-height: 560pt; background-color: #FFFFEE; } div.product_name { background-color: #B6d909;; border: 1pt solid #B6d909;; } div.product_box h2 { color: #333333; font-size: 14pt; } div.product_box div { text-align: center; padding: 0.8em; } div.product_price { font-weight: bold; height: 50pt; background-color: #FFFFFF; } div.product_box .product_description { font-size: 0.8em; min-height: 80pt; line-height: 1.1em; } div.product_box .odd { background-color: #EEFFEE; } div.product_box .even { background-color: #FFFFEE; } div.product_box .modules { height: 5em; } table.hosting_packages { width: 100%; } table.hosting_packages th { text-align: right; vertical-align: top; } table.hosting_packages td, table.hosting_packages th.column { text-align: center; width: 25%; vertical-align: top; } #hosting_resource_prices { margin: 2em auto 2em auto; } #hosting_resource_prices th, #hosting_resource_prices td { line-height: 1.3em; text-align: left; } #hosting_resource_prices th.column_heading { color: #FFFFFF; } .page_hosting_premium .product_box .product_price { height: 5em; } /* -- hosting_packages_premium -- */ .page_hosting_premium .product_box { width: 32%; } .page_hosting_premium .product_box .product_price { height: 5em; } .page_hosting_premium .product_box .product_description { height: 12em; padding-top: 1em; } /* -- hosting_packages_slim -- */ .page_hosting_slim .product_box { width: calc(50% - 1em); } .page_hosting_slim .product_box .product_description { height: 4em; } .page_hosting_slim .product_box .product_price { height: 3em; } #hosting_resource_prices { background: #FFFFFF url(/images/yellow_green_strip.png) no-repeat center top; height: auto; font-size: 0.8em; } /* -- hosting as tables -- table.box_product { float: left; width: calc(32%); border: 0pt solid #CCCCCC; margin: 0 2pt 1em 0; box-sizing: border-box; */ table.box_product { float: left; width: 33%; border: 0pt solid #CCCCCC; margin: 0 2pt 1em 0; box-sizing: border-box; box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.11) inset; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.11) ; } table.box_product a:link, div.box_product a:visited { text-decoration: underline; } table.box_product .product_name a { text-decoration: none; } table.box_product a:hover { text-decoration: none; } table.box_product td { height: 60pt; padding: 5pt 5pt; vertical-align: middle; line-height: 1; text-align: center; color: grey; } table.box_product tr:nth-child(odd) td { background-color: #EEEEEE; } table.box_product tr:nth-child(even) td { background-color: #FFFFEE; } table.box_product p { margin: 0; } td.product_name { padding: 0 !important; } table.box_product h2 { color: #FFFFFF; font-size: 14pt; background-color: #B6d909; line-height: 24pt; margin: 0; padding: 4pt 0; } td.product_price { font-weight: bold; height: 50pt; background-color: #EEEEEE; } table.box_product .product_description { font-size: 0.8em; min-height: 700pt; line-height: 1.1em; background-color: #EEEEEE; } table.box_product .modules { height: 5em; } .box_product .product_price { min-height: 40pt; } /* -- glossary -- */ /* -- programming -- */ div.feature_item { background-color: #FFFFCC; text-align: center; font-weight: bold; padding: 1em 0.5em; margin: 1em auto; width: 100%; background-image: url(/crb_docs/images/heading_021.gif); float: left; } /* =============== MEDIUM === */ @media screen and (max-width: 61em) { /* === GENERAL = body { } h1, h2 { } li { padding-left: 2em; } === LAYOUT === .container { width: calc(100% - 2em); margin: 0 1em 0 1em; float: left; background-color: #FFFFEE; } .main_column, .column_3, .column_half_left, .column_half_right, #related_features { width: 100%; } .column_3 { padding: 0; text-align: left; } .container { background-color: #EEEEFF; } #main_panel { width: 100%; border-left: 0pt solid #222222; } #mxnform_sheet { width: 100%; float: none; } === PAGE COMPONENTS = = HEADER = .phone_data { font-size: 1.2em; margin-bottom: 1em; text-align: center; } #banner_logo, #banner_phone { width: 100%; margin: 1em; text-align: center; clear: right; } #banner_image img { width: 100%; height: auto; } #banner_image_secure { width: 100%; height: auto; } - menu - #menu_block ul { float: none; max-width: 100%; } #menu_block ul.menu_hideable_class li:first-of-type, #menu_block ul.menu_hideable_class ul li:first-of-type { display: block; } #menu_block ul.menu_hideable_class li { display: none; } #menu_block ul li { display: block; float: none; position: relative; padding: 0; } #menu_block { font-weight: bold; letter-spacing: 0.8pt; margin-top: 1em; max-width: 100%; text-transform: uppercase;width: 100%; } #menu_block a { color: #999999; padding: 1em; } #menu_block ul { float: none; max-width: 100%; } #menu_block ul.menu_hideable_class li { display: none; } #menu_block ul.menu_hideable_class li:first-of-type, #menu_block ul.menu_hideable_class ul li:first-of-type { display: block; } #menu_block ul.menu_hideable_visible_class li { display: block; } #menu_block ul.menu_hideable_visible_class li:first-of-type { display: none; } #menu_block ul.menu_hideable_class ul li a { padding-left: 3em; } #menu_menu { display: inline; font-size: 14pt; margin-bottom: 0; } ==== MULTIPLE PAGES - feature_box - .column_3 div.feature_box { width: calc(100% - 2em); height: auto; background-image: none; padding: 1em; margin: 1em 1em clear: both; border: 1pt solid #CCCCCC; } .column_3 div.blue_box { width: calc(100% - 2em); height: auto; background-image: none; padding: 1em; margin: 1em auto; clear: both; border: 1pt solid #CCCCCC; } #related_features .front_box { width: calc(100% - 2em); height: auto; background-image: none; padding: 1em; margin: 1em 1em; clear: both; border: 1pt solid #CCCCCC; } ==== SPECIFIC PAGES - access - - contact - #contact_panel { width: 100%; float: none; } #message_form_pane { width: 20em; margin-left: 0; } /- email - - web hosting - div.product_box { width: 100%; } */ } /* =============== PRINT === */ @media print { #banner_top, #banner_image, #menu_block, #footer_menu, .column_3 { display: none !important; } }