screen.css

@font-face{
    font-family: 'Gudea';
    font-weight: normal;
    src: url('skins/webplatform/fonts/gudea-regular-webfont.eot');
    src: url('skins/webplatform/fonts/gudea-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('skins/webplatform/fonts/gudea-regular-webfont.woff') format('woff'),
         url('skins/webplatform/fonts/gudea-regular-webfont.ttf') format('truetype'),
         url('skins/webplatform/fonts/gudea-regular-webfont.svg#GudeaRegular') format('svg');
}

@font-face{
    font-family: 'Gudea';
    font-weight: bold;
    src: url('skins/webplatform/fonts/gudea-bold-webfont.eot');
    src: url('skins/webplatform/fonts/gudea-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('skins/webplatform/fonts/gudea-bold-webfont.woff') format('woff'),
         url('skins/webplatform/fonts/gudea-bold-webfont.ttf') format('truetype'),
         url('skins/webplatform/fonts/gudea-bold-webfont.svg#GudeaRegular') format('svg');
}

@font-face{
    font-family: 'Gudea';
    font-weight: normal;
    font-style: italic;
    src: url('skins/webplatform/fonts/gudea-italic-webfont.eot');
    src: url('skins/webplatform/fonts/gudea-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('skins/webplatform/fonts/gudea-italic-webfont.woff') format('woff'),
         url('skins/webplatform/fonts/gudea-italic-webfont.ttf') format('truetype'),
         url('skins/webplatform/fonts/gudea-italic-webfont.svg#GudeaRegular') format('svg');
}

@font-face{
    font-family: 'Bitter';
    font-weight: normal;
    src: url('skins/webplatform/fonts/bitter-regular-webfont.eot');
    src: url('skins/webplatform/fonts/bitter-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('skins/webplatform/fonts/bitter-regular-webfont.woff') format('woff'),
         url('skins/webplatform/fonts/bitter-regular-webfont.ttf') format('truetype'),
         url('skins/webplatform/fonts/bitter-regular-webfont.svg#BitterRegular') format('svg');
}

@font-face{
    font-family: 'Bitter';
    font-weight: bold;
    src: url('skins/webplatform/fonts/bitter-bold-webfont.eot');
    src: url('skins/webplatform/fonts/bitter-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('skins/webplatform/fonts/bitter-bold-webfont.woff') format('woff'),
         url('skins/webplatform/fonts/bitter-bold-webfont.ttf') format('truetype'),
         url('skins/webplatform/fonts/bitter-bold-webfont.svg#BitterBold') format('svg');
}

@font-face{
    font-family: 'Bitter';
    font-weight: normal;
    font-style: italic;
    src: url('skins/webplatform/fonts/bitter-italic-webfont.eot');
    src: url('skins/webplatform/fonts/bitter-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('skins/webplatform/fonts/bitter-italic-webfont.woff') format('woff'),
         url('skins/webplatform/fonts/bitter-italic-webfont.ttf') format('truetype'),
         url('skins/webplatform/fonts/bitter-italic-webfont.svg#BitterBold') format('svg');
}

@font-face {
	font-family: 'WPSymbols';
	src:url('skins/webplatform/fonts/WPSymbols.eot');
	src:url('skins/webplatform/fonts/WPSymbols.eot?#iefix') format('embedded-opentype'),
		url('skins/webplatform/fonts/WPSymbols.svg#WPSymbols') format('svg'),
		url('skins/webplatform/fonts/WPSymbols.woff') format('woff'),
		url('skins/webplatform/fonts/WPSymbols.ttf') format('truetype');
}

header, footer{
    display: block;
}

html{
	background-color: #efeadd;
}

body{
    color: #58595b;
    font-family: Gudea, Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    background: #ece5d7;
    background-image: url(skins/webplatform/images/bg-pattern.png);
}

h1, h2, h3, h4, h5{
    color: #58595b;
    font-weight: bold;
    margin: 0;
    margin-bottom: 14px;
    font-family: Bitter, Georgia, serif;
}

h1, #firstHeading{
    line-height: 40px;
}

#firstHeading{
    border-bottom: 2px solid #ffc621;
}

h2{
    font-weight: normal;
    font-size: 20px;
    border-bottom: 1px solid #e2e3e4;
}

h2 .editsection{
    font-size: 14px;
}

h3{
    color: #6d685b;
    font-weight: normal;
    font-size: 16px;
    border-bottom: 1px solid #eae3d3;
}

h2, h3, h4{
    padding-top: 14px;
}

h5{
    display: none;
}

#mw-content-text h5 {
    display: inline;
}

span.subpages {
    display: none;
}

.editors-only {
    /*display: inline;*/
}


strong{
    font-style: normal;
    font-weight: bold;
}

dt{
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 7px;
    color: black;
}

dd{
    padding-bottom: 15px;
}

blockquote {
	padding: 1em;
	border-left: .5em solid #F99D1C;
	border-left-color: hsla(35, 94%, 54%,.4);
	margin: 1em 0 1em 3em;
	background: hsla(35, 94%, 54%,.16);
	color: black;
	color: hsl(35, 94%, 30%);
	font-style: italic;
}

	blockquote > p:first-child {
		margin-top: 0;
	}
	
	blockquote.testimonial {
		margin-right: 310px;
	}
	
		blockquote.testimonial address {
			text-align: right;
			font-style: normal;
		}
		
		blockquote.testimonial address:before {
			content: '—';
		}

	blockquote::before {
		content: '❝';
		float: left;
		margin: -.3em 0 0 -1.2em;
		color: #F99D1C;
		color: hsla(35, 94%, 54%,.6);
		font-size: 400%;
		line-height: 1;
		font-family: 'Zapf Dingbats', serif;
		font-style: normal;
	}

table, table.wikitable{
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
    color: #58595B;
}

th, table.wikitable > tr > th, table.wikitable > * > tr > th{
    padding: 10px 15px;
    font-family: Bitter;
    text-align: left;
    color: #6d685b;
    border: 1px solid #cdced0;
    background: #e2e3e4;
}

td, table.wikitable > tr > td, table.wikitable > * > tr > td {
    border: 1px solid #cdced0;
    padding: 5px 15px;
}

tr{
    background: #f4f5f7;
}

tr:nth-child(even){
    background: white;
}

pre{
    padding: 10px !important;
    background-color: white !important;
    border: 1px dotted #9b9689 !important;
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    overflow-x: auto;
}

p{
    line-height: 24px;
}

code{
    font-weight: bold;
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
}

fieldset{
    border: none;
    padding: 0;
}

fieldset > legend{
    width: 100%;
    margin: 0;
    margin-bottom: 12px;
    padding-top: 14px;
    border-bottom: 1px solid #e2e3e4;
    color: #58595b;
    font-weight: bold;
    font-family: Bitter, Georgia, serif;
    font-weight: normal;
    font-size: 20px;
}

fieldset fieldset > legend{
    width: 100%;
    margin: 0;
    margin-bottom: 8px;
    padding-top: 20px;
    border-bottom: 1px solid #e2e3e4;
    color: #58595b;
    font-weight: bold;
    font-family: Bitter, Georgia, serif;
    font-weight: normal;
    font-size: 14px;
}


/* Links */
a{
    color: #256a84;
    text-decoration: none;
    -webkit-transition: color .2s;
}

a:hover{
    color: #2dafbc;
}

a.external{
    padding-right: 15px;
    margin-right: 5px;
    background-image: url(skins/webplatform/images/link-external.png);
    background-repeat: no-repeat;
    background-position: right 3px;
}

a.external:hover{
    background-position: right -17px;
}

a.new{
    color: #BA0000;
}

a.new:hover{
    color: #BA0000;
    font-weight: bold;
}

a img {
    border: none;
}


/* Images */
#bodyContent img {
    height: auto;
    max-width: 100%;
}

.articleFeedback-title{
    font-family: Bitter, Georgia, serif;
}

.articleFeedback-rating{
    width: 120px !important;
}

.articleFeedback-submit{
    margin: 0 !important;
}

.printfooter{
    padding-top: 20px;
}

.profile-info textarea{
    width: 400px;
}

.editors-only{
    padding: 0px 10px;
    margin: 10px 0px;
    color: #548faf;
    font-family: Bitter;
    font-weight: normal;
    font-style: italic;
    border: 2px solid #5974c6;
    background: #e2e7f5;

}

.note,
.warning {
	padding: .8em 1em;
	margin: 0 0 1em 0;
	border: 2px solid;
	text-shadow: 0 1px 1px white;
	font: italic 100%/1.5 Bitter, Georgia, serif;
}

.note {
    border-color: #ffc621;
    background: #fff5d9;
    color: #de6525;
}

.warning {
    border-color: #d02e27;
    background: white;
    color: #d02e27;
}

.container{
    position: relative;
    width: 950px;
    margin: auto;
}

@media screen and (max-width: 950px) {
	.container{
	    padding: 0 10px;
	    width: auto;
	}
}

.right{
    float: right;
}

.left{
    float: left;
}

.clear{
    clear: both;
}

.cleared{
    clear: left !important;
}

.profile-info{
    background: transparent !important;
}

#editform, #toolbar, #wpTextbox1{
    clear: none;
}

.visualClear{
    clear: left;
}

#p-search{
    display: inline-block;
    position: relative;
}

