monimatapa/monomotapa/static/style_rmgss.css

/*
 *  Sticky Footer Solution
 *  by Steve Hatcher
 *  http://stever.ca
 *  http://www.cssstickyfooter.com
 *  */

@font-face{
    font-family:'EB Garamond';
    font-style:normal;
    font-weight:400;
    src:local('EB Garamond 12 Regular'), url('fonts/EBGaramond.otf') format('opentype');
}
@font-face{
    font-family:'EB Garamond';
    font-style:italic;
    font-weight:400;
    src:local('EB Garamond 12 Italic'), url('fonts/EBGaramond.otf') format('opentype');
}

* {margin:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
	margin-left: 7px;
	margin-rigth: 5px;
	font-family: serif, georgia;
	font-size: 16px;
	/* C */
	background-color: #343A35;
	color: #C3C4C2;
}

body code{
	font-size: 14px;
	padding-left: 2px;
	padding-right: 2px;
	/* C */
	background-color: #242A25;
}

strong{
	/* C */
	color: #E2E9EA;
}

/* ----------------- */
  .row,.col,
  .row:after,.col:after,
  .row:before,.col:before{
	  -webkit-box-sizing:border-box;
          -moz-box-sizing:border-box;
          box-sizing:border-box
  }
  /* clearfix */
  .row{*zoom:1}
  .row:before,
  .row:after{
	  display:table;
	  content:"";
	  line-height:0}
  .row:after{clear:both}
  .row{
	  padding:0;
	  margin:0;
  }
  /* should probably put *zoom:1; here but for clarity it's separated*/
  ul.row,
  li.col{ list-style-type:none }
  .col{float:left}
  .col,
  .fill{width:100%}

.tc{width: 85%;}

  /* grid mq */
  @media (min-width:30em){
	  .col:not(.fill){width:50%}
	  .col.third:nth-child(3),
	  .col.fifth:nth-child(5),
	  .col.fourth+div:nth-child(3).fill,
	  .col.fifth+div:nth-child(3).fill{width:100%}
	  .col+.fill{width:50%}
  }
  @media (min-width:50em){
	  .col.half{width:50%}
	  .col.half+.fill{width:50%}
	  .col.third,
	  .col.third:nth-child(3){width:33.333%}
	  .col.third+.fill{width:66.666%}
	  .col.fourth{width:25%}
	  .col.fourth+.fill{width:75%}
	  .col.fourth+div:nth-child(3).fill{width:50%;}
	  .col.fifth,
	  .col.fifth:nth-child(5){width:20%}
	  .col.fifth+.fill{width:80%}
	  .col.fifth+div:nth-child(3).fill{width:60%;}
	  .col.fifth+div:nth-child(4).fill{width:40%;}
  }
  /* ie8 overrides - I'd suggest using conditionals with either ".ie-8 class or loading in a separate legacy stylesheet with conditionals */

@media (min-width:30em){
	.row>.col{width:50%}
	.row>.fill.col{width:100%}
	.row>.half.col+.fill,
	.row>.third.col+.fill,
	.row>.fourth.col+.fill,
	.row>.fifth.col+.fill,
	.row>.fifth.col+div+div+.fill{width:50%}
	.row>.fourth.col+div+.fill,
	.row>.fifth.col+div+.fill,
	.row>.third.col+div+div,
	.row>.fifth.col+div+div+div+div{width:100%}
}
@media (min-width:50em){
	.row>.third.col,
	  .row>.third.col+div+div{width:33.333%}
	  .row>.third.col+.fill{width:66.666%}
	  .row>.fourth.col{width:25%}
	  .row>.fourth.col+.fill{width:75%}
	  .row>.fourth.col+div+.fill{width:50%}
	  .row>.fifth.col+.fill{width:80%}
	  .row>.fifth.col,
	  .row>.fifth.col+div+div+div+div{width:20%}
	  .row>.fifth.col+div+.fill{width:60%}
	  .row>.fifth.col+div+div+.fill{width:40%}
  }
/* ----------------- */
ul {
    margin-left: 7px;
    padding-left: 1.3em;
    line-height: 1.5em;
    /*list-style-type: none;*/
    list-style-position: outside;
}


div#nav_right{
	font-family: mono;
	font-size: 12px;
	text-decoration: none;
	padding: 8px;
	word-wrap: break-word;
	margin: 150px 22px 22px 7px;

	border-radius: 12px;
	border-right-style: solid;
	border-right-width: 2px;
	border-left-style: none;
	border-left-width: 1px;  
	border-top-style: solid;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-bottom-style: solid;

	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(53, 226, 234, 0.81);
	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(48, 201, 208, 0.81);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(57, 188, 194, 0.81);
	
	/* C */
	background-color: #002206;
	color: #B1BFA3;

	border-top-color: #43DDE5;
	border-right-color: #35E2EA;
	border-bottom-color: #2B4E4D;
}

div#nav_right a{
	/* C */
	color: #A1AD93;
}

div#nav_right a:hover{
	border-width: 2px;
	border-style: dashed;
	/* C */
	background-color: #27442B;
	border-color: #1d7d4a;
}
div#nav_right ul{
	list-style-type: none;
	line-height: 1.7em;
	margin-left: 0;
	word-wrap: break-word;
}

div#noticia{
	padding: 8px;
	word-wrap: break-word;
	margin: 12px 45px 10px 7px;

	border-radius: 8px;
	border-style: solid;
	border-width: 1px;

	/* C */
	border-right-color: #A2E3E1;
	border-top-color: #A2E3E1;
	border-left-color: #526341;
	border-bottom-color: #82A381;

	-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(157, 236, 154, 0.81);
	-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(103, 235, 100, 0.81);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(69, 195, 64, 0.81);

}

div#consejo_del_dia{
    margin: 12px 1px 1px 1px;
    padding: 4px;
    word-wrap: break-word;
    border-radius: 4px;
    border-style: dashed;
    border-width: 1px;
    font-size: 0.8em;
    font-family: sans;
    /* C */
    border-color: #503BE9;
}

div#consejo_del_dia hr{
    background-color: #423B75;
}

div#contenido{
	float:rigth;
	width: 87;
}

div#wrap {
    min-height: 100%;
    padding:0 1.1em;
}

div#nav {
    padding-top: 0.2%;
    padding-bottom: 0.2%;
}
div#main {
    overflow:auto;
    padding-bottom: 50px;  /* must be same height as the footer */
}

div#home{
    font-size: 1.2em;
    padding: 5% 20%;
	/* C */
    color: #AAA;
}

div#footer {
    position: relative;
    margin-top: 50px; /* non negative value of footer height */
    height: 50px;
    clear:both;
    padding:0 2em;
}

div#attributes {
    padding: 1% 7%;
}

div.e-content {
    padding: 1% 2%;
}

div.output{
    padding: 2%;
}

div.highlight{
    padding: 2%;
	font-size: 11px;
	/* C */
	background-color: #111212;
}


h1 {
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 2.9em;
    padding: 0 0 1% 5%;
	font-weight: normal;
    clear: both;
}

h2{
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 1.85em;
    padding:0.5em 0;
}

h3{
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 1.65em;
    padding:0.5em 0;
}

h4{
	font-family: 'EB Garamond', Garamond, serif;
	font-size: 1.4em;
	padding:0.5em 0;
}

h5{
	font-family: 'EB Garamond', Garamond, serif;
	font-size: 1.27em;
	padding:0.5em 0;
}

h6{
	font-family: 'EB Garamond', Garamond, serif;
	font-size: 1.16em;
	padding:0.5em 0;
}

p {
    padding:0.5em 0;
}

p#post-details {
    font-style: italic;
    text-align:right;
    font-size: 1.1em;
}
p.p-summary {
    font-style: italic;
    font-size: 1.2em;
	font-family: 'EB Garamond', Garamond, serif;
}
p#footer {
    padding-top: 15px;
    font-size: 0.8em;
    text-align: center;
    /* padding-left: 10%; */
	/* C */
    color: #ABC;
}

a {
	/* C */
	color: #56CE54;
	text-decoration: none;
}

a:visited{
	/* C */
	color: #46AE74;	
}

a:hover{
	border-radius: 2px;
	/* C */
	background-color:#2DA22D;
	color: #C3C2D2;
}

.titulo_noticia{
    font-size: 1.55em;
    padding:0.2em 0;
}

.categorias a{
    font-family: sans;
    border-right-width: 3px;
    border-top-width: 1px;
    border-bottom-width: 0;
    border-left-width: 0;
    border-style: solid;
    border-radius: 2px;
    margin-right: 7px;
    /* C */
    border-right-color: #38C5DC;
    border-top-color: #3BA2B3;
    background-color: #2C4080;
    color: #E8E6D5;
}

.categorias a:visited{
	color: #E8E6D5;
}

a.button{
    padding: 0.3em;
    border: solid 1px;
    /* display: block; */
    text-decoration: none;

	/* C */
	background-color:#e2e2e2;

}

a.u-url{
    font-size:0.9em;
}

ul#nav {
    display: block;
    /*margin: 0 5%;
    padding: 0;*/
    padding-left: 5%;
    padding-top: 0.2%;
    padding-bottom: 0.2%;
    list-style-type: none;
    font-family: 'EB Garamond', Garamond, serif;
    font-size: 1.2em;
}

ul#nav li {
    display: inline; /* make flat */
}

ul#nav a {
    display: block;
    float: left;
    padding: 0 1em;
    text-decoration: none;
    color: #999;
}
hr {
    border: 0;
    background-color: #999;
    height: 1px;
}

blockquote {
    padding: 0 2em;
    margin: 7px;
    border-left-style: solid;
    border-left-width: 4px;
    font-style: italic;
    /* C */
    background-color: #313433;
    border-left-color: #3E4984;
}

pre {
	font-size: 12px;
	border-width: 1px;
	border-style: solid;
	border-radius: 5px;
	/* C */
	border-color: #435161;
	background-color: #2D322D;
	padding: 5px;	
}

table{
	font-family: sans;
	font-size: 0.9em;
	border-width: 1px;
	border-style: solid;
	/* C */
	border-color: #59595A;
}

td{
	border-top-style: solid;
	border-width: 1px;
	padding: 11px;
	/* C */
	border-color: #59595A;
}

.headerlink {
    padding-left: 7px;
    font-size: 0.33em;
}

.headerlink:hover {
    font-size: 0.5em;
}


/* Code Hilite */
div.codehilite .hll { background-color: #3f3f3c }
div.codehilite  { background: #383838; }
div.codehilite .c { color: #408080; font-style: italic } /* Comment */
div.codehilite .err { border: 1px solid #FF0000 } /* Error */
div.codehilite .k { color: #30A020; font-weight: bold } /* Keyword */
div.codehilite .o { color: #7D7D7D } /* Operator */
div.codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
div.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
div.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
div.codehilite .cpf { color: #509090; font-style: italic } /* Comment.PreprocFile */
div.codehilite .c1 { color: #509090; font-style: italic } /* Comment.Single */
div.codehilite .cs { color: #509090; font-style: italic } /* Comment.Special */
div.codehilite .gd { color: #A00000 } /* Generic.Deleted */
div.codehilite .ge { font-style: italic } /* Generic.Emph */
div.codehilite .gr { color: #FF0000 } /* Generic.Error */
div.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
div.codehilite .gi { color: #00A000 } /* Generic.Inserted */
div.codehilite .go { color: #888888 } /* Generic.Output */
div.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
div.codehilite .gs { font-weight: bold } /* Generic.Strong */
div.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
div.codehilite .gt { color: #0044DD } /* Generic.Traceback */
div.codehilite .kc { color: #108020; font-weight: bold } /* Keyword.Constant */
div.codehilite .kd { color: #008050; font-weight: bold } /* Keyword.Declaration */
div.codehilite .kn { color: #20D020; font-weight: bold } /* Keyword.Namespace */
div.codehilite .kp { color: #20E030 } /* Keyword.Pseudo */
div.codehilite .kr { color: #508000; font-weight: bold } /* Keyword.Reserved */
div.codehilite .kt { color: #a04040 } /* Keyword.Type */
div.codehilite .m { color: #666666 } /* Literal.Number */
div.codehilite .s { color: #E2911D } /* Literal.String */
div.codehilite .na { color: #7D9029 } /* Name.Attribute */
div.codehilite .nb { color: #40D030 } /* Name.Builtin */
div.codehilite .nc { color: #2030FF; font-weight: bold } /* Name.Class */
div.codehilite .no { color: #880000 } /* Name.Constant */
div.codehilite .nd { color: #AA22FF } /* Name.Decorator */
div.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
div.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
div.codehilite .nf { color: #3891D3; } /* Name.Function */
div.codehilite .nl { color: #A0A000 } /* Name.Label */
div.codehilite .nn { color: #0920FF; font-weight: bold } /* Name.Namespace */
div.codehilite .nt { color: #20B000; font-weight: bold } /* Name.Tag */
div.codehilite .nv { color: #9957EC } /* Name.Variable */
div.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
div.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
div.codehilite .mb { color: #666666 } /* Literal.Number.Bin */
div.codehilite .mf { color: #666666 } /* Literal.Number.Float */
div.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
div.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
div.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
div.codehilite .sb { color: #CA5931 } /* Literal.String.Backtick */
div.codehilite .sc { color: #CA5931 } /* Literal.String.Char */
div.codehilite .sd { color: #CA3961; font-style: italic } /* Literal.String.Doc */
div.codehilite .s2 { color: #CA6131 } /* Literal.String.Double */
div.codehilite .se { color: #EB6622; font-weight: bold } /* Literal.String.Escape */
div.codehilite .sh { color: #BC3129 } /* Literal.String.Heredoc */
div.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
div.codehilite .sx { color: #008000 } /* Literal.String.Other */
div.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
div.codehilite .s1 { color: #CE9241 } /* Literal.String.Single */
div.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
div.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
div.codehilite .vc { color: #19177C } /* Name.Variable.Class */
div.codehilite .vg { color: #19177C } /* Name.Variable.Global */
div.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
div.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */