/*
 * Any rules which should not be flipped automatically in right-to-left situations should be
 * prepended with @noflip in a comment block. Images that should be embedded as base64 data-URLs
 * should be prepended with @embed in a comment block.
 *
 * This style-sheet employs a few CSS trick to accomplish compatibility with a wide range of web
 * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
 * a rule that makes things work in IE6, and then following it with a rule that begins with
 * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
 * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
 * "IGNORED BY IE6" comments.
 */

/* Framework */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 1em;
  color: white;
}
body {
  background-color: #000;
}
h1 {
color: white;
}
h2, h3 {
  color:#D00;
}
h4, h5, h6 {
  color:#777;
}
/* Content */
article {
  margin-left: 10em;
  padding: 1em;
  background-color: #202020;
  color: #ddd;
  direction: ltr;
}
/* Head */
#mw-page-base {
  height: 5em;
}
#mw-head-base {
  margin-top: -5em;
  margin-left: 10em;
  height: 5em;
  background-position: bottom left;
  background-repeat: repeat-x;
}
header {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}
header h5 {
  margin: 0;
  padding: 0;
}
/* Hide empty portlets */
div.emptyPortlet {
    display: none;
}
/* Personal */
#p-personal {
  position: absolute;
  top: 0.33em;
  right: 0.75em;
  color: white;
}
#p-personal h5 {
  display: none;
}
#p-personal ul {
  list-style: none;
  margin: 0;
  right:0;
}
/* @noflip */
#p-personal li {
  line-height: 1.125em;
  float: left;
}
/* This one flips! */
#p-personal li {
  margin-left: 0.75em;
  margin-top: 0.5em;
  font-size: 0.75em;
  white-space: nowrap;
}
/* Navigation Containers */
#left-navigation {
  position: absolute;
  left: 10em;
  top: 2.5em;
}
#right-navigation {
  float: right;
  margin-top: 2.5em;
}
/* Navigation Labels */
div.vectorTabs h5,
div.vectorMenu h5 span {
  display: none;
}
/* Namespaces and Views */
/* @noflip */
div.vectorTabs {
  float: left;
  height: 2.5em;
}
div.vectorTabs {
  background-position: bottom left;
  background-repeat: no-repeat;
  padding-left: 1px;
}
/* @noflip */
div.vectorTabs ul {
  float: left;
}
div.vectorTabs ul {
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* @noflip */
div.vectorTabs ul li {
  float: left;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs ul li {
  line-height: 1.125em;
  display: inline-block;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;
  background-position: bottom left;
  background-repeat: repeat-x;
  white-space: nowrap;
}
/* IGNORED BY IE6 */
div.vectorTabs ul > li {
  display: block;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs li a {
  display: inline-block;
  height: 1.9em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  cursor: pointer;
  font-size: 0.8em;
}
/* IGNORED BY IE6 */
div.vectorTabs li > a {
  display: block;
}
div.vectorTabs li.icon a {
  background-position: bottom right;
  background-repeat: no-repeat;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs span a  {
  display: inline-block;
  padding-top: 1.25em;
}
/* IGNORED BY IE6 */
/* @noflip */
div.vectorTabs span > a {
  float: left;
  display: block;
}
div.vectorTabs span {
  display: inline-block;
  background-position: bottom right;
  background-repeat: no-repeat;
}
div.vectorTabs li.selected a,
div.vectorTabs li.selected a:visited{
  color: #fff;
  text-decoration: none;
}
/* Variants and Actions */
/* @noflip */
div.vectorMenu {
  direction: ltr;
  float: left;
  /* @embed */
  background-image: url(images/arrow-down-icon.png);
  background-position: 100% 60%;
  background-repeat: no-repeat;
  cursor: pointer;
}
div.vectorMenuFocus {
  /* @embed */
  background-image: url(images/arrow-down-focus-icon.png);
  background-position: 100% 60%;
}
/* @noflip */
body.rtl div.vectorMenu {
  direction: rtl;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
/* @noflip */
header div.vectorMenu h5 {
  float: left;
  /* @embed */
  background-image: url(images/tab-break.png);
  background-repeat: no-repeat;
}
/* This will be flipped - unlike the one above it */
header div.vectorMenu h5 {
  background-position: bottom left;
  margin-left: -1px;
}
/* IGNORED BY IE6 */
header div.vectorMenu > h5 {
  background-image: none;
}
header div.vectorMenu h4 {
  display: inline-block;
  float: left;
  font-size: 0.8em;
  padding-left: 0.5em;
  padding-top: 1.375em;
  font-weight: normal;
  border: none;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
/* @noflip */
div.vectorMenu h5 a {
  display: inline-block;
  width: 24px;
  height: 2.5em;
  text-decoration: none;
  /* @embed */
  background-repeat: no-repeat;
}
/* This will be flipped - unlike the one above it */
div.vectorMenu h5 a {
  background-position: bottom right;
}
/* IGNORED BY IE6 */
div.vectorMenu h5 > a {
  display: block;
}
div.vectorMenu div.menu {
  position: relative;
  display: none;
  clear: both;
  text-align: left;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
/* @noflip */
body.rtl div.vectorMenu div.menu {
  margin-left: 24px;
}
/* IGNORED BY IE6 */
/* @noflip */
body.rtl div.vectorMenu > div.menu {
  margin-left: auto;
}
/* IGNORED BY IE6 */
/* Also fixes old versions of FireFox */
/* @noflip */
body.rtl div.vectorMenu > div.menu,
x:-moz-any-link {
  margin-left: 23px;
}
/* Enable forcing showing of the menu for accessibility */
div.vectorMenu:hover div.menu,
div.vectorMenu div.menuForceShow {
  display: block;
}
div.vectorMenu ul {
  position: absolute;
  background-color: #111;
  border: solid 2px #202020;
  border-top-width: 0;
  list-style: none;
  list-style-image: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-left: -1px;
  text-align: left;
}
/* Fixes old versions of FireFox */
div.vectorMenu ul,
x:-moz-any-link {
  min-width: 5em;
}
/* Returns things back to normal in modern versions of FireFox */
div.vectorMenu ul,
x:-moz-any-link,
x:default {
  min-width: 0;
}
div.vectorMenu li {
  padding: 0;
  margin: 0;
  text-align: left;
  line-height: 1em;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorMenu li a {
  display: inline-block;
  padding: 0.5em;
  white-space: nowrap;
  color: #DDD;
  cursor: pointer;
}
/* IGNORED BY IE6 */
div.vectorMenu li > a {
  display: block;
}
div.vectorMenu li.selected a,
div.vectorMenu li.selected a:visited {
  color: #777;
  text-decoration: none;
}
/* Search */
#p-search h5 {
  display: none;
}
/* @noflip */
#p-search {
  float: left;
}
#p-search {
  margin-right: 0.5em;
  margin-left: 0.5em;
}
#p-search form,
#p-search input {
  margin: 0;
  margin-top: 0.4em;
}
div#simpleSearch {
  display: block;
  width: 14em;
  height: 1.4em;
  margin-top: 0.65em;
  position: relative;
  min-height: 1px; /* Gotta trigger hasLayout for IE7 */
  border: solid 1px #AAAAAA;
  /* @embed */
  background-image: url(images/search-fade.png);
  background-position: top left;
  background-repeat: repeat-x;
}
div#simpleSearch label {
  /*
   * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
   * this from ever being shown anyways.
   */
  font-size: 13px;
  top: 0.25em;
  direction: ltr;
}
div#simpleSearch input {
  direction: ltr;
}
div#simpleSearch input:focus {
  outline: none;
}
div#simpleSearch input.placeholder {
  color: #999999;
}
div#simpleSearch input::-webkit-input-placeholder {
  color: #999999;
}
div#simpleSearch input#searchInput {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  margin: 0;
  padding: 0;
  padding-left: 0.2em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  outline: none;
  border: none;
  /*
   * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
   * this from ever being shown anyways.
   */
  font-size: 13px;
  background-color: transparent;
  direction: ltr;
}
div#simpleSearch button#searchButton {
  position: absolute;
  width: 10%;
  right: 0;
  top: 0;
  padding: 0;
  padding-top: 0.3em;
  padding-bottom: 0.2em;
  padding-right: 0.4em;
  margin: 0;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-image: none;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div#simpleSearch button#searchButton img {
  border: none;
  margin: 0;
  margin-top: -3px;
  padding: 0;
}
/* IGNORED BY IE6 */
div#simpleSearch button#searchButton > img {
  margin: 0;
}
/* Panel */
aside {
  position: absolute;
  top: 160px;
  padding-top: 1em;
  width: 10em;
  left: 0;
}
aside nav {
  padding-bottom: 1.5em;
  direction: ltr;
}
aside nav h5 {
  font-weight: normal;
  padding: 0.25em;
  padding-top: 0;
  padding-left: 1.75em;
  cursor: default;
  border: none;
  font-size: 0.75em;
}
aside nav div.body {
  margin: 0;
  padding-top: 0.5em;
  margin-left: 1.25em;
  /* @embed */
  /*background-image: url(images/portal-break.png);*/
  background-repeat: no-repeat;
  background-position: top left;
}
aside nav div.body ul {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
aside nav div.body ul li {
  line-height: 1.125em;
  padding: 0;
  padding-bottom: 0.5em;
  margin: 0;
  font-size: 0.75em;
  word-wrap: break-word;
}
aside nav div.body ul li a {
  /*color: #0645ad;*/
}
aside nav div.body ul li a:visited {
  /*color: #0b0080;*/
}
/* Footer */
footer {
  margin-left: 10em;
  margin-top: 0;
  padding: 0.75em;
  direction: ltr;
}
footer ul {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
footer ul li {
  margin: 0;
  padding: 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  color: #777;
  font-size: 0.7em;
}
footer #footer-icons {
  float: right;
}
/* @noflip */
body.ltr footer #footer-places {
  float: left;
}
footer #footer-info li {
  line-height: 1.4em;
}
footer #footer-icons li {
  float: left;
  margin-left: 0.5em;
  line-height: 2em;
  text-align: right;
}
footer #footer-places li {
  float: left;
  margin-right: 1em;
  line-height: 2em;
}
/* Logo */
#p-logo {
  position: absolute;
  top: -160px;
  left: 0;
  width: 10em;
  height: 160px;
}
#p-logo a {
  display: block;
  width: 10em;
  height: 160px;
  background-repeat: no-repeat;
  background-position: center center;
  text-decoration: none;
}

