Team:ANU-Canberra/CSS

/* Website template by freewebsitetemplates.com */ @font-face { font-family: 'OpenSans'; src: url('../fonts/OpenSans-Regular.eot'); src: local('☺'), url('../fonts/OpenSans-Regular.woff') format('woff'), url('../fonts/OpenSans-Regular.ttf') format('truetype'), url('../fonts/OpenSans-Regular.svg') format('svg'); font-weight: normal; 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 ------------------------------*/

1. header {

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

1. header > div, #footer > div {

width: 920px; margin: 0 auto; padding: 0 20px; } /** Logo **/

1. header .logo {

float: left; margin-right: 20px; }

1. 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 **/

1. navigation {

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

1. navigation ul {

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

1. navigation li {

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

1. navigation li a {

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

1. navigation li a:hover {

color: #000; }

1. navigation li.active a {

color: #f99600; }

1. adbox {

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

1. adbox > div {

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

1. adbox > div img {

float: right; margin-left: 60px; }

1. adbox h1, #adbox h2 {

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

1. adbox h2 {

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

1. adbox p {

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

1. adbox p span {

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

1. adbox p span b {

font-weight: normal; display: block; width: 256px; } /*------------------------------ CONTENTS ------------------------------*/

1. 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; }

1. tagline h1 {

margin-left: 20px; }

1. tagline > div {

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

1. 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; }

1. about {

width: 740px; margin: 0 auto; }

1. 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 ------------------------------*/

1. footer {

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

1. footer p {

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

1. connect {

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

1. connect a {

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

1. connect a.googleplus {

background-position: 0 -40px; }

1. connect a.twitter {

background-position: 0 -80px; }

1. connect a.tumbler {

background-position: 0 -120px; }

1. connect a.facebook:hover {

background-position: -40px 0; }

1. connect a.googleplus:hover {

background-position: -40px -40px; }

1. connect a.twitter:hover {

background-position: -40px -80px; }

1. connect a.tumbler:hover {

background-position: -40px -120px; }