mozilla-club-activity-ping-kong/stylesheets/styles.css

.queue {
  max-width:100%;
}

img {
  max-width: 100%;
  width: 100%;
}

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  margin-left:auto;
  margin-right:auto;
  max-width:85%;
}

.wrapper > * {
  flex: 1 100%;
}

.footer {
  background: #eee;
  min-height:55px;
  text-align: right;
  padding:20px 0px;
}

.footer a:link{
  float:right;
}

.main {
  text-align: left;
  background: white;
}

hgroup{
  padding:20px 50px 0px 50px;
}

.main div.line{
  background-color:#3fb58e;
  height: 55px;
  padding:0px 0px 5px 0px;
}

.line p, .agenda p{
  font-weight: 300;
}

.line p{
  padding:11px 50px;
  color:white;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}
.aside {
  background: #013E5F;
  width:5%;
  padding:0;
  color:white;
  font-size: 1.3em;

}

.aside img{
  width:100%;
}

.attribution {
  bottom: 10px;
  color: #eee;
  opacity: 0.5;
  position: relative;
  top: -30px;
  transition: all 0.2s ease 0s;
  float: right;
  right: 15px;
}

.license a:link{
  float:left;
}

.goals{
  padding:10px 20px;
}

.goals ul, .literacy{
  margin-bottom:10%;;
}

.goals ul, .agenda ul{
  padding-left:0;

}

.agenda>ul>li>div, footer {
  padding:20px 50px;
}

.goals ul li, .goals p{
  list-style-position:inside;
  list-style-type: square;
  font-weight:300;
  font-size:.9em;

}

.agenda>ul>li{
  list-style-position:inside;
  list-style-type: none;
  border-bottom: 1px solid #eee;
}

.agenda ul li ul{
  padding-left:10px;}

.time{
  width:60px;
  height:60px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #3fb58e;
  float:right;
  padding:0;
}

.time p{
  font-weight: 300;
  text-align: center;
  font-size: 1.3em;
  line-height: 115%;
  margin-top:10%;
}

hr {
  color: #FF4E1F;
  background: #FF4E1F;
  width: 75%;
  height: 5px;
}

.sessions {
  background: #FFF1C5;
}

.start {
  margin-top:10%;
  text-align: right;
}

.coming-soon {
  background-color:#F5F5F5;
  border: 5px dashed #E3EAEE;
}

.img-example {
  width: 100%;
  padding-bottom: 7px;
}

figcaption{
  font-size:.8em;
  font-weight: 300;
  font-style: italic;
  color: #4d4e53;
  padding-bottom:2%;
  float:right;
}

.img-thumbnail {
  width: 30%;
  float:left;
}

.literacy-color-credibility, .literacy-color-search, .literacy-color-composing{
  color:white;
}

.literacy-color-credibility{
  background-color: #FF5984;
}
.literacy-color-search{
  background-color: #fe4040;
}

.literacy-color-composing{
  background-color: #01bc85;
}
.literacy-color-practices{
  background-color: #0097d6;
}

.literacy-color-webmechanics{
  background-color: #FF6969;
  color: white;
}

.literacy-color-navigation{
  background-color: #FF4E1F;
  color: white;
}

.literacy-color-remixing{
  background-color: #00CEB8;
  color: white;
}

.literacy-color-open-practices{
  background-color: #0097d6;
  color: white;
}

.literacy-color-sharing{
  background-color: #739ab1;
  color: white;
}

.literacy-color-community-participation{
  background-color: #63cfea;
  color: white;
}

.literacy-color-collaborating{
  background-color: #506b7b;
  color: white;
}
.literacy-color-privacy{
  background-color: #00bad6;
  color: white;
}
.literacy-color-security{
  background-color: #ff004e;
  color: white;
}
.literacy-color-designing{
  color: white;
}


.socialBtns {
  float:right;
  width:120px;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .footer  { order: 3; }
}

body {
  padding: 2em;
  background-color:#f1f1f1;
}
.leadTime {
  background-color:#3fb58e;
  padding:5px;
  text-align:center;
  color:white;
}

.small{
  font-style: italic;
  color: #FFF;
  padding-bottom: 10%;
}
.exampleIcon{
  float:left;
  margin-right:2%;
  width: 125px;
  clear: both;
}

.activity-instructions {
  padding: 20px 50px;
  font-weight: 300;
}


.activity-instructions hr {
  content: "";
  width: 100%;
  height: 1px;
  padding: 0;
  margin: 0;
  background-color: #eee;
}


.leadTime:before {
  font-family: FontAwesome;
  content: "\f017";
  display: inline-block;
  padding-right: 10px;
  vertical-align: middle;
}

.time {
  text-align: center;
  vertical-align: middle;
  margin-top: 10px;
}

.aside {
  width: 10%;
}

blockquote {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #F5F5F5;
  border: 1px solid #E3E3E3;
  border-radius: 0px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) inset;
}