light.css

@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
@import url('http://fonts.googleapis.com/css?family=Josefin+Sans');

body {
 font-family: Quicksand, Helvetica, Arial, sans-serif;
 background-color: #F7F7F7;
 font-weight: 300;
 font-size: 16px;
 color: #555555;
 width: 100%;
 margin: 0;
}

#navbar {
 height: 2em;
 width: 100%;

 background-color: #D3360B;
 background-image: -moz-linear-gradient(top,  #D3360B 0%, #C2260D 100%);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D3360B), color-stop(100%,#C2260D));
 background-image: -webkit-linear-gradient(top,  #D3360B 0%,#C2260D 100%);
 background-image: -o-linear-gradient(top,  #D3360B 0%,#C2260D 100%);
 background-image: -ms-linear-gradient(top,  #D3360B 0%,#C2260D 100%);
 background-image: linear-gradient(to bottom,  #D3360B 0%,#C2260D 100%);
}

#navbar div { float: left; margin: 0.25em 0; padding: 0 0.5em;
  border-right: 1px solid #FFAA88; }
#navbar div.tooltip { border-right: 1px solid #6F1607; }
#navbar .nob { border-right: none; }

#navbar a { font-weight: bold; color: white; }
#flags li { width: 2.5em; text-align: center; }

#navbar #about hr { display: block; border-color: #C2260D; }
#navbar #about .tooltip a { color: #C2260D; text-decoration: underline; }

#cc_by_sa { height: 31px; width: 88px; margin-left: 55px; }

#sidebar { background: #F3562B; color: white; }
#sidebar .content { width: 100%;  text-align: left; }
#sidebar p { margin: 0; }

ul li {
  line-height:20px; margin: 1px; padding: 1px;
  pointer: cursor; color: white; width: 10em;
}
li:hover { background-color: #D3360B; }

.group {
  color: #999999;
  border: 1px solid silver;
  width: 14em;
  margin: 1em auto;
  background: #F7F7F7;
}
.item {
  color: #333333;
  background: #EEEEEE;
  width: 10em;
  padding: 1em;
  margin: 0.75em;
}

.group, .item {
  transition: box-shadow 0.75s ease;
  border-radius: 2px;
}

.group:hover {
  box-shadow: #888888 0px 0px 10px;
  color: #555555;
}

.item:hover {
  box-shadow: inset #888888 0px 0px 10px;
}

.active, .focus, .item.active { background-color: #FFAA88; }
.tooltip { display:none; text-align: left; }
div:hover > .tooltip { display: block; }
li:hover > .tooltip { display: block; }

.tooltip, .up:hover, .down:hover, .ret:hover {
  border: 1px outset #C3270D;
  background-color: #FFAA88;
  position: absolute;
  color: #C3270D;
  font-size: 80%;
  padding: 3px;
  height: auto;
  width: 16em;
  z-index: 42;
}

.up, .down, .ret, .nodown, .noup {
 width: 2em;
 height: 1.5em;
 overflow: hidden;
 font-size: 80%;
}

.up, .noup, .fr { float: right; }
.down, .ret, .nodown { float: left; }
.up:before { content: '\2191' }
.down:before { content: '\2193' }
.ret:before { content: '\21B3' }
.ret { width: 1em; }

.tooltip, .up, .down, .ret {
  font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;
}

h1,h2,h3,h4,h5,h6{
 margin: 0;
 font-family: "Josefin Sans", Helvetica, Arial, sans-serif;
 font-weight: bold;
}

p {
  margin: 0.25em 1em 1em 1em;
  word-wrap: break-word;
  clear: both;
}
p.help {
  font-size: 75%;
  width: 90%;
}
p.breaking {
 padding: 0.25em 0.5em;
 background: #FAFAFA;
 border-top: 1px solid silver;
 border-bottom: 1px solid silver;
}

img {
 border:0;
 width:auto;
 height:auto;
 max-width:100%;
 vertical-align:middle;
 -ms-interpolation-mode:bicubic;
}
a img { width: 16px; height: 16px; }

ul {
 clear:both;
 padding:0;
 margin: 0;
}

ul { list-style-type: none; }
ul ul,ul ol,ol ol,ol ul { margin-bottom:0; }

hr { clear:both; }
.fl { float:left; margin-left:1em; }

h1 { font-size:32px; line-height:45px; font-weight:300;
     font-family: Quicksand, Helvetica, sans-serif;
     text-align: center; }
h2 { font-size:28px; line-height:32px; font-weight:400;
     margin-top: 0.5em; }
h3 { font-size:20px; line-height:32px; font-weight:400;
     padding-left: 0.5em; }

a { color:#D3360B; text-decoration:none; font-weight:500; }
a:hover { color:#F3562B; text-decoration:underline; }

h3 a { font-weight:700; }
a.wp {
 padding-left: 20px;
 font-family: serif;
 background-image: url("img/wikipedia.ico");
 background-repeat: no-repeat;
}

li.cat { margin-top: 0.75em; }

.content {
 text-align: center;
 margin: 0 1em;
 clear: both;
}

.short { display: none; }
.alt { display: none; }
.tab {display: none;}

@media screen and (min-width:870px) {
 #title {
  position:absolute;
  left: 20%;
 }
 #page {
  position:absolute;
  left: 25%;
  top: 6em;
 }
 #sidebar {
  width: 190px;
  position: absolute;
 }
}

#GitHubFork {
 background: url("https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png");
 position: absolute;
 text-align: right;
 height: 149px;
 width: 149px;
 border: none;
 z-index: 42;
 right: 0;
 top: 0;
}

@media screen and (max-width:870px) {
 #sidebar {
  position: relative;
  padding: 0.25em;
  min-height: 7.5em;
  margin: auto;
 }

 #sidebar h2 { display: none; }
 hr, li.cat { display: none; }
 ul li { float: left; }

 #sidebar { min-height: 10em; }
 #sidebar .content { margin: 0 auto; }
}

@media screen and (max-width:700px) {
 #sidebar { min-height: 13em; }
}

@media screen and (max-width:600px) {
 .tab { display: inline; }
 p.tab { display: block; }
 .lng { display: none; }
 #GitHubFork { display: none; }
 #sidebar .keywords { display: none; }
 #sidebar { min-height: 7em; }
}

@media screen and (max-width:450px) {
 .txt { display: none; }
 .short { display: inline; }
 ul li { float: left; width: 47%; }
}