/*
 *
 * The following code is highly modified from monobook. It would be nice if the
 * preftoc id was more human readable like preferences-toc for instance,
 * howerver this would require backporting the other skins.
 */

/* Preferences */
#preftoc {
  /* Tabs */
  width: 100%;
  float: left;
  clear: both;
  margin: 0 !important;
  padding: 0 !important;
  /* @embed */
  background-image: url(images/preferences-break.png);
  background-position: bottom left;
  background-repeat: no-repeat;
}
  #preftoc li {
    /* Tab */
    float: left;
    margin: 0;
    padding: 0;
    padding-right: 1px;
    height: 2.25em;
    white-space: nowrap;
    list-style-type: none;
    list-style-image: none;
    /* @embed */
    background-image: url(images/preferences-break.png);
    background-position: bottom right;
    background-repeat: no-repeat;
  }
  /* Sadly, IE6 won't understand this */
  #preftoc li:first-child {
    margin-left: 1px;
  }
  #preftoc a,
  #preftoc a:active {
    display: inline-block;
    position: relative;
    color: #fff;
    padding: 0.5em;
    text-decoration: underline;
    background-image: none;
    font-size: 0.9em;
  }
  #preftoc a:hover,
  #preftoc a:focus {
    font-weight: bold;
  }
  #preftoc li.selected a {
    /* @embed */
    /*background-image: url(images/preferences-fade.png);*/
    background-position: bottom;
    background-repeat: repeat-x;
    background-color:#bbb;
    color: #333;
    text-decoration: none;
  }
