/* ############################################################################### ## ## @file: ou_dashboard.css ## @site: Intranet ## @description: Defines main styling. Exceptions, such as reset, clearfix ## or browser specific styling are kept in separate files ## ############################################################################### [Table of contents] 0. FONTS 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 4. GENERAL ELEMENTS 4.1 header elements 4.2 slideshow 4.3 practical 4.4 main ############################################################################### */ /* ========================================================================= * 1. GLOBAL STYLING * ========================================================================= */ /* VIEWPORT: will replace the metatag in the future */ @viewport { zoom: 1.0; width: extend-to-zoom; } @-ms-viewport { zoom: 1.0; width: extend-to-zoom; } /* 1.1 general ---------------------------------------------------------------------------- */ body { background: #fff; font: 100% "PT Serif", "Times New Roman", serif; line-height: 1.5em; color: #322565; } /* 1.2 headings ---------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif; color: #322565; font-weight: normal; } h1 a, h2 a, h3 a, h4 a { color: #322565; text-decoration: none; } h1 { font-size: 1.8em; margin: 0 0 1em 0; } h2 { font-size: 1.6em; margin: 0 0 0.7em 0; line-height: 1.1em; } h3 { font-size: 1.1em; margin: 0 0 0.5em 0; } h4 { font-size: 1.1em; margin: 0.5em 0 0.3em 0; } /* 1.3 links & buttons ---------------------------------------------------------------------------- */ a { color: #322565; text-decoration: none; } a:hover { text-decoration: underline; color: #40299f; } /* 1.4 text styles ---------------------------------------------------------------------------- */ p { margin: 0; padding-bottom: 25px; } b, strong { font-weight: bold; } em { font-style: italic; } /* 1.5 lists ---------------------------------------------------------------------------- */ #body ul li { list-style: disc; margin: 0 0 0 14px; } #body ul.links li { clear: both; list-style: none; padding: 5px 0; margin: 0; text-transform: uppercase; font-size: 0.9em; } #body ul.links li span { float: left; clear: left; display: block; width: 100px; } #body ul.links li a { text-decoration: none; } #body ul.links li a:hover { text-decoration: underline; } #body ol li { margin-left: 30px; list-style: decimal; list-style-position: outside; } /* 1.6 tables ---------------------------------------------------------------------------- */ /* 1.7 extra ---------------------------------------------------------------------------- */ /* ========================================================================= * 2. MODIFIERS * ========================================================================= */ .noul { text-decoration: none !important; } a.noul:hover { text-decoration: underline !important; } .nmb { margin-bottom: 0 !important; } .nml { margin-left: 0 !important; } .nmr { margin-right: 0 !important; } .nmt { margin-top: 0 !important; } .npb { padding-bottom: 0 !important; } .npr { padding-right: 0 !important; } .tal { text-align: left !important; } .tac { text-align: center !important; } .tar { text-align: right !important; } .ul { text-decoration: underline !important; } .lcase { text-transform: none !important; } .flr { float: right !important; } .fll { float: left !important; } /* ========================================================================= * 3. PAGE STRUCTURE * ========================================================================= */ #wrapper { width: 960px; margin: 0 auto; } header { position: relative; margin-bottom: 30px; } footer { margin-top: 60px; padding-bottom: 100px; } /* ========================================================================= * 4. GENERAL ELEMENTS * ========================================================================= */ /* 4.1 header elements ---------------------------------------------------------------------------- */ header .logo a { display: block; width: 517px; height: 178px; margin: 44px 0 40px 0; background: url(../img/header.png) no-repeat 0 0; text-indent: -999px; } header .title { display: none; } header .lnkInfo { position: absolute; bottom: 0; right: 0; display: block; padding: 8px 20px; background: #3f2a1d; color: #fff; text-transform: uppercase; text-decoration: none; font-size: 1.2em; } header a:hover.lnkInfo { background-color: #694b39; } /* 4.2 slideshow ---------------------------------------------------------------------------- */ .slideshow { padding-bottom: 40px; } .slideshow ul, .slideshow li { list-style: none; margin: 0; padding: 0; } .slideshow img { display: block; } .slideshow article { padding-top: 40px; } .readmore-js-toggle { display: inline-block !important; width: auto !important; padding: 8px 20px; background: #3f2a1d; color: #fff; text-transform: uppercase; text-decoration: none; font-size: 1.2em; } a:hover.readmore-js-toggle { background-color: #694b39; color: #fff; text-decoration: none; } /* 4.3 practical ---------------------------------------------------------------------------- */ .practical { margin-bottom: 60px; } .practical article { float: left; width: 551px; padding: 17px; background: #3f2a1d; color: #fff; } .practical article a { color: #fff; text-decoration: underline; } .practical article a:hover { text-decoration: none; } .practical nav { float: right; } .practical nav ul { margin: 0; } .practical nav a { display: block; width: 335px; height: 72px; margin-bottom: 18px; background: #3f2a1d; color: #fff; line-height: 72px; text-align: center; text-transform: uppercase; font-size: 1.2em; } .practical nav a { height: 88px; line-height: 88px; } .practical nav a:hover { background-color: #694b39; text-decoration: none; } .practical nav .last a { margin-bottom: 0; } /* 4.4 main ---------------------------------------------------------------------------- */ .main { width: 100%; } .main .colleft { float: left; width: 585px; } .main aside { float: right; width: 335px; } .youtube { margin-bottom: 55px; } .youtube iframe { margin-bottom: 30px; } .photobook img { float: left; padding-right: 37px; } .photobook .content { float: left; width: 220px; } .photobook .content p { padding-bottom: 15px; } /* 4.5 social ---------------------------------------------------------------------------- */ .fb-comments { margin-top: 30px; } /* 4.6 footer ---------------------------------------------------------------------------- */ footer .logo { display: inline-block; margin-right: 30px; text-indent: -999px; } #lnkVP { width: 105px; height: 44px; background: url(../img/logo_vp.png) no-repeat 0 0; } #lnkRVGC { width: 129px; height: 36px; background: url(../img/logo_rvgc.png) no-repeat 0 0; } #lnkVVI { width: 161px; height: 33px; background: url(../img/logo_vvi.png) no-repeat 0 0; } /* 4.7 language navigation ---------------------------------------------------------------------------- */ #langNav { position: absolute; top: 0; right: 0; }