#searchInput{
    padding: 3px 20px 3px 5px;
    background: white;
    background-image: none;
    border-radius: 5px;
    border: 1px solid #313233;
    box-shadow: 1px 1px 1px #5b5b5d;
    color: black;
    font-size: 14px;
    font-family: Gudea, Arial, sans-serif;
    line-height: 11px;
    -webkit-appearance: none;
    width: 11em;
}

#search > input[type="submit"]{
    position: absolute;
    top: 7px;
    right: 7px;
    width: 14px;
    height: 14px;
    border: none;
    cursor: pointer;
    font-family: Gudea, Arial, sans-serif;
    background: none;
    background-image: url(skins/webplatform/images/btn-search.svg);
    background-repeat: no-repeat;
    /* background: none; */
}

input:focus
{
  outline: none;
}

#mw-head{
    padding: 3px 0;
    font-size: 14px;
    text-align: right;
    height: 30px;
    color: white;
    background: #4e4e50;
    background-image: linear-gradient(bottom, rgb(69,69,71) 40%, rgb(78,79,80) 70%);
    background-image: -o-linear-gradient(bottom, rgb(69,69,71) 40%, rgb(78,79,80) 70%);
    background-image: -moz-linear-gradient(bottom, rgb(69,69,71) 40%, rgb(78,79,80) 70%);
    background-image: -webkit-linear-gradient(bottom, rgb(69,69,71) 40%, rgb(78,79,80) 70%);
    background-image: -ms-linear-gradient(bottom, rgb(69,69,71) 40%, rgb(78,79,80) 70%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.4, rgb(69,69,71)),
        color-stop(0.7, rgb(78,79,80))
    );

    border-bottom: 2px solid #606062;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .75);
}