#preferences {
  float: left;
  width: 100%;
  margin: 0;
  margin-top: -2px;
  clear: both;
  border: solid 1px #ccc;
  background-color: #bbb;
  /* @embed */
  /*background-image: url(images/preferences-base.png);*/
}
#preferences fieldset {
  border: none;
  border-top: solid 1px #ccc;
}
#preferences fieldset.prefsection {
  border: none;
  padding: 0;
  margin: 1em;
}
#preferences legend {
  color: #666;
}
#preferences fieldset.prefsection legend.mainLegend {
  display: none;
}
#preferences td {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.htmlform-tip {
  font-size: x-small;
  padding: .2em 2em;
  color: #666;
}
#preferences div.mw-prefs-buttons {
  padding: 1em;
}
#preferences div.mw-prefs-buttons input {
  margin-right: 0.25em;
}

/**
 * The following code is slightly modified from monobook
 */
article {
  line-height: 1.5em;
}
#bodyContent {
  font-size: 0.8em;
}

.editsection {
  float: right;
}

pre, .mw-code {
  line-height: 1.3em;
}

/* Site Notice (includes notices from CentralNotice extension) */
#siteNotice {
  font-size: 0.8em;
}
#firstHeading {
  padding-top: 0;
  margin-top: 0;
  padding-top: 0;
  font-size: 1.6em;
}
article a:link {
  color: #D00;
  text-decoration: none;
}
article a:visited {
  color: #a55858;
}
article a:hover {
  color: #D00; text-decoration: underline;
}
article a:active {
  color: #D00;
  font-weight: bold;
}
article a[href *= "section="][href *= "action=edit"] {
  color: #DDD;
  text-decoration:underline;
}
article a[href *= "redlink="] {
  color:#DDD;
  text-decoration:underline;
}
article a[href *= "section="][href *= "action=edit"]:hover,
article a[href *= "redlink="]:hover {
  text-decoration:none;
}

