/* ############################################################################### ## ## @file: main.css ## @site: Gaming Commission ## @description: Defines main styling. Exceptions, such as reset, ## or browser specific styling are kept in separate files ## ############################################################################### [Table of contents] 1. GLOBAL STYLING 1.1 general 1.2 headings 1.3 links & buttons 1.4 text styles 1.5 lists 1.6 tables 1.7 extra 2. MODIFIERS 3. PAGE STRUCTURE 3.1 language 3.2 header 3.3 body 3.4 footer 4. NAVIGATION 4.1 main menu 4.2 sub menu 4.3 language selection 4.4 contact link 5. FORMS 5.1 general 5.2 search header 5.3 login form 6. GENERAL ELEMENTS 7. PAGE SPECIFIC 7.1 home / login home 7.2 contact page ############################################################################### */ /* ========================================================================= * 1. GLOBAL STYLING * ========================================================================= */ /*1.0 Fonts ---------------------------------------------------------------------------- */ /* latin-ext */ @font-face { font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 400; src: local('PT Sans Narrow'), local('PTSans-Narrow'), url(/opencms/export/CJHModule/resources/fonts/ptsansnarrow-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 400; src: local('PT Sans Narrow'), local('PTSans-Narrow'), url(/opencms/export/CJHModule/resources/fonts/ptsansnarrow-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } /* latin-ext */ @font-face { font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 700; src: local('PT Sans Narrow Bold'), local('PTSans-NarrowBold'), url(/opencms/export/CJHModule/resources/fonts/ptsansnarrow-bold-latin-ext.woff2) format('woff2'); } /* latin */ @font-face { font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 700; src: local('PT Sans Narrow Bold'), local('PTSans-NarrowBold'), url(/opencms/export/CJHModule/resources/fonts/ptsansnarrow-bold-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } /* 1.1 general ---------------------------------------------------------------------------- */ body {background-color: #fff; font: 62.5% Arial, Helvetica, sans-serif; color:#569bbe; line-height:1.3em; } /* ----- CLEARFIX - Critical part of the CSS! ----- */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /* 1.2 headings ---------------------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 {font-weight:bold;color:#fff;font-size:1em;} h1 {font-size:1.5em;} h2 {font-size: 1.4em; margin: 0 0 1.2em 0;} h3 {font-size:1.2em; margin:0 0 15px 0;} h4 {margin:0.5em 0 0.5em 0;} h5 {} h6 {} .pageContent h1, .pageContent h2, .pageContent h3, .pageContent h4, .pageContent h5, .pageContent h6 {margin: 0 0 1em;} .view-article h3 { padding: 20px 0px 0px 0px; } /* 1.3 links & buttons ---------------------------------------------------------------------------- */ a {color:#c6c7c8; text-decoration:underline; white-space:nowrap;} a.active, a:hover, a:focus {color:#fff; text-decoration:none;} /* File icons in front of links to a file */ a[href$='.xls'], a[href$='.xlsx'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'], a[href$='.ppt'], a[href$='.pptx'], a[href$='.pps'], a[href$='.doc'], a[href$='.docx'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'], a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'], a[href$='.pdf'] {display:inline-block; padding-left:20px; line-height:20px; background:url("/opencms/export/CJHModule/resources/images/fileSprite.png") no-repeat 0 0;} a[href$='.pdf'] {background-position: 0 -50px;} a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'], a[href$='.xlsx'] {background-position: 0 -75px;} a[href$='.doc'], a[href$='.docx'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] {background-position: 0 -100px;} a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {background-position: 0 -125px;} a[href$='.ppt'], a[href$='.pptx'], a[href$='.pps'] {background-position: 0 -150px;} /* 1.4 text styles ---------------------------------------------------------------------------- */ p {padding-bottom:15px; text-align: justify;} .pageContent p {padding: 0; margin-bottom: 15px; line-height:1.3em;} strong {font-weight:bold;} em {font-style:italic;} hr {color:#C6C7C8; border:none; border-top:1px solid #C6C7C8; height:1px; margin: 2.5em 0 2.5em;} /* 1.5 lists ---------------------------------------------------------------------------- */ .pageContent ul, ol {margin: 0 0 1.5em; padding: 0; list-style: none;} .pageContent ol li, ul li {margin: 0.4em 0 0.4em 2em;list-style-position:outside;} .pageContent ul li {list-style:disc;} .pageContent ol li {list-style:decimal;} /* 1.6 tables ---------------------------------------------------------------------------- */ .pageContent table {margin-bottom: 1.5em; width:100%;} .pageContent th {font-weight: bold; border-bottom: 1px solid #569bbe;} .pageContent th,td {padding: .3em .3em .3em .3em;} .pageContent tfoot {font-style: italic;} .pageContent caption {background: #eee;} /* 1.7 extra ---------------------------------------------------------------------------- */ /* ========================================================================= * 2. MODIFIERS * ========================================================================= */ .float-r {float:right;} .float-l {float:left;} /* ========================================================================= * 3. PAGE STRUCTURE * ========================================================================= */ .contentWrapper {width:960px; padding: 0; margin:0 auto;} /* 3.2 HEADER (top part of the website) ---------------------------------------------------------------------------- */ #header {line-height: 1em;} #header .contentWrapper {position:relative; margin-top: 25px; background:url("/opencms/export/CJHModule/resources/images/bgBlack.png") no-repeat 240px 149px; height: 165px;} #home #header .contentWrapper {background-position: 670px 149px;} #login #header .contentWrapper {background-position: 670px 157px;} /* ----- Header logo ----- */ #header h1 a {display:block;width:210px;height:80px;background:url("/opencms/export/CJHModule/resources/images/logo.png") no-repeat 0 0;overflow:hidden;text-indent:-9999px;} .lang-en #header h1 a {background-position: 0 0;} .lang-fr #header h1 a {background-position: 0 -90px;} .lang-nl #header h1 a {background-position: 0 -180px;} .lang-de #header h1 a {background-position: 0 -270px;} /* 3.3 BODY (middle content part of the website) ---------------------------------------------------------------------------- */ #body {background-color: #569bbe; color: #fff; font-size: 1.2em;} .colLeft, colRight {min-height: 585px;} .colLeft {float: left; width: 240px;} .colRight {float: right; width: 720px; background: #030303 url("/opencms/export/CJHModule/resources/images/bgMainBottom.png") repeat-x left bottom;} #home .colLeft, #login .colLeft {width: 625px;} #home .colRight, #login .colRight {width: 290px;} #login .colLeft, #login colRight {min-height: 260px;} .colLeft .inner, .colRight .inner {padding: 25px 0;} .colRight .inner {background:url("/opencms/export/CJHModule/resources/images/bgMainTop.png") repeat-x left top; min-height: 535px; padding: 25px 20px;} #login .colRight .inner {min-height: 218px;} /* 3.4 FOOTER (bottom part of the website) ---------------------------------------------------------------------------- */ #footer {font-size:1.2em; color: #000; line-height: 1.5em;} #footer .contentWrapper {position: relative; background:url("/opencms/export/CJHModule/resources/images/bgBlack.png") no-repeat 240px 0; padding-top: 50px; height: 50px;} #home #footer .contentWrapper {background-position: 670px -3px;} #login #footer .contentWrapper {background-position: 670px -11px;} #footer a {color:#000;text-decoration:none;} #footer a:hover {text-decoration:underline;} #footer p {padding:0;margin:0;} #footer .copyright {float: left; width: 700px;} #footer .creators {float: right; color: #c6c7c8; text-align:right;} #footer .creators a {color: #c6c7c8;} #footer .creators a:hover {color: #569bbe; text-decoration: none;} /* ========================================================================= * 4. NAVIGATION * ========================================================================= */ /* 4.1 main menu ---------------------------------------------------------------------------- */ #mainNav {position:absolute;top:126px;left:0; max-width: 830px; overflow: hidden;} #mainNav li {float:left;padding:0; margin: 0;} #mainNav li.last {padding:0;} #mainNav a {display:block;color:#569bbe;font-weight:bold;text-decoration:none;font-size:1.4em; padding: 0 10px; line-height: 1em; text-transform: uppercase; border-left: #c6c7c8 2px solid;} #mainNav li.last a {border-right: #c6c7c8 2px solid;} #mainNav a:hover {color:#030303;} #mainNav li.active a {color:#030303;text-decoration: underline;} /* 4.2 sub menu ---------------------------------------------------------------------------- */ #subNav {margin: 0; padding: 0; width: 200px;} #subNav li {margin: 0; padding: 0; list-style: none;} #subNav a {color: #fff; font-weight:bold;text-decoration:none;padding: 0 0 5px; display: block; line-height: 1em; font-size: 1.2em; height: 100%;} #subNav a:hover, #subNav li a.active, #subNav li a.active-trail {color: #030303;} #subNav li a.active {background: #569bbe url("/opencms/export/CJHModule/resources/images/search.png") no-repeat 0px 3px; padding-left: 12px; font-weight: bold;} #subNav li li {margin: 0 0 0 20px;} #subNav li li a {font-weight: normal;} #subNav li li a:hover {} #subNav li li li {margin: 0 0 0 40px;} #subNav li li li a {} #subNav li li li a:hover {} /* 4.3 Language selection ---------------------------------------------------------------------------- */ #languageSelect {position:absolute;top:3px;right:0;} #languageSelect .flag-nl, #languageSelect .flag-fr, #languageSelect .flag-secure, #languageSelect .flag-en, #languageSelect .flag-de {display:block; float: left; width:18px;height:13px;background:url("/opencms/export/CJHModule/resources/images/languageNL.png") no-repeat 50% 0;overflow:hidden;text-indent:-9999px; padding: 0 5px; border-left: 2px solid #c6c7c8;} #languageSelect .flag-nl {} #languageSelect .flag-fr {background-image: url("/opencms/export/CJHModule/resources/images/languageFR.png");} #languageSelect .flag-en {background-image: url("/opencms/export/CJHModule/resources/images/languageEN.png"); } #languageSelect .flag-de {background-image: url("/opencms/export/CJHModule/resources/images/languageDE.png"); border-right: 2px solid #c6c7c8;} #languageSelect .flag-secure {background-image: url("/opencms/export/CJHModule/resources/images/lock.png");} #languageSelect .flag-nl.active, #languageSelect .flag-fr.active, #languageSelect .flag-en.active, #languageSelect .flag-de.active, {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3; opacity: 0.3;} #languageSelect .flag-nl:hover, #languageSelect .flag-fr:hover, #languageSelect .flag-secure, #languageSelect .flag-en:hover, #languageSelect .flag-de:hover {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;} /* 4.4 Contact Link ---------------------------------------------------------------------------- */ #contactLink {position:absolute;top:116px;right:0;} #contactLink a {display:block; padding: 0 12px; height:32px; line-height: 32px; background-color: #282828; overflow:hidden; color: #fff; font-size: 1.2em; font-weight: bold; text-decoration: none; text-transform: uppercase;} #contactLink a:hover {background-color: #030303;} #contactLink strong.question_mark {font-size: 15px; line-height: 32px; padding-right: 3px;} #contact #contactLink a {height: 33px;} /* Only for Contact page, connects the contact button with the black content area of the page */ /* 4.4 Print link (requires an article with keyword `print` or an accordion) ---------------------------------------------------------------------------- */ .print-link {display:none;} .print .print-link, .ui-accordion-content .print-link {display:block;} .print-link {text-align: right; margin-bottom:13.2px;} .print-link .ui-icon {display:inline-block; vertical-align:text-bottom;} /* ========================================================================= * 5. FORMS * ========================================================================= */ /* 5.1 General Stuff ---------------------------------------------------------------------------- */ form {} label {} input, textarea, select {border: 2px #fff solid; background-color: #fff; color: #000; padding: 3px; margin-bottom: 4px; width: 280px;} input:focus, input:hover {border-color: #569bbe;} input[type=submit], .form-submit {width: auto; font-weight: bold; color: #569bbe;} option {border: 0 none;} select {width: 290px;} /* 5.2 Form Header ---------------------------------------------------------------------------- */ #searchHeaderBlock {position:absolute;top:40px;right:0;} #search-theme-form .form-text {position: absolute; top: 0; right: 33px; width: 140px; height: 15px; color: #c6c7c8; font-size: 1.2em; border: 1px solid #569bbe; padding: 8px; margin: 0; line-height: 15px;} #search-theme-form .form-text:hover, #search-theme-form .form-text:focus {color: #569bbe;} #search-theme-form .form-submit {width: 33px; height: 33px; border: 1px solid #569bbe; border-left-width: 0; background: #569bbe url("/opencms/export/CJHModule/resources/images/search.png") no-repeat 50% 50%;text-indent:-999px;overflow:hidden;} #search-theme-form .form-submit:hover {background-color: #030303; cursor:pointer;} /* 5.3 Login Form ---------------------------------------------------------------------------- */ #login-form {} #login-form label {color: #000; padding-bottom: 4px; display: block;} #login-form input {border: 1px #569bbe solid; background-color: #fff; color: #000; padding: 10px; margin-bottom: 6px; width: 198px;} #login-form input:hover, #login-form input:focus {border: 1px #000 solid;} #login-form .form-submit {float: right; border: 0 none; background-color: #569bbe; color: #fff; padding: 10px; margin-top: 5px; width: auto;} #login-form .form-submit:hover, #login-form .form-submit:focus {background-color: #000;} #login-form p {font-size: .9em; padding: 0; margin-top: 5px;} #login-form a {color: #C6C7C8; text-decoration: none;} #login-form a:hover {color: #000;} /* ========================================================================= * 6. GENERAL ELEMENTS * ========================================================================= */ .breadcrumb {margin-bottom: 2em;} .pageContent p img {padding: 10px 15px;} .blacklist table { border: 1px solid white; border-collapse: collapse; } .blacklist th, .blacklist td { padding: 15px; text-align: left; border: 1px solid white; } .blacklist th { font-weight: bold; } .blacklist tbody tr:hover { background-color: #404040; } /* ========================================================================= * 7. PAGE SPECIFIC * ========================================================================= */ /* 7.1 HOME / LOGIN HOME ---------------------------------------------------------------------------- */ /* ----- Banner block ----- */ #banner {width: 625px; height:218px;overflow:hidden; margin-bottom: 30px;} #login #banner {width: 290px; height:218px;overflow:hidden; margin-bottom: 0; float: left;} /* ----- Recent News, Welcome, and Informative Notes blocks ----- */ .recentNews, .welcome {width: 290px; float: left;} .welcome {float: right;} /* Recent News, Welcome, and Informative Notes block titles */ .welcome h2, .recentNews h3, .infoNotes h3 {display:block; width:250px; line-height:20px; margin: 0 0 15px; text-transform: uppercase; font-family: 'PT Sans Narrow'; font-weight: bold; font-size: 1.4em;} .welcome h2, .recentNews h3 {border-left: 3px solid #c1c2c4; padding-left: 14px;} /* Recent News and Informative Notes posts */ .recentNews .newsitem, .infoNotes .newsitem {border-bottom: #2d6784 1px solid; padding-bottom: 19px; margin-bottom: 19px;} .recentNews .last, .infoNotes .last {border: 0 none; padding: 0; margin: 0;} .recentNews h4, .infoNotes h4 {margin: 0;} .recentNews p, .infoNotes p {padding-bottom: 5px;} .recentNews .readmore, .infoNotes .readmore {padding-bottom: 0; text-align: right;} .recentNews a, .infoNotes a {color: #fff; text-decoration: none;} .recentNews a:hover {color: #000;} .infoNotes a:hover {color: #569bbe;} .newsitem h5 a { white-space: normal; } /* ----- Recommendations block ----- */ .recommendations {background-color: #fff; color: #000; height: 200px; position: relative; padding: 0 18px 18px; margin-bottom: 30px;} .recommendations h3 {display:block; width:150px; margin: 14px 0 10px; text-transform: uppercase; font-family: 'PT Sans Narrow'; font-weight: bold; color: #569bbe; border-left: 6px solid #c7c7c8; padding-left: 8px; padding-top: 18px;} #recommends {width: 214px; height: 160px;} #recommends li {margin:0;list-style:none; width: 214px; height: 160px;} #recommends a.readmore {color:#569bbe; text-decoration: none; padding-bottom: 0; text-align: right; position: absolute; bottom: 0; right: 0;} #recommends a.readmore:hover {color: #000;} /* ----- Protection of the Player block ----- */ .protection {height: 74px; margin-bottom: 30px;} .protection h5 {margin: 0;} .protection h5 a {display:block; width:250px; height:74px; background:url("/opencms/export/CJHModule/resources/images/homeProtection.png") no-repeat 0 0; overflow:hidden; text-indent:-9999px;} .lang-en .protection h5 a {background-position: 0 0;} .lang-fr .protection h5 a {background-position: 0 -80px;} .lang-nl .protection h5 a {background-position: 0 -160px;} .webforms {height: 74px; margin-bottom: 30px;} .webforms h5 {margin: 0;} .webforms h5 a {display:block; width:250px; height:74px; background:url("/opencms/export/CJHModule/resources/images/homeWebforms.png") no-repeat 0 0; overflow:hidden; text-indent:-9999px;} .lang-en .webforms h5 a {background-position: 0 0;} .lang-fr .webforms h5 a {background-position: 0 -80px;} .lang-nl .webforms h5 a {background-position: 0 -160px;} .lang-de .webforms h5 a {background-position: 0 -240px;} /* ----- Login block ----- */ .loginBlock {background-color: #fff; color: #000; height: 188px; padding: 15px;} .login h3 {color: #569bbe; margin: 0 0 10px; font-size: 1.4em; text-transform: uppercase;} /* 7.2 CONTACT PAGE ---------------------------------------------------------------------------- */ .tableAddress {margin: 0; padding: 0; border: 0 none; width: auto;} .tableAddress td {padding: 0 45px 15px 0;} .tableForm {margin: 3px 0 0; padding: 0; border: 0 none; width: auto;} .tableForm td {text-align: left; vertical-align: top;} .tableForm td.col1 {width: 85px; padding-top: 8px;} .tableForm td.col2 {width: 310px;} .tableForm td.sendButton {text-align: right;} .tableForm .form-submit {margin-right: 20px; width: auto;} .tableForm td.gmap {width:280px;} .resultMessage {padding: 1px 0px 0px 10px; margin: 0px; color: white; font-weight: bold;} .validationError {padding: 1px 0px 0px 10px; margin: 0px; font-weight: bold;} /* 7.3 SEARCH PAGE ---------------------------------------------------------------------------- */ .search_result {margin-bottom: 10px;} /* GC PROTECT BANNER #contactLink {top:134px;} #mainNav {top:144px;} #header .contentWrapper {height: 183px; background-position: 240px 167px;} #home #header .contentWrapper {height: 183px; background-position: 670px 167px;} */ /* 7.4 EPIS PIE CHART PAGE ---------------------------------------------------------------------------- */ #epis-iframe {width:640px;height:530px; border: 0px; margin-top:20px}