| /* HTML5 ✰ Boilerplate | /* HTML5 ✰ Boilerplate |
| * ==|== normalize ========================================================== | * ==|== normalize ========================================================== |
| */ | */ |
| article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } | article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } |
| audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } | audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } |
| audio:not([controls]) { display: none; } | audio:not([controls]) { display: none; } |
| [hidden] { display: none; } | [hidden] { display: none; } |
| html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } | html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } |
| body { margin: 0; font-size: 13px; line-height: 1.231; } | body { margin: 0; font-size: 13px; line-height: 1.231; } |
| body, button, input, select, textarea { font-family: sans-serif; color: #222; } | body, button, input, select, textarea { font-family: sans-serif; color: #222; } |
| ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } | ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } |
| ::selection { background: #fe57a1; color: #fff; text-shadow: none; } | ::selection { background: #fe57a1; color: #fff; text-shadow: none; } |
| a { color: #00e; } | a { color: #00e; } |
| a:visited { color: #551a8b; } | a:visited { color: #551a8b; } |
| a:hover { color: #06e; } | a:hover { color: #06e; } |
| a:focus { outline: thin dotted; } | a:focus { outline: thin dotted; } |
| a:hover, a:active { outline: 0; } | a:hover, a:active { outline: 0; } |
| abbr[title] { border-bottom: 1px dotted; } | abbr[title] { border-bottom: 1px dotted; } |
| b, strong { font-weight: bold; } | b, strong { font-weight: bold; } |
| blockquote { margin: 1em 40px; } | blockquote { margin: 1em 40px; } |
| dfn { font-style: italic; } | dfn { font-style: italic; } |
| hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } | hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } |
| ins { background: #ff9; color: #000; text-decoration: none; } | ins { background: #ff9; color: #000; text-decoration: none; } |
| mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } | mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } |
| pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } | pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } |
| pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } | pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } |
| q { quotes: none; } | q { quotes: none; } |
| q:before, q:after { content: ""; content: none; } | q:before, q:after { content: ""; content: none; } |
| small { font-size: 85%; } | small { font-size: 85%; } |
| sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } |
| sup { top: -0.5em; } | sup { top: -0.5em; } |
| sub { bottom: -0.25em; } | sub { bottom: -0.25em; } |
| ul, ol { margin: 1em 0; padding: 0 0 0 40px; } | ul, ol { margin: 1em 0; padding: 0 0 0 40px; } |
| dd { margin: 0 0 0 40px; } | dd { margin: 0 0 0 40px; } |
| nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } | nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } |
| img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } | img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } |
| svg:not(:root) { overflow: hidden; } | svg:not(:root) { overflow: hidden; } |
| figure { margin: 0; } | figure { margin: 0; } |
| form { margin: 0; } | form { margin: 0; } |
| fieldset { border: 0; margin: 0; padding: 0; } | fieldset { border: 0; margin: 0; padding: 0; } |
| label { cursor: pointer; } | label { cursor: pointer; } |
| legend { border: 0; *margin-left: -7px; padding: 0; } | legend { border: 0; *margin-left: -7px; padding: 0; } |
| button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } | button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } |
| button, input { line-height: normal; *overflow: visible; } | button, input { line-height: normal; *overflow: visible; } |
| table button, table input { *overflow: auto; } | table button, table input { *overflow: auto; } |
| button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } | button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } |
| input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } | input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } |
| input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } | input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } |
| input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } | input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } |
| button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } | button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } |
| textarea { overflow: auto; vertical-align: top; resize: vertical; } | textarea { overflow: auto; vertical-align: top; resize: vertical; } |
| input:valid, textarea:valid { } | input:valid, textarea:valid { } |
| input:invalid, textarea:invalid { background-color: #f0dddd; } | input:invalid, textarea:invalid { background-color: #f0dddd; } |
| table { border-collapse: collapse; border-spacing: 0; } | table { border-collapse: collapse; border-spacing: 0; } |
| td { vertical-align: top; } | td { vertical-align: top; } |
| /* ==|== primary styles ===================================================== | /* ==|== primary styles ===================================================== |
| Author: | Author: |
| ========================================================================== */ | ========================================================================== */ |
| /* Header styles */ | |
| #header { | |
| clear:both; | |
| float:left; | |
| width:100%; | |
| } | |
| #header { | |
| border-bottom:1px solid #000; | |
| } | |
| #header p, | |
| #header h1, | |
| #header h2 { | |
| padding:.4em 15px 0 15px; | |
| margin:0; | |
| } | |
| #header ul { | |
| clear:left; | |
| float:left; | |
| width:100%; | |
| list-style:none; | |
| margin:10px 0 0 0; | |
| padding:0; | |
| } | |
| #header ul li { | |
| display:inline; | |
| list-style:none; | |
| margin:0; | |
| padding:0; | |
| } | |
| #header ul li a { | |
| display:block; | |
| float:left; | |
| margin:0 0 0 1px; | |
| padding:3px 10px; | |
| text-align:center; | |
| background:#eee; | |
| color:#000; | |
| text-decoration:none; | |
| position:relative; | |
| left:15px; | |
| line-height:1.3em; | |
| } | |
| #header ul li a:hover { | |
| background:#369; | |
| color:#fff; | |
| } | |
| #header ul li a.active, | |
| #header ul li a.active:hover { | |
| color:#fff; | |
| background:#000; | |
| font-weight:bold; | |
| } | |
| #header ul li a span { | |
| display:block; | |
| } | |
| /* 'widths' sub menu */ | |
| #layoutdims { | |
| clear:both; | |
| background:#eee; | |
| border-top:4px solid #000; | |
| margin:0; | |
| padding:6px 15px !important; | |
| text-align:right; | |
| } | |
| /* column container */ | /* column container */ |
| .colmask { | .colmask { |
| position:relative; /* This fixes the IE7 overflow hidden bug */ | position:relative; /* This fixes the IE7 overflow hidden bug */ |
| clear:both; | clear:both; |
| float:left; | float:left; |
| width:100%; /* width of whole page */ | width:100%; /* width of whole page */ |
| overflow:hidden; /* This chops off any overhanging divs */ | overflow:hidden; /* This chops off any overhanging divs */ |
| } | } |
| /* common column settings */ | /* common column settings */ |
| .colright, | |
| .colmid, | |
| .colleft { | .colleft { |
| float:left; | float:left; |
| width:100%; | width:100%; |
| position:relative; | position:relative; |
| } | } |
| .col1, | .col1, |
| .col2, | .col2 { |
| .col3 { | |
| float:left; | float:left; |
| position:relative; | position:relative; |
| padding:0 0 1em 0; | padding:0 0 1em 0; |
| overflow:hidden; | overflow:hidden; |
| } | } |
| .col2 { | .col2 { |
| text-align: center; | text-align: center; |
| height: 100%; | } |
| .col2 table { | |
| width: 100%; | |
| } | } |
| /* 2 Column (right menu) settings */ | /* 2 Column (right menu) settings */ |
| .rightmenu { | .rightmenu { |
| background:#eee; /* right column background colour */ | background:#eee; /* right column background colour */ |
| } | } |
| .rightmenu .colleft { | .rightmenu .colleft { |
| right:25%; /* right column width */ | right:25%; /* right column width */ |
| background:#fff; /* left column background colour */ | background:#fff; /* left column background colour */ |
| } | } |
| .rightmenu .col1 { | .rightmenu .col1 { |
| width:71%; /* left column content width (left column width minus left and right padding) */ | width:71%; /* left column content width (left column width minus left and right padding) */ |
| left:27%; /* (right column width) plus (left column left padding) */ | left:27%; /* (right column width) plus (left column left padding) */ |
| } | } |
| .rightmenu .col2 { | .rightmenu .col2 { |
| width:21%; /* right column content width (right column width minus left and right padding) */ | width:21%; /* right column content width (right column width minus left and right padding) */ |
| left:31%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */ | left:31%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */ |
| } | } |
| /* ==|== non-semantic helper classes ======================================== */ | /* ==|== non-semantic helper classes ======================================== */ |
| .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } | .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } |
| .ir br { display: none; } | .ir br { display: none; } |
| .hidden { display: none !important; visibility: hidden; } | .hidden { display: none !important; visibility: hidden; } |
| .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } | .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } |
| .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } | .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } |
| .invisible { visibility: hidden; } | .invisible { visibility: hidden; } |
| .clearfix:before, .clearfix:after { content: ""; display: table; } | .clearfix:before, .clearfix:after { content: ""; display: table; } |
| .clearfix:after { clear: both; } | .clearfix:after { clear: both; } |
| .clearfix { zoom: 1; } | .clearfix { zoom: 1; } |
| /* ==|== media queries ====================================================== */ | /* ==|== media queries ====================================================== */ |
| @media only screen and (min-width: 480px) { | @media only screen and (min-width: 480px) { |
| } | } |
| @media only screen and (min-width: 768px) { | @media only screen and (min-width: 768px) { |
| } | } |
| /* ==|== print styles ======================================================= */ | /* ==|== print styles ======================================================= */ |
| @media print { | @media print { |
| * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } | * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } |
| a, a:visited { text-decoration: underline; } | a, a:visited { text-decoration: underline; } |
| a[href]:after { content: " (" attr(href) ")"; } | a[href]:after { content: " (" attr(href) ")"; } |
| abbr[title]:after { content: " (" attr(title) ")"; } | abbr[title]:after { content: " (" attr(title) ")"; } |
| .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } | .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } |
| pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } | pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } |
| thead { display: table-header-group; } | thead { display: table-header-group; } |
| tr, img { page-break-inside: avoid; } | tr, img { page-break-inside: avoid; } |
| img { max-width: 100% !important; } | img { max-width: 100% !important; } |
| @page { margin: 0.5cm; } | @page { margin: 0.5cm; } |
| p, h2, h3 { orphans: 3; widows: 3; } | p, h2, h3 { orphans: 3; widows: 3; } |
| h2, h3 { page-break-after: avoid; } | h2, h3 { page-break-after: avoid; } |
| } | } |