_css
/* 
* kTsang Metro-Theme 2013
* Copyright (c) Kenneth Tsang 2012 - 2013
* Design by Kenneth Tsang based on the Metro Design Concept
*
* Metro Colour Schemes
* Purple: A200FF
* Magenta: FF0097
* Teal: 00ABA9
*/
/* Colours used:
* Purple (Dark): #682A7B;
* Purple (Light): #9B4F96;
* */
 
@import url(//fonts.googleapis.com/css?family=PT+Serif+Caption|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
 
/******************** START CSS RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}
body {    line-height: 1;}
blockquote, q {    quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {    content: '';content: none;}
table {    border-collapse: collapse;border-spacing: 0;}
 
/* Lets restore strong, bold, i, em, etc... */
strong, b{ font-weight: bold; }
i, em{ font-style: italic; }
 
/******************** END CSS RESET */
 
/******************** METRO UI CSS */
/* =============================================================================
   Typography
   ========================================================================== */
/*
 * Addresses font sizes and margins set differently in IE6/7
 * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}
h3 {
  font-size: 1.17em;
  margin: 1em 0;
}
h4 {
  font-size: 1em;
  margin: 1.33em 0;
}
h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}
h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}
/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/
b,
strong {
  font-weight: bold;
}
blockquote {
  margin: 1em 40px;
}
/*
 * Addresses styling not present in S5, Chrome
 */
dfn {
  font-style: italic;
}
/*
 * Addresses styling not present in IE6/7/8/9
 */
mark {
  background: #ff0;
  color: #000;
}
/*
 * Addresses margins set differently in IE6/7
 */
p,
pre {
  margin: 0.8em 0;
}
/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
pre,
code,
kbd,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}
/*
 * Improves readability of pre-formatted text in all browsers
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */
/* 1 */
q {
  quotes: none;
}
/* 2 */
q:before,
q:after {
  content: '';
  content: none;
}
small {
  font-size: 75%;
}
/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* =============================================================================
   Lists
   ========================================================================== */
/*
 * Addresses margins set differently in IE6/7
 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}
dd {
  margin: 0 0 0 40px;
  font-size: 90%;
}
 
/*
 * Addresses paddings set differently in IE6/7
 */
menu,
ol,
ul {
  padding: 0 0 0 40px;
}
/*
 * Corrects list images handled incorrectly in IE7
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}
/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  border: 0;
  /* 1 */
 
  -ms-interpolation-mode: bicubic;
  /* 2 */
 
}
/*
 * Corrects overflow displayed oddly in IE9
 */
svg:not(:root) {
  overflow: hidden;
}
/* =============================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */
figure {
  margin: 0;
}
/* =============================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE6/7
 */
form {
  margin: 0;
}
/*
 * Define consistent border, margin, and padding
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects text not wrapping in FF3
 * 3. Corrects alignment displayed oddly in IE6/7
 */
legend {
  border: 0;
  /* 1 */
 
  padding: 0;
  white-space: normal;
  /* 2 */
 
  *margin-left: -7px;
  /* 3 */
 
}
/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */
button,
input,
select,
textarea {
  font-size: 100%;
  /* 1 */
 
  margin: 0;
  /* 2 */
 
  vertical-align: baseline;
  /* 3 */
 
  *vertical-align: middle;
  /* 3 */
 
}
/*
 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 */
button,
input {
  line-height: normal;
  /* 1 */
 
}
/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Removes inner spacing in IE7 without affecting normal text inputs
 *    Known issue: inner spacing remains in IE6
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  /* 1 */
 
  -webkit-appearance: button;
  /* 2 */
 
  *overflow: visible;
  /* 3 */
 
}
/*
 * Re-set default cursor for disabled elements
 */
button[disabled],
input[disabled] {
  cursor: default;
}
/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 * 3. Removes excess padding in IE7
      Known issue: excess padding remains in IE6
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
 
  padding: 0;
  /* 2 */
 
  *height: 13px;
  /* 3 */
 
  *width: 13px;
  /* 3 */
 
}
/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
 
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
 
  box-sizing: content-box;
}
/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */
textarea {
  overflow: auto;
  /* 1 */
 
  vertical-align: top;
  /* 2 */
 
}
/* =============================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*
 * Metro UI CSS
 * Copyright 2012 Sergey Pimenov
 * Licensed under the MIT Lilcense
 *
 * Variables.less
 */