#mw-head .container{
    padding-right: 18px;
    max-width: 932px;
}

#mw-head a{
    color: white;
    text-decoration: none;
}

#p-personal{
    position: absolute;
    right: 15em;
    display: inline-block;
    z-index: 200;
}

li#pt-userpage a:after {
    content: "\25BE";
    padding-left: 0.5em;
}

#p-personal .links{
    padding: 7px 10px 10px;
    border-radius: 10px;
}

#p-personal .links:hover{
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25);
    background: #4d4e4f;
}

#p-personal .links a{
    display: block;
}

#p-personal .links a:hover{
    color: #ccc;
}

#p-personal .links:hover li{
    border-bottom: 1px solid #757575;
}

#p-personal li{
    padding-right: 20px;
    padding-bottom: 10px;
}

#p-personal .links:hover li:last-child{
    border-bottom: none;
    padding-bottom: 0;
}

#p-personal .user-dropdown {
    display: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

#p-personal .user-dropdown li {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

.user{
    padding-left: 15px;
    background-image: url(skins/webplatform/images/icon-head.svg);
    background-repeat: no-repeat;
    background-position: left center;
}

#p-logo{
    position: absolute;
    top: -5px;
}

#p-logo a{
    display: block;
    width: 100px;
    height: 100px;
    background-color: #f9f7f3;
    border-radius: 0px 0px 7px 7px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    background-image: url(skins/webplatform/images/logo.svg);
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 1px 1px 1px #cbc6ba;
}

#sitenav{
    background-color: #ece5d7;
    background-image: url(skins/webplatform/images/nav-bg.png);
    background-position: bottom;
    background-repeat: repeat-x;
    padding: 30px 0px 35px;
}

ul li {
    margin-bottom: 10px;
    list-style-image: url(skins/webplatform/images/bullet.svg);
}

ul.links{
    margin: 0;
    padding: 0;
    list-style: none;
}

#sitenav .links{
    padding-left: 150px;
}

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul,
.mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol {
  margin: 0.3em 0 0 1.6em;
  padding: 0;
}


.links > li{
    display: inline-block;
    margin: 0 !important;
}

#preftoc{
    margin: 0 0 0 10px;
    padding: 0;
    list-style: none;
}

#preftoc li{
    display: inline-block;
    margin-right: 5px;
    padding: 5px;
    border-radius: 2px 2px 0 0;
    border: 1px solid #EFECE2;
    border-bottom: none;
    background: #EFECE2;
}

#preftoc li.selected{
    background: white;
}

#sitenav a, #sitenav a:visited{
    padding-right: 20px;
    font-family: Bitter;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    color: #58595b;
    text-shadow: 1px 1px 1px #dad5c8;
    -webkit-transition: all .2s;
}

