@charset "utf-8";
/* CSS Document */

@import url(//fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,400italic,700,700italic);

body {
    margin: 0;
}
.blackbox {
    background-color:#000000;
}
.greybox {
    background-color:#222;
}
.whitebox {
    background-color:#f5f5f5;
}
.boxarea {
    width:93%;
    padding:50px;
}
.spacer {
    width:100%;
    padding:10px;
    display: block;
}



/*-----button styles---*/

.razer-bttn {
    font-family: 'Titillium Web', sans-serif;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-left: 2px solid #00ff00;
    padding: .5em .8em;
    margin: 2px;
    display: inline-block;
    background-color: #00a000;
}
.razer-bttn:hover {
     opacity: .7;
     color: #fff;
}

.razer-bttn:after {
  content: " >";
  color: #00ff00;
  bottom: 20px;
} 



.bttn-small {
    font-size: 10px;
}
.bttn-medium {
    font-size: 14px;
}
.bttn-large {
    font-size: 19px;
}
.bttn-xlarge {
    font-size: 24px;
    padding: 1em 1.2em;
}

.bttn-grey {
    background-color: #444;
}
.bttn-grey:after {
  content: none;
} 
.bttn-disabled {
    font-family: 'Titillium Web', sans-serif;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-left: 2px solid #00ff00;
    padding: .5em .8em;
    margin: 2px;
    display: inline-block;
    background-color: #00a000;
    border-left: none;
    background-color: #555;
    opacity: .3;
}
.bttn-disabled:after {
  content: none;
}