.fg-color-blue {
  color: #2d89ef !important;
}
.fg-color-blueLight {
  color: #eff4ff !important;
}
.fg-color-blueDark {
  color: #2b5797 !important;
}
.fg-color-green {
  color: #00a300 !important;
}
.fg-color-greenLight {
  color: #99b433 !important;
}
.fg-color-greenDark {
  color: #1e7145 !important;
}
.fg-color-red {
  color: #b91d47 !important;
}
.fg-color-yellow {
  color: #ffc40d !important;
}
.fg-color-orange {
  color: #e3a21a !important;
}
.fg-color-orangeDark {
  color: #da532c !important;
}
.fg-color-pink {
  color: #9f00a7 !important;
}
.fg-color-pinkDark {
  color: #7e3878 !important;
}
.fg-color-purple {
  color: #603cba !important;
}
.fg-color-darken {
  color: #1d1d1d !important;
}
.fg-color-lighten {
  color: #d5e7ec !important;
}
.fg-color-white {
  color: #ffffff !important;
}
.fg-color-grayDark {
  color: #525252 !important;
}
.bg-color-blue {
  background-color: #2d89ef !important;
}
.bg-color-blueLight {
  background-color: #eff4ff !important;
}
.bg-color-blueDark {
  background-color: #2b5797 !important;
}
.bg-color-green {
  background-color: #00a300 !important;
}
.bg-color-greenLight {
  background-color: #99b433 !important;
}
.bg-color-greenDark {
  background-color: #1e7145 !important;
}
.bg-color-red {
  background-color: #b91d47 !important;
}
.bg-color-yellow {
  background-color: #ffc40d !important;
}
.bg-color-orange {
  background-color: #e3a21a !important;
}
.bg-color-orangeDark {
  background-color: #da532c !important;
}
.bg-color-pink {
  background-color: #9f00a7 !important;
}
.bg-color-pinkDark {
  background-color: #7e3878 !important;
}
.bg-color-purple {
  background-color: #603cba !important;
}
.bg-color-darken {
  background-color: #1d1d1d !important;
}
.bg-color-lighten {
  background-color: #d5e7ec !important;
}
.bg-color-white {
  background-color: #ffffff !important;
}
.bg-color-grayDark {
  background-color: #525252 !important;
}
[class*=border-color] {
  border: 2px solid;
}
.border-color-blue {
  border-color: #2d89ef !important;
}
.border-color-blueLight {
  border-color: #eff4ff !important;
}
.border-color-blueDark {
  border-color: #2b5797 !important;
}
.border-color-green {
  border-color: #00a300 !important;
}
.border-color-greenLight {
  border-color: #99b433 !important;
}
.border-color-greenDark {
  border-color: #1e7145 !important;
}
.border-color-red {
  border-color: #b91d47 !important;
}
.border-color-yellow {
  border-color: #ffc40d !important;
}
.border-color-orange {
  border-color: #e3a21a !important;
}
.border-color-orangeDark {
  border-color: #da532c !important;
}
.border-color-pink {
  border-color: #9f00a7 !important;
}
.border-color-pinkDark {
  border-color: #7e3878 !important;
}
.border-color-purple {
  border-color: #603cba !important;
}
.border-color-darken {
  border-color: #1d1d1d !important;
}
.border-color-lighten {
  border-color: #d5e7ec !important;
}
.border-color-white {
  border-color: #ffffff !important;
}
.border-color-grayDark {
  border-color: #525252 !important;
}
*:hover[class=outline-color] {
  outline: 3px solid;
}
.outline-color-blue {
  outline-color: #2d89ef !important;
}
.outline-color-blueLight {
  outline-color: #eff4ff !important;
}
.outline-color-blueDark {
  outline-color: #2b5797 !important;
}
.outline-color-green {
  outline-color: #00a300 !important;
}
.outline-color-greenLight {
  outline-color: #99b433 !important;
}
.outline-color-greenDark {
  outline-color: #1e7145 !important;
}
.outline-color-red {
  outline-color: #b91d47 !important;
}
.outline-color-yellow {
  outline-color: #ffc40d !important;
}
.outline-color-orange {
  outline-color: #e3a21a !important;
}
.outline-color-orangeDark {
  outline-color: #da532c !important;
}
.outline-color-pink {
  outline-color: #9f00a7 !important;
}
.outline-color-pinkDark {
  outline-color: #7e3878 !important;
}
.outline-color-purple {
  outline-color: #603cba !important;
}
.outline-color-darken {
  outline-color: #1d1d1d !important;
}
.outline-color-lighten {
  outline-color: #d5e7ec !important;
}
.outline-color-white {
  outline-color: #ffffff !important;
}
.outline-color-grayDark {
  outline-color: #525252 !important;
}
 