#sitenav a:hover{
    color: #2dafbc;
    text-shadow: 1px 1px 1px white;
}

#sitenav a.active{
    color: #d37e00;
    text-shadow: 1px 1px 1px white;
}

#page-top{
    background: #efece2;
    border-radius: 5px 5px 0 0;
}

#p-namespaces a, #p-namespaces a:visited{
    display: block;
    padding: 15px;
    font-size: 12px;
    color: #256a84;
    text-decoration: none;
    border-radius: 5px 5px 0 0;
}

#p-namespaces .selected a{
    background: #f9f7f3;
    color: #58595b;
}

#page-top > .right{
    padding: 9px;
}

#hierarchy-menu {
	float: left;
}

/* Dropdown hierarchy menus */
ol.breadcrumbs {
   margin: 0 0 0 -1.1em;
   padding: 0;
   height: 1em;
   text-transform: uppercase;
   float: left;
}

	ol.breadcrumbs:only-child {
		float: none;
	}

	ol.breadcrumbs li {
	   list-style: none;
	}
	
	ol.breadcrumbs > li {
	   float: left; 
	   position: relative;
	}
	
		ol.breadcrumbs > li:first-child {
		   margin-left: 2em;
		   border-left: solid 2px #ded8c9;
		}
	
		ol.breadcrumbs > li:nth-child(1) { z-index: 90; }
		ol.breadcrumbs > li:nth-child(2) { z-index: 80; }
		ol.breadcrumbs > li:nth-child(3) { z-index: 70; }
		ol.breadcrumbs > li:nth-child(4) { z-index: 60; }
		ol.breadcrumbs > li:nth-child(5) { z-index: 50; }
		ol.breadcrumbs > li:nth-child(6) { z-index: 40; }
		ol.breadcrumbs > li:nth-child(7) { z-index: 30; }
		ol.breadcrumbs > li:nth-child(8) { z-index: 20; }
		ol.breadcrumbs > li:nth-child(9) { z-index: 10; }
	
		ol.breadcrumbs > li > a {
		   border: thin solid #ded8c9;
		   margin-left: -1.5em;
		   padding: .6em 1em .6em 2em;
		   box-shadow: 0 0 0 1px #f7f1e0 inset;
		   background-color: #F0EBDD;
		   border-radius: 0 1.5em 1.5em 0;
		}
		
		ol.breadcrumbs > li:last-child > a {
		   background-color: #f9f7f3;
		}
		
		ol.breadcrumbs > li:hover > a:not(:last-child),
		ol.breadcrumbs > li.focus > a:not(:last-child) {
			border-bottom-right-radius: 0;
			border-bottom-color: transparent;
		}
	
	ol.breadcrumbs li a {
	   display: block;
	}
	
	
		ol.breadcrumbs > li:first-child > a {
		   padding-left: 1em;
		}


	ol.breadcrumbs > li > ul  {
	   margin: -1px 0 0 -1.2em;
	   border-color: #ded8c9;
	}
	
	ol.breadcrumbs > li:hover > ul,
	ol.breadcrumbs > li.focus > ul {
	   z-index: -1;
	}

    ol.breadcrumbs .dropdown > ul {
       overflow-y: auto;
    }

.tool-area {
    padding: 10px 0;
}

	.tool-area a {
		color: #74663e;
		font-size: 85%;
		text-decoration: none;
	}

	.tool-area:after {
		content: '';
		display: block;
		clear: both;
	}

.toolbar {
	float: right;
}

