Team:ANU-Canberra/CSS

/* Website template by freewebsitetemplates.com */ @font-face {

  font-family: 'Avenir';
  font-style: normal;

}

@font-face {

   font-family: 'Play';
   src: url('../fonts/Play-Regular.eot');
   src: local('☺'), url('../fonts/Play-Regular.woff') format('woff'), url('../fonts/Play-Regular.ttf') format('truetype'), url('../fonts/Play-Regular.svg') format('svg');
   font-weight: normal;
   font-style: normal;

}

body {

   background-color: fff;
   font-family: 'OpenSans';
   margin: 0;

}

img {

   border: 0;

}

.clearfix:after, contents:after {

   clear:both;
   content:"";
   display:block;
   height:1%;
   line-height:0;
   visibility:hidden;

}

.btn {

  background: url(../images/bg-button.png) no-repeat;
  background-position: 0 -70px;
  color: fff;
  display: inline-block;
  font: 24px/60px 'OpenSans';
  height: 60px;
  width: 230px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

}

.btn:hover {

  background-position: 0 0;

}

/*------------------------------ HEADER ------------------------------*/

header {

  background-color: eee;
  border-bottom: 1px solid e6e6e6;
  padding: 27px 0;

}

header > div, footer > div {

  width: 920px;
  margin: 0 auto;
  padding: 0 20px;

}

/** Logo **/ header .logo {

  float: left;
  margin-right: 20px;

} header .logo a {

  background: url(../images/logo.png) no-repeat center top;
  color: 000;
  display: block;
  font: 15px/30px 'Play';
  height: 20px;
  width: 76px;
  padding-top: 68px;
  text-decoration: none;
  text-transform: uppercase;

} /** Navigation **/ navigation {

  display: inline-block;
  list-style: none;
  line-height: 100px;
  margin: 0;
  padding: 0;

} navigation ul {

  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;

} navigation li {

  float: left;
  width: 160px;
  text-align: center;

} navigation li a {

  color: 818181;
  font-size: 15px;
  line-height: 30px;
  text-decoration: none;

} navigation li a:hover {

  color: 000;

} navigation li.active a {

  color: f99600;

} adbox {

  background: url(../images/bg-adbox.jpg) repeat-x left top;
  height: 380px;
  padding: 60px 0;

} adbox > div {

  width: 800px;
  margin: 0 auto;
  padding: 0 80px;

} adbox > div img {

  float: right;
  margin-left: 60px;

} adbox h1, adbox h2 {

  color: 2c2c2c;
  font-size: 60px;
  line-height: 60px;
  margin: 0;
  text-transform: uppercase;

} adbox h2 {

  font-size: 30px;
  line-height: 36px;
  text-transform: none;

} adbox p {

  font-size: 16px;
  line-height: 24px;
  margin: 0;

} adbox p span {

  display: block;
  font-size: 12px;
  width: 360px;
  padding: 24px 0;
  text-align: center;

} adbox p span b {

  font-weight: normal;
  display: block;
  width: 256px;

} /*------------------------------ CONTENTS ------------------------------*/ contents {

  min-height: 510px;
  width: 880px;
  margin: 0 auto;
  padding: 54px 40px;

} h1 {

  color: 3e3e3e;
  font-size: 30px;
  font-weight: normal;
  line-height: 30px;
  margin: 0 0 30px;

} h2 {

  color: 2c2c2c;
  font-size: 24px;
  font-weight: normal;
  line-height: 24px;
  margin: 0 0 12px;

} p {

  color: 585858;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 30px;

} p a {

  color: 585858;

} tagline h1 {

  margin-left: 20px;

} tagline > div {

  float: left;
  width: 400px;
  margin: 0 20px;

} contents .features {

  width: 810px;
  margin: 0 auto;

} .features > div {

  display: inline-block;
  margin: 0 0 30px;

} .features > div img {

  float: left;
  margin-right: 20px;
  margin-top: 36px;

} .date {

  float: left;
  height: 78px;
  width: 70px;
  margin-right: 20px;
  border: 1px solid d5d5d5;
  text-align: center;

} .date p {

  margin: 12px 0 0;

} .date p span {

  display: block;
  font-size: 30px;
  margin-bottom: 6px;

} .author {

  color: 585858;
  display: block;
  font-size: 12px;

} .more {

  background-color: 727272;
  color: fff;
  display: inline-block;
  font-size: 14px;
  line-height: 30px;
  width: 100px;
  text-align: center;
  text-decoration: none;

} .more:hover, .message input[type='submit']:hover {

  background-color: f99600;
  color: 000;

} /** main **/ .main {

  float: left;
  background: url(../images/divider.png) repeat-y right top;
  min-height: 100px;
  width: 620px;
  padding-right: 24px;

} .main h1, .sidebar h1 {

  margin: 0 0 12px;
  position: relative;
  top: -18px;

} .main h2 span {

  display: block;
  font-size: 12px;

} /** sidebar **/ .sidebar {

  float: left;
  min-height: 848px;
  width: 216px;
  margin-left: 20px;

} .sidebar ul, .news {

  list-style: none;
  margin: 0;
  padding: 0;

} .news li {

  border-top: 1px solid d5d5d5;
  padding: 24px 30px 0 100px;
  position: relative;

} .news li .date {

  float: none;
  position: absolute;
  left: 0;
  top: 30px;

} .news li > p span, .post > span {

  display: block;
  text-align: right;

} .posts {

  border-top: 1px solid d5d5d5;

} .posts li {

  border-bottom: 1px solid d5d5d5;
  padding: 24px 10px 0;

} .posts li p {

  font-size: 14px;

} .posts li .title {

  font-size: 16px;
  font-weight: normal;
  margin: 0 0 12px;

} .posts li .title a {

  color: 2c2c2c;
  font-size: 16px;
  text-decoration: none;

} .post {

  width: 785px;
  margin: 0 auto;

} .post h1 {

  padding-top: 12px;

} about {

  width: 740px;
  margin: 0 auto;

} about h1, .section h1 {

  border-bottom: 1px solid e0e0e0;
  padding-bottom: 12px;

} .section {

  float: left;
  width: 390px;
  margin-right: 50px;

} .section h1 {

  margin-bottom: 18px;

} .message input[type='text'], .message textarea {

  color: aeaeae;
  font-size: 13px;
  height: 33px;
  line-height: 33px;
  width: 380px;
  border: 1px solid d5d5d5;
  margin: 0 0 6px;
  padding: 0 4px;

} .message textarea {

  height: 175px;
  overflow: auto;
  resize: none;

} .message input[type='submit'] {

  float: right;
  background-color: 818181;
  color: d5d5d5;
  cursor: pointer;
  font: 13px/30px Arial, Helvetica, sans-serif;
  height: 30px;
  border: 0;
  margin: 0;
  padding: 0 10px;

} .contact {

  background-color: f8f8f8;
  width: 270px;
  padding: 124px 60px;
  text-align: center;

} .contact p span {

  color: 2c2c2c;
  display: block;
  font-size: 30px;
  line-height: 36px;
  padding: 18px 0;

} /*------------------------------ FOOTER ------------------------------*/ footer {

  background-color: eee;
  border-top: 1px solid d8d8d8;
  padding: 30px 0;

} footer p {

  font-size: 12px;
  line-height: 30px;
  padding-left: 10px;

} connect {

  float: right;
  display: inline-block;
  margin-right: 30px;

} connect a {

  background: url(../images/icons.png) no-repeat;
  display: inline-block;
  height: 30px;
  width: 30px;
  margin: 0 10px;

} connect a.googleplus {

  background-position: 0 -40px;

} connect a.twitter {

  background-position: 0 -80px;

} connect a.tumbler {

  background-position: 0 -120px;

} connect a.facebook:hover {

  background-position: -40px 0;

} connect a.googleplus:hover {

  background-position: -40px -40px;

} connect a.twitter:hover {

  background-position: -40px -80px;

} connect a.tumbler:hover {

  background-position: -40px -120px;

}