a:hover,
.link:hover {
  color: rgba(45, 173, 237, 0.8);
}
a:active,
.link:active {
  color: rgba(45, 173, 237, 0.6);
}
 
body,
p,
ul,
dl {
  font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  /*font-weight: 300;
  font-size: 11pt;
  letter-spacing: 0.02em;
  line-height: 20px;*/
}
 
/******************** GENERAL CSS */
h1,h2,h3,h4,h5,body{ font-family: "Segoe UI", 'Open Sans', sans-serif; }
a:hover{ background-color: transparent; background: none; }
#container-wrap{margin: 0 auto;width: 960px;margin-bottom: 90px;} /* Fixed width, 960px */
#page-title{ display: none;}
 
.wiki-content-table th{ color: black; }
 
/******************** HEADER CSS */
#header{
    padding-top: 10px;
    height: 32px;
}
#header a{ 
    color: inherit;
    text-decoration: none;
}
#header h1{
    font-size: 26px;
    font-weight: 600;
    float: left;
    padding-right: 20px;
    margin: 0;
}
#header h1 a{ color: #682A7B; }
#header h2{ display: none; }
 
/******************** TOP BAR CSS */
#top-bar{
    position: static;
    margin-top: 0;
    font: 18px/30px 'Segoe UI', 'Open Sans',Helvetica,Arial,sans-serif;
}
#top-bar li a {
    text-align: left;
    text-decoration: none;
    -webkit-transition: border 200ms ease-out;
    border-left: 10px solid #116892;
    padding: 0 10px;
}
#top-bar li a:hover{border-left: 20px solid #116892;}
#top-bar li { margin: 0; }
 
/******************** SEARCH TOP BOX CSS */
#search-top-box{ display: none; }
 
/******************** LOGIN STATUS CSS */
#login-status{ top: 16px; }
#login-status a{ text-decoration: none; }
#login-status a#account-topbutton{ display: none; }
#login-status #account-options {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 140px;
    border: none;
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
#login-status #account-options a{
    -webkit-transition: border 200ms ease-out;
    border-left: 1px solid #116892;
    padding: 4px;
}
#login-status #account-options a:hover{border-left: 10px solid #116892;}
 
/* Hover login-status account options */
#login-status:hover #account-options{
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}
 
/******************** page-options-bottom */
.page-options-bottom{
    position: fixed;
    bottom: 0;
    left: 0px;
    height: 60px;
    margin: 0;
    padding: 0;
    width: 100%;
    background: #222;
    line-height: 60px;
}
.page-options-bottom a{ color: white; text-decoration: none; }
#page-options-bottom-2{
    bottom: 60px;
    height: 30px;
    line-height: 30px;
    background: #444;
}
 
/******************** FOOTER and PAGE_OPTIONS_CONTAINER CSS */
#footer,#page-options-container{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    background: #682A7B;
    color: white;
    padding: 2%;
    margin: 1%;
    font: 16px 'Segoe UI', 'Open Sans', Helvetica,Arial,'Sans-Serif';
}
#footer a,#page-options-container a{ color: inherit; }
 
#page-options-container{ background: #222; font-size: 80%;}
 
/******************** SIDE BAR CSS */
#side-bar{ display: none; } #main-content{ margin: 0; padding: 0; }
 
/* Metro Elements */
.metro-block{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    background: #9B4F96;
    color: white;
    font: 18px/25px 'Segoe UI', 'Open Sans', Helvetica,Arial, sans-serif;
    padding: 2%;
    margin: 1%;
}
.metro-block.half{ width: 44%; }
.metro-block.third{ width: 27%; }
.metro-block.two-third{ width: 61%; }
.metro-block.left{ float: left; }
.metro-block.right{ float: right; }
/* From http://stackoverflow.com/questions/11578867/is-there-a-list-of-standard-tile-colors-for-metro-style-windows-8-apps */
.metro-block.purple{ background: #a200ff;}
.metro-block.lightpurple{ background: #fdf;}
.metro-block.magenta{ background: #ff0097; }
.metro-block.teal{ background: #00aba9; }
.metro-block.lime{ background: #8CBF26;}
.metro-block.brown{ background: #A05000; }
.metro-block.pink{ background: #E671B8; }
.metro-block.orange{ background: #F09609; color: #000; }
.metro-block.blue{ background: #1BA1E2;}
.metro-block.red{ background: #E51400;}
.metro-block.green{ background: #339933; }
/* Existing colours */
.metro-block.dark-purple{ background: #682A7B; }
.metro-block.greenv2{ background: #008900; }
.metro-block.bluev2{ background: #116892; }
.metro-block.yellow{ background: #FBB100; color: #000; }
 
.metro-block.mini-210{ height: 210px; overflow: hidden; }
 
.metro-block h1{font: 36px/42px 'Segoe UI Light', 'Open Sans', Helvetica,Arial,sans-serif; font-weight: 300; margin: 0; margin-bottom: 10px;-webkit-transition: margin-left 200ms ease-out;}
.metro-block:hover > h1{ margin-left: 20px;}
 
.metro-block a{ color: inherit; }
.metro-block.nounderline a, .metro-block.no-underline a{ text-decoration: none; }
 
.metro-block #toc{
margin: 0;
padding: 0;
border: none;
background: none;
display: table;
font-size: 80%;
line-height: 20px;
}
.metro-block #toc #toc-action-bar a{
display: none;
}
 
/*************** SIMPLE TABLES */
/* CSS 3 Solution */
.metro-block table.wiki-content-table th{ background: rgba(255, 255, 255, 0.6);}
 
/*************** TRANSITIONS */
 
.metro-block .fade{
opacity: 0.6;
-webkit-transition: opacity 300ms ease-out;
}
.metro-block:hover .fade{
opacity: 1;
}
.metro-block.drop-left{
-webkit-animation: fade 500ms ease, drop-left 500ms ease-in !important;
position: relative;
}
.metro-block.drop-right{
-webkit-animation: fade 500ms ease, drop-right 500ms ease-in !important;
position: relative;
}
@-webkit-keyframes fade {
0% {opacity:0;}
/*50% {opacity:1;}*/
100% {opacity: 1;}
}
@-webkit-keyframes drop-left {
0% {-webkit-transform:translate(-100px,0);}
100%{-webkit-transform: translate(0,0);}
}
@-webkit-keyframes drop-right {
0% {-webkit-transform:translate(100px,0);}
100%{-webkit-transform: translate(0,0);}
}
 
@-moz-keyframes fade {
0% {opacity:0;}
/*50% {opacity:1;}*/
100% {opacity: 1;}
}
@-moz-keyframes drop-left {
0% {-moz-transform:translate(-100px,0);}
100%{-moz-transform: translate(0,0);}
}
@-moz-keyframes drop-right {
0% {-moz-transform:translate(100px,0);}
100%{-moz-transform: translate(0,0);}
}
 
/*** YOUTUBE-TO-DIV */
.youtube-to-div table,.youtube-to-div tr, .youtube-to-div td, .youtube-to-div div, .youtube-to-div span{ display: block !important; width: auto !important; height: auto !important; font: inherit !important; color: inherit !important; border: none !important; margin: 0 !important; padding: 0 !important;text-align: center; }
.youtube-to-div a img{ width: 60%; }
.youtube-to-div div div table tbody tr td,
.youtube-to-div div div table tbody tr:last-child {
    display: none !important;
}
.youtube-to-div tr td:first-child{
    display: block !important;
}
 
/******************** Nice Loading Experience */
.wikidot-hybrid-module-loading{
    background-color: #222;    
    filter: alpha(opacity=0);
    color: #fff;
    border: none;
    padding: 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.3);
    display: block;
    width: 100%;
    min-width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.75) url(http://bmcenterprises.wdfiles.com/local--files/images/ajax-loader-white6.gif) no-repeat center center;
}
 
/******************** MOBILE CSS */
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), all and (max-width:900px) {
    #container-wrap{margin: auto;width: auto;}/* Remove fixed width */
    .metro-block.half,
    .metro-block.third,
    .metro-block.two-third{ width: auto !important; height: auto !important; max-height: auto !important; min-height: auto !important; overflow: hidden !important; }
    .metro-block{ overflow: hidden !important; }
    .metro-block img, .metro-block iframe, .metro-block object{ max-width: 100%; }
    .metro-block.left,
    .metro-block.right{ float: none; }
    .metro-block.mini-210{ height: auto; overflow: auto; } /* Remove overflow hidden blocjs */
 
    #top-bar{ position: absolute; left: 10px; top: 50px; }
    #header{ padding-left: 10px; }
    #content-wrap{ margin-top: 50px; }
    .mobile-float-none{ float: none !important; }
    .mobile-left-align{ text-align: left !important; }
    .mobile-right-align{ text-align: right !important; }
    .mobile-display-none{ display: none !important; }
}