.toolbar .button {
    display: inline-block;
    position: relative;
    min-width: 7em;
    box-shadow: 0px 2px 2px -1px rgba(0,0,0,.1);
    color: black;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.toolbar .button,
ol.breadcrumbs > li > a:not(:only-child):hover,
ol.breadcrumbs > li > a:not(:only-child):focus {
	background-image: -webkit-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
	background-image: -moz-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
	background-image: -o-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
	background-image: linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
}

.toolbar .button:hover,
.toolbar .button:focus {
	color: black;
}

.toolbar .button:active {
	box-shadow: 0 0 0 999px rgba(0,0,0,.03) inset, 1px 1px 5px rgba(0,0,0,.3) inset;
	padding-top: .7em;
	padding-bottom: .5em;
}

.toolbar .button,
.dropdown > a,
.dropdown > ul {
	border: 1px solid #cfc6b0;
	color: #74663e;
	text-shadow: 0 1px 1px white;
}

.toolbar .button,
.dropdown > a {
	padding: .6em .8em;	
}
	
.toolbar .button,
.dropdown > ul {
	background-color: #F0EBDD;
	background-repeat: no-repeat;
	border-radius: .5em;
}

.dropdown {
	float: right;
	margin-left: .3em;
	position: relative;
	z-index: 1;
}

	.dropdown > a.button {
		position: relative;
		z-index: 2;
		min-width: 4.4em;
		padding-right: 2.7em;
	}
	
		.toolbar .dropdown > a:after {
			content: '▾';
			position: absolute;
			right: 0;
			top: .6em;
			bottom: .6em;
			padding: .4em 1em .4em .8em;
			box-shadow: 1px 0 0 rgba(0,0,0,.2) inset, 2px 0 0 white inset;
			font: 80%/1.05 serif;
		}
	
	.dropdown > a,
	.dropdown > ul {
		background-color: #F0EBDD;
	}
	
	.dropdown > ul {
		position: absolute;
		z-index: 1;
		min-width: 0;
		max-width: 0;
		max-height: 0;
		padding: 0;
		margin: -1px 0 0 0;
		border-width: 0;
		border-radius: .5em;
		border-top-left-radius: 0;
		overflow: hidden;
		box-shadow: 0 2px 2px -1px rgba(0,0,0,.1);
		list-style: none;
		text-transform: uppercase;
		
		-webkit-transition: .2s;
		-moz-transition: .2s;
		-o-transition: .2s;
		transition: .2s;
	}
	
		.dropdown > ul > li {
			margin: 0;
			list-style: none;
			white-space: nowrap;
			border-width: 1px 0;
			border-style: solid;
			border-color: hsla(0,0%,100%,.5) transparent rgba(0,0,0,.1);
		}
		
		.dropdown > ul > li:first-child {
			border-top: 0;
		}
		
		.dropdown > ul > li:last-child {
			border-bottom: 0;
		}
		
			.dropdown li > a {
				display: block;
				padding: .5em;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-transition: 0s;
				-moz-transition: 0s;
				-o-transition: 0s;
				transition: 0s;
			}
			
			.dropdown ul > li > a:hover,
			.dropdown ul > li > a:focus {
				position: relative;
				background: #4e408a;
				color: white;
				text-shadow: 0 -1px 2px black;
				border-radius: .2em;
				box-shadow: 0 0 0 2px #4e408a;
			}
	
	.dropdown:hover > ul,
	.dropdown > a:focus + ul,
	.dropdown.focus > ul {
		min-width: 100%;
		max-width: 25em;
		max-height: 30em;
		padding: .6em;
		border-width: 1px;
	}
	
	.dropdown:hover > a.button,
	.dropdown > a.button:focus,
	.dropdown.focus > a.button {
		border-bottom-color: transparent;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	
	.dropdown:hover > a.button:not(:active),
	.dropdown.focus > a.button:not(:active) {
		box-shadow: none;
	}
	
.highlighted.button,
.highlighted.button + ul {
	background-color: #B4E1E4;
	border-color: hsl(184, 50%, 65%);
}

.highlighted.button,
.highlighted.button + ul a {
	color: hsl(184, 60%, 20%);
}

	.toolbar .highlighted.button:before,
	.toolbar .button.watch:before,
	.toolbar .button.tools:before {
		margin-right: .5em;
		font: 100% WPSymbols, serif;
		opacity: .6;
	}
	
	.dropdown > .highlighted.button:after {
		box-shadow: 1px 0 0 hsl(184, 50%, 65%) inset, 2px 0 0 hsla(0,0%,100%,.6) inset;
	}
		
	.toolbar .highlighted.button:before {
		content: "\270e";
	}
	
	.toolbar .button.watch:before {
		content: "\1f440";
	}
	
	.toolbar .button.tools:before {
		content: "\2699";
	}

.down-arrow{
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -2px;
    width: 5px;
    height: 5px;
    background-image: url(skins/webplatform/images/arrow-down.svg);
    background-repeat: no-repeat;
    background-position: right center;
}

#page{
    background: #f9f7f3;
    /* border: 1px solid white; */
    border-radius: 5px;
    box-shadow: 0px 0px 1px #a7a9ac;
    margin-bottom: 20px;
}

#page-content{
    position: relative;
    padding: 18px;
}

#sidebar + #main-content{
    padding-right: 230px;
}


/*
* Sidebar Table of Contents
*/

#sidebar{
    position: relative;
    float: right;
    /* position: absolute; */
    /* top: 10px; */
    /* right: 10px; */
    padding: 14px;
    margin: -10px -10px 0px 10px;
    width: 182px;
    background-color: #B4E1E4;
    border: 10px solid #f9f7f3;
    box-shadow: inset 0px 0px 5px #81c7e1;
}

#sidebar a{
    font-family: Bitter;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 1px 1px 1px #cffcff;
    color: #226077;
    -webkit-transition: color .2s;
}

#sidebar a:hover{
    color: #2dafbc;
}

#sidebar ul{
    margin: 0;
    color: #256a84;
    text-shadow: 1px 1px 1px #cffcff;
    font-size: 13px;
}

#sidebar hr{
    border-top: 1px solid #7bccd1;
    border-bottom: 1px solid #bcebee;
    border-left: none;
    margin: 20px 0;
}

#sidebar-title {
    border-bottom: 2px solid #7BCCD1;
    font-family: Gudea,Arial,sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 0px;
    padding: 6px 0;
    text-align: center;
    text-transform: uppercase;
}

#sidebar:before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: 50%;
    width: 21px;
    height: 21px;
    margin-left: -10px;
    background-image: url(skins/webplatform/images/sidebar-top.svg);
}

.custom-toc > ol {
	margin: 0;
    padding-left: 0;
}

.custom-toc > ol ol {
    padding-left: 1.2em;
    font-size: 95%;
}

.custom-toc > ol > li {
    padding: 1em 0;
    margin-bottom: 0;
    list-style: none;
    border-top: 1px solid hsla(0,0%,100%,.5);
    border-bottom: 1px solid hsl(183, 48%, 65%); 
    color: hsl(196, 56%, 33%); /* otherwise list-style will give grey bullets */
}

.custom-toc > ol > li:first-child {
    border-top: 0;
}

.custom-toc > ol > li:last-child {
    border-bottom: 0;
}

.custom-toc > ol > li li {
    list-style: disc;
    margin-bottom: 0;
    padding: .5em 0;
}



.mw-prefs-buttons{
    padding-top: 20px;
}

#mw-footer{
    padding: 40px 0;
    border-top: 1px solid #f1eddf;
    background-color: #efeadd;
}

	#mw-footer a {
		color: inherit;
	}

#footer-title{
   font-family: Bitter;
   font-weight: bold;
   font-size: 24px;
}

#footer-title-light{
    color: #9f9c97;
}

#pt-userpage a, 
#pt-login a {
    padding-left: 20px;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url(skins/webplatform/images/icon-head.svg);
}

/* icons for buttons*/
#ca-protect .icon{
    background-image: url(skins/webplatform/images/icon-protect.svg);
}

#ca-delete .icon{
    background-image: url(skins/webplatform/images/icon-delete.svg);
}

#ca-move .icon{
    background-image: url(skins/webplatform/images/icon-move.svg);
}

#ca-edit .icon{
    background-image: url(skins/webplatform/images/icon-edit.svg);
}
#ca-edit .icon{
    background-image: url(skins/webplatform/images/icon-edit.svg);
}

#ca-view .icon{
    background-image: url(skins/webplatform/images/icon-view.svg);
}

#ca-history .icon{
    background-image: url(skins/webplatform/images/icon-history.svg);
}



/* watch button */
#ca-watch .icon{
    background-image: url(skins/webplatform/images/icon-watch.svg);
}

#ca-unwatch .icon{
    background-image: url(skins/webplatform/images/icon-unwatch.svg);
}

#ca-watch > span#watch_label,
#ca-unwatch > span#watch_label {
  background-color: #F9F7F3;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0 0 1px #A7A9AC;
  display: none;
  margin-left: -0.5em;
  margin-top: -2em;
  padding: 0.25em;
  position: absolute;
}

#ca-watch:hover > span#watch_label,
#ca-unwatch:hover > span#watch_label {
  display: block;
}


span.editsection a{
    background-image: url(skins/webplatform/images/icon-edit.svg);
    display: inline-block;
    width: 17px;
    height: 22px;
}


/* flags */

#flags{
    position: relative;
    margin-top: 20px;
    left: -18px;
    width: 100%;
    padding: 0px 7px 5px;
    background: #ffdedb;
}

#flags:not(:empty):before {
	content: '';
	position: absolute;
	left: -.55em;
	top: 1.3em;
	width: 0;
	height: 0;
	border: .5em solid transparent;
	border-left-width: 0;
	border-right-color: #7a271e;
}

#flags:empty {
    padding: 0;
    margin: 0;
}

#flags *{
    display: inline;
}

#flags ul, #flags li{
    margin: 0;
    padding: 0;
}

#flags > div > p{
    display: none;
}

#flags a {
	display: inline-block;
	padding: 0 1.5em;
	margin: .4em 0;
	background: #e2887a;
	background-image: -webkit-linear-gradient(210deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  -webkit-linear-gradient(30deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  -webkit-linear-gradient(330deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  -webkit-linear-gradient(150deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em);
	background-image: -moz-linear-gradient(210deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  -moz-linear-gradient(30deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  -moz-linear-gradient(330deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  -moz-linear-gradient(150deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em);
	background-image: -o-linear-gradient(210deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  -o-linear-gradient(30deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  -o-linear-gradient(330deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  -o-linear-gradient(150deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em);
	background-image: linear-gradient(240deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  linear-gradient(60deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  linear-gradient(120deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em),
	                  linear-gradient(300deg, #FFDEDB .5em, hsla(5, 100%, 93%, 0) .6em);
	background-position: top right, top left, bottom left, bottom right;
	background-size: 1.2em 53%;
	background-repeat: no-repeat;
	color: white;
	text-shadow: 0 -.1em .1em rgba(0, 0, 0, .3);
	font: bold 90%/1.5 Bitter, serif;
}

#flags a:hover {
	background-color: #973a2c;
}

#flag-label {
    display: block;
    position: relative;
    left: -15px;
    top: -5px;
    width: 101%;
    padding: .3em 1em;
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    font-family: Bitter;
    color: white;
    background-color: #ce4a3a;
}


p > br:only-child { 
    display: none 
}



.wikiEditor-ui{
    clear: left !important;
}

.prefix{
	display: inline-block;
	padding: 2px 4px;
	text-align: center;
	color: white;
	font-size: 12px;
	font-family: Gudea, Arial, sans-serif;
	font-weight: normal;
	text-shadow: 0px 1px 0px black;
	border: 1px solid;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.prefix.webkit{
	border-color: white;
	background: rgb(70,183,228);
	background: -moz-linear-gradient(top,  rgba(70,183,228,1) 0%, rgba(74,125,186,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(70,183,228,1)), color-stop(100%,rgba(74,125,186,1)));
	background: -webkit-linear-gradient(top,  rgba(70,183,228,1) 0%,rgba(74,125,186,1) 100%);
	background: -o-linear-gradient(top,  rgba(70,183,228,1) 0%,rgba(74,125,186,1) 100%);
	background: -ms-linear-gradient(top,  rgba(70,183,228,1) 0%,rgba(74,125,186,1) 100%);
	background: linear-gradient(to bottom,  rgba(70,183,228,1) 0%,rgba(74,125,186,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46b7e4', endColorstr='#4a7dba',GradientType=0 );
}

.prefix.moz{
	border-color: white;
	background: rgb(225,120,11);
	background: -moz-linear-gradient(top,  rgba(225,120,11,1) 0%, rgba(212,82,13,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(225,120,11,1)), color-stop(100%,rgba(212,82,13,1)));
	background: -webkit-linear-gradient(top,  rgba(225,120,11,1) 0%,rgba(212,82,13,1) 100%);
	background: -o-linear-gradient(top,  rgba(225,120,11,1) 0%,rgba(212,82,13,1) 100%);
	background: -ms-linear-gradient(top,  rgba(225,120,11,1) 0%,rgba(212,82,13,1) 100%);
	background: linear-gradient(to bottom,  rgba(225,120,11,1) 0%,rgba(212,82,13,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1780b', endColorstr='#d4520d',GradientType=0 );
}

.prefix.ms{
	border-color: #f9ec71;
	background: rgb(130,206,231);
	background: -moz-linear-gradient(top,  rgba(130,206,231,1) 0%, rgba(47,147,212,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,206,231,1)), color-stop(100%,rgba(47,147,212,1)));
	background: -webkit-linear-gradient(top,  rgba(130,206,231,1) 0%,rgba(47,147,212,1) 100%);
	background: -o-linear-gradient(top,  rgba(130,206,231,1) 0%,rgba(47,147,212,1) 100%);
	background: -ms-linear-gradient(top,  rgba(130,206,231,1) 0%,rgba(47,147,212,1) 100%);
	background: linear-gradient(to bottom,  rgba(130,206,231,1) 0%,rgba(47,147,212,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cee7', endColorstr='#2f93d4',GradientType=0 );
}

.prefix.o{
	border-color: white;
	background: rgb(234,57,58);
	background: -moz-linear-gradient(top,  rgba(234,57,58,1) 0%, rgba(155,10,10,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,57,58,1)), color-stop(100%,rgba(155,10,10,1)));
	background: -webkit-linear-gradient(top,  rgba(234,57,58,1) 0%,rgba(155,10,10,1) 100%);
	background: -o-linear-gradient(top,  rgba(234,57,58,1) 0%,rgba(155,10,10,1) 100%);
	background: -ms-linear-gradient(top,  rgba(234,57,58,1) 0%,rgba(155,10,10,1) 100%);
	background: linear-gradient(to bottom,  rgba(234,57,58,1) 0%,rgba(155,10,10,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea393a', endColorstr='#9b0a0a',GradientType=0 );
}

.language{
	position: absolute;
	top: 1px;
	right: 1px;
	color: #6d685b; 
	font-family: Bitter;
	font-weight: bold;
	text-shadow: 0px 1px 0px white;
	padding: 5px 15px;

background: rgb(214,200,180);
background: -moz-linear-gradient(top,  rgba(214,200,180,1) 0%, rgba(200,185,156,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,200,180,1)), color-stop(100%,rgba(200,185,156,1)));
background: -webkit-linear-gradient(top,  rgba(214,200,180,1) 0%,rgba(200,185,156,1) 100%);
background: -o-linear-gradient(top,  rgba(214,200,180,1) 0%,rgba(200,185,156,1) 100%);
background: -ms-linear-gradient(top,  rgba(214,200,180,1) 0%,rgba(200,185,156,1) 100%);
background: linear-gradient(to bottom,  rgba(214,200,180,1) 0%,rgba(200,185,156,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6c8b4', endColorstr='#c8b99c',GradientType=0 );
 
}

.css-property{
	border-bottom: 1px solid #E2E3E4;
}

.compat-table{
	border-collapse: separate;
	box-shadow: 0px -1px 0px #eae8e5;
	border-radius: 5px 5px 0 0;
	border: 1px solid #ddd3c2;
	font-family: Bitter;
}

.compat-table tr:nth-child(2n){
	background: #e1dccf;
}

.compat-table tr:nth-child(2n + 1){
	background: #fbf7ef;
}

.compat-table th{
	font-weight: normal;
	padding: 10px;
	border: none;
	border-top: 1px solid white;
	border-right: 1px solid white;
	border-bottom: 1px solid #b8af98;
	background: rgb(230,226,216);
	background: -moz-linear-gradient(top,  rgba(230,226,216,1) 0%, rgba(225,217,198,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,226,216,1)), color-stop(100%,rgba(225,217,198,1)));
	background: -webkit-linear-gradient(top,  rgba(230,226,216,1) 0%,rgba(225,217,198,1) 100%);
	background: -o-linear-gradient(top,  rgba(230,226,216,1) 0%,rgba(225,217,198,1) 100%);
	background: -ms-linear-gradient(top,  rgba(230,226,216,1) 0%,rgba(225,217,198,1) 100%);
	background: linear-gradient(to bottom,  rgba(230,226,216,1) 0%,rgba(225,217,198,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e2d8', endColorstr='#e1d9c6',GradientType=0 );
}

.compat-table td{
	font-weight: bold;
	border: none;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	border-right: 1px solid white;
}

table.compat-table tr:first-child th:first-child{   
    border-radius-topleft:5px;
    border-top-left-radius:5px;
    border-left: none;
}

table.compat-table tr:first-child th:last-child{   
    border-radius-topright:5px;
    border-top-right-radius:5px;
    border-right: none;
}

table.compat-table tr td:last-child{
	border-right: none;
}

table.compat-table tr:last-child td{
	border-bottom: none;
}

table.compat-table tr td:first-child{
	border-left: none;
	color: white;
	background: #6c6657;
	font-weight: normal;
}

.major_style_issue{

}

footer ul.stewards {
	padding: 0;
	float: right;
	max-width: 650px;
	margin: -2.5em auto 0;
	padding: 2em 0;
}

	footer ul.stewards > li {
		display: inline;
		list-style: none;
	}
	
		footer ul.stewards > li > a {
			display: inline-block;
			vertical-align: middle;
			width: 124px;
			height: 60px;
			background: url(skins/webplatform/images/footer-images.png) no-repeat 0 0;
			text-indent: 200px;
			overflow: hidden;
			color: gray;
			color: rgba(0,0,0,.4);
			text-align: center;
			font: bold 140%/2.5 Bitter, serif;
		}
		
		footer ul.stewards > li.steward-adobe > a { background-position: -124px 0; }
		footer ul.stewards > li.steward-facebook > a { background-position: -372px 0; }
		footer ul.stewards > li.steward-google > a { background-position: -496px 0; }
		footer ul.stewards > li.steward-hp > a { background-position: 0 -60px; }
		footer ul.stewards > li.steward-microsoft > a { background-position: -124px -60px; }
		footer ul.stewards > li.steward-nokia > a { background-position: -248px -60px; }
		footer ul.stewards > li.steward-mozilla > a { background-position: -372px -60px; }
		footer ul.stewards > li.steward-opera > a { background-position: -496px -60px; }