aside a:link,
header a:link,
footer a:link {
  color:#888;
  text-decoration: underline;
}
aside a:visited,
header a:visited,
footer a:visited {
  color:#888;
}
aside a:hover,
header a:hover,
footer a:hover {
  text-decoration:none;
}
aside a:active,
header a:active,
footer a:active {
  font-weight: bold;
}
aside a[href *= "redlink="],
header a[href *= "redlink="],
footer a[href *= "redlink="] {
  color:#DDD;
  text-decoration:underline;
}

article a.external,
article a.external[href ^="gopher://"] {
  /* @embed */
  background: url(images/external-link-ltr-icon.png) center right no-repeat;
  padding-right: 13px;
}
article a.external[href ^="https://"],
.link-https {
  /* @embed */
  background: url(images/lock-icon.png) center right no-repeat;
  padding-right: 13px;
}
article a.external[href ^="mailto:"],
.link-mailto {
  /* @embed */
  background: url(images/mail-icon.png) center right no-repeat;
  padding-right: 13px;
}
article a.external[href ^="news:"] {
  /* @embed */
  background: url(images/news-icon.png) center right no-repeat;
  padding-right: 13px;
}
article a.external[href ^="ftp://"],
.link-ftp {
  /* @embed */
  background: url(images/file-icon.png) center right no-repeat;
  padding-right: 13px;
}
article a.external[href ^="irc://"],
article a.external[href ^="ircs://"],
.link-irc {
  /* @embed */
  background: url(images/talk-icon.png) center right no-repeat;
  padding-right: 13px;
}
article a.external[href $=".ogg"], article a.external[href $=".OGG"],
article a.external[href $=".mid"], article a.external[href $=".MID"],
article a.external[href $=".midi"], article a.external[href $=".MIDI"],
article a.external[href $=".mp3"], article a.external[href $=".MP3"],
article a.external[href $=".wav"], article a.external[href $=".WAV"],
article a.external[href $=".wma"], article a.external[href $=".WMA"],
.link-audio {
  /* @embed */
  background: url(images/audio-icon.png) center right no-repeat;
  padding-right: 13px;
}
article a.external[href $=".ogm"], article a.external[href $=".OGM"],
article a.external[href $=".avi"], article a.external[href $=".AVI"],
article a.external[href $=".mpeg"], article a.external[href $=".MPEG"],
article a.external[href $=".mpg"], article a.external[href $=".MPG"],
.link-video {
  /* @embed */
  background: url(images/video-icon.png) center right no-repeat;
  padding-right: 13px;
}
article a.external[href $=".pdf"], article a.external[href $=".PDF"],
article a.external[href *=".pdf#"], article a.external[href *=".PDF#"],
article a.external[href *=".pdf?"], article a.external[href *=".PDF?"],
.link-document {
  /* @embed */
  background: url(images/document-icon.png) center right no-repeat;
  padding-right: 13px;
}
/* Icon for Usernames */
#pt-userpage,
#pt-anonuserpage,
#pt-login {
  /* @embed */
  background: url(images/user-icon.png) left top no-repeat;
  padding-left: 15px !important;
  text-transform: none;
}

.redirectText {
  font-size: 140%;
}

.redirectMsg img {
  vertical-align: text-bottom;
}

#bodyContent {
  position: relative;
  width: 100%;
}
div#bodyContent {
  line-height: 1.5em;
}

/* mediawiki.notification */
.skin-vector #mw-notification-area {
  top: 7em;
  font-size: 0.8em;
}
.skin-vector .mw-notification {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.93);
  padding: 0.75em 1.5em;
  border: solid 1px #a7d7f9;
  border-radius: 0.75em;
  -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
  -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
}

/* Watch/Unwatch Icon Styling */
#ca-unwatch.icon a,
#ca-watch.icon a {
  margin: 0;
  padding: 0;
  outline: none;
  display: block;
  width: 26px;
  /* This hides the text but shows the background image */
  padding-top: 3.1em;
  margin-top: 0;
  /* Only applied in IE6 */
  margin-top: -0.8em !ie;
  height: 0;
  overflow: hidden;
  /* @embed */
  background-image: url(images/watch-icons.png);
}
#ca-unwatch.icon a {
  background-position: -43px 60%;
}
#ca-watch.icon a {
  background-position: 5px 60%;
}
#ca-unwatch.icon a:hover,
#ca-unwatch.icon a:focus {
  background-position: -67px 60%;
}
#ca-watch.icon a:hover,
#ca-watch.icon a:focus {
  background-position: -19px 60%;
}
#ca-unwatch.icon a.loading,
#ca-watch.icon a.loading {
  /* @embed */
  background-image: url(images/watch-icon-loading.gif);
  background-position: 5px 60%;
}
#ca-unwatch.icon a span,
#ca-watch.icon a span {
  display: none;
}
div.vectorTabs ul {
  /* @embed */
  background-image: url(images/tab-break.png);
  background-position: right bottom;
  background-repeat: no-repeat;
}

/* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
.tipsy {
  font-size: 0.8em;
}

/* Animate between standard and high definition layouts */

body.vector-animateLayout article,
body.vector-animateLayout footer {
  -moz-transition: margin-left 250ms, padding 250ms;
  -webkit-transition: margin-left 250ms, padding 250ms;
  -o-transition: margin-left 250ms, padding 250ms;
  transition: margin-left 250ms, padding 250ms;
}
body.vector-animateLayout #p-logo,
body.vector-animateLayout #left-navigation {
  -moz-transition: left 250ms;
  -webkit-transition: left 250ms;
  -o-transition: left 250ms;
  transition: left 250ms;
}
body.vector-animateLayout #mw-panel {
  -moz-transition: padding-left 250ms;
  -webkit-transition: padding-left 250ms;
  -o-transition: padding-left 250ms;
  transition: padding-left 250ms;
}
body.vector-animateLayout #p-search {
  -moz-transition: margin-right 250ms;
  -webkit-transition: margin-right 250ms;
  -o-transition: margin-right 250ms;
  transition: margin-right 250ms;
}
body.vector-animateLayout #p-personal {
  -moz-transition: right 250ms;
  -webkit-transition: right 250ms;
  -o-transition: right 250ms;
  transition: right 250ms;
}
body.vector-animateLayout #mw-head-base {
  -moz-transition: margin-left 250ms;
  -webkit-transition: margin-left 250ms;
  -o-transition: margin-left 250ms;
  transition: margin-left 250ms;
}
#preferences fieldset {
  background-color:#000;
}
article div ul {
  list-style-type:none;
}

article ul > li:before {
  content: "\25CF";
  margin-left: -1em;
  color: #D00;
  margin-right: 1em;
}
article #catlinks ul > li:before,
article #toc ul > li:before,
article ul#preftoc > li:before,
#search ul > li:before,
.searchresults ul > li:before,
.mw-search-formheader ul > li:before/*,
article .mw-warning ul > li:before*/ {
  content:normal;
}
.searchresults li:not(:last-of-type) {
  border-bottom:2px solid #272727;
}

article #catlinks,
article #toc,
article .mw-warning,
.mw-search-formheader,
.mw-searchoptions {
  background-color:#111;
  border-color:#272727;
  border-width:2px;
  color:#777;
}
.mw-search-formheader a:active {
  color:#D00;
  text-decoration:underline;
}

.editOptions {
  color:#777;
  background-color:#111 !important;
}
#searchInput,
#searchText {
  color:#888;
  background-color: #222;
  background-image: -webkit-linear-gradient(top, #222, #333);
  background-image:         linear-gradient(to bottom, #222, #333);
}
#editform input#wpSummary,
#editform input#wpWatchThis,
#editform input[type="checkbox"],
#editform input[type="text"] {
  color: #888;
  background-color: #222;
  background-image: -webkit-linear-gradient(top, #222, #333);
  background-image:         linear-gradient(to bottom, #222, #333);
}
code {
  color:#111;
}
div#simpleSearch {
  background-color: #f7f7f7;
  background-image: -webkit-linear-gradient(top, #f7f7f7, #ffffff);
  background-image:         linear-gradient(to bottom, #f7f7f7, #ffffff);
}
#editform textarea,
#editform input[type=textarea],
#editform input[type=text] {
  linear-gradient(to bottom, #222, #333)
}

.mw-notification {
  background-color:#111 !important;
  border-color:#272727 !important;
  border-width:2px;
}

#pagehistory li.selected {
  background-color:#000;
}

div.thumb .thumbinner {
  border-color:#111;
  background-color:#111;
}

div.thumb .thumbcaption {
  background-color:#111;
}

div.thumb .thumbimage {
  background-color:#fff;
}

table.diff {
  background-color:#111;
}

.iframe-wrapper iframe {
  height:100%;
  width:100%;
}
.iframe-wrapper.align-left {
  margin-right:auto;
}
.iframe-wrapper.align-right {
  margin-left:auto
}
.iframe-wrapper.align-center {
  margin-left:auto;
  margin-right:auto;
}

.iframe-wrapper iframe {
  border-style:solid;
  border-color:#D00;
  border-width:0;
}
.iframe-wrapper.border-thin iframe {
  border-width:thin;
}
.iframe-wrapper.border-medium iframe {
  border-width:medium;
}
.iframe-wrapper.border-thick iframe {
  border-width:thick;
}