screen.css

/* 
	Developed for Coder Society.
	No rights reserved. 
*/

/* Basic layout classes */

.left { 
    float: left;
}

.right { 
    float: left;
}

.clear { 
    clear: both;
    margin: 0;
    padding: 0;
    height: 0;
    width: 0;
}

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

.hidden { display: none; }

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


/* Site Defaults */

* {
    -webkit-font-smoothing: antialiased;
    border: 0;
    vertical-align: baseline;
}

h1, h2, h3, h4, h5, h6, h1.a, h2.a, h3.a, h4.a, h5.a, h6.a {
    font-family: 'Holtwood One SC', serif;
}

ol, ul {
    list-style: none; 
    margin: 0.5em 0.75em;
    padding: 0;
}

ol.noindent, ul.noindent { 
   margin: 0.5em 0em;
}

blockquote, q {
    quotes: none; 
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none; 
}

table {
    border-collapse: collapse;
    border-spacing: 0; 
}

html {
    background: #7F171F; 
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: #46468C;
}

body {
    margin: 0;
    padding: 0;
    color: #464646;
}

body div.content {
    width: auto;
    padding: 1em 10% 0;
    font-family: 'Open Sans', sans-serif;
}
body div.banner { 
    background: #FFF;
    width: auto;
    padding: 1em 10%;
    font-family: 'Open Sans', sans-serif;
}
body div.footer { 
    /*background: #685642;*/
    color: #F7F6F4;
    width: auto;
    padding: 1em 10%;
    font-family: 'Open Sans', sans-serif;
}

body div.content div.banner h1 {    
    font-size: 3em;
    border-top: solid 0.25em #F4F0CB;
    border-bottom: solid 0.25em #F4F0CB; 
    margin: 0.25em 0;
}

span.nav {    
    margin: 0.25em 0; 
    font-size: 1.5em;
    font-weight: bold;
}

div.columns {
	width: 100%;
  /*padding: 1%;*/
}

div.columns, div.column {
	min-height: 600px;
	height: 100%;
  position: relative;
  float: left;
}

div.columns.create {
    overflow: hidden;
}

div.columns .group {
    right: 33.3333333%;
}
div.columns .vote {
    right: 33.3333333%;
}

div.column {
	width: 33.3333333%;
  left: 66.6666666%;
}
div.column.create {
  left: 67%;
}

div.column h2  {
	border-bottom: .125em solid #F4F0CB;
}

.vote {
	background-color: #EFDD6F;
}
.group{
	background-color: #E49135;
}
.create{
	background-color: #EFDD6F;
}
div.section { 
  margin-left: 5%;
  margin-right: 5%;
}

/* section contents */


a.github-user,
a.tweet {
  display:block;
  height:64px;
  width:64px;
  margin: 0px 4px 4px 0px;
  float:left;
  position: relative;
  }

.thumb {
  display:block;
  height:64px;
  width:64px;
  background:white 50% 50% no-repeat;
  background-size:64px;
  border-radius: 5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border: solid 1px darkgrey;
  }

.popup {
  display:none;
  position:absolute;
  right:-235px;
  top:-5px;
  width:180px;
  padding:5px 20px 5px 10px;
  background:black;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }

.popup * { color:#fff; }

.popup small {
  display: block;
  font-size: 12px;
  }

.tweet:hover,
.github-user:hover { z-index: 200; }
.tweet:hover .caret,
.tweet:hover .popup,
.github-user:hover .caret,
.github-user:hover .popup { display:block; }

.buttons {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 64px;
  }

.buttons a {
  text-align:center;
  font-size: 1em;
  font-weight: bold;
  line-height:24px;
  display:block;
  margin:0;
  padding:0;
  padding:4px;
  color: white;
  background: #4183C4; /*#6ab;*/
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  }

.watch-docs {
  opacity:0;
  z-index:-1000;
  font-size:12px;
  position:absolute;
  /*top:-20px;
  left:-320px;*/
  margin-top: 5px;
  width:275px;
  background:white;
  border:2px solid #CACACA;
  padding:15px 15px 10px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  transition:opacity .25s, z-index 0s .25s;
  -moz-transition:opacity .25s, z-index 0s .25s;
  -webkit-transition:opacity .25s, z-index 0s .25s;
  }

  .watch-docs.active {
    opacity:100;
    z-index: 200;
    transition:opacity .25s, z-index 0s 0s;
    -moz-transition:opacity .25s, z-index 0s 0s;
    -webkit-transition:opacity .25s, z-index 0s 0s;
    }

  .watch-docs ol {
    list-style-type:decimal;
    padding-left:20px
    }

  .watch-docs img {
    margin:10px 15px 0px;
    text-align:center;
    }

.editing {
  font-size:11px;
  line-height:16px;
  }
  
  small {
    font-style: italic; 
    display: block;
    margin-bottom: 10px;
}

.event .description a {
  font-weight: bold;
}