.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}




body { 
    background: #000; 
    color: #cccccc;
    font-family: 'Muli', Arial, sans-serif;
    overflow-y: scroll;
}

#wrapper { /** IE < 9 doesn't allow body width */
    width: 960px;
	position:relative; 
	margin-left:auto; 
	margin-right:auto;
    margin-top: 10px;
}

H1 {
    font-size: 40px;
}
H1, H2, H3, H4 { 
    text-transform: uppercase;
    font-weight: normal;
    font-family: 'Francois One', sans-serif;
}

p, a { 
    color: #dcdcdc;
}

#header_navbar {
    float: right;
}

#header_navbar a {
    float: left;
    color: #fff;
    opacity: 0.65;
    text-decoration: none;
}
#header_navbar div {
    float: left;
    margin-top: 2px;
    margin-right: 8px;
}

#header_navbar a:hover
{
    opacity: 0.9;
}

a.home      { width: 103px; }
a.download  { width: 130px; }
a.buy       { width: 83px; }
a.support   { width: 113px; }
a.forum     { width: 80px; }

.home_icon {
    background: url('../images/sprite.png') no-repeat -16px -16px;
    width: 18px;
    height: 14px;
}

.download_icon {
	background: url('../images/sprite.png') no-repeat -50px -16px;
	width: 12px;
	height: 13px;
}

.buy_icon {
	background: url('../images/sprite.png') -79px -16px;
	width: 19px;
	height: 16px;
}

.support_icon {
	background: url('../images/sprite.png') no-repeat -112px -16px;
	width: 17px;
	height: 17px;
}

.forum_icon {
	background: url('../images/sprite.png') no-repeat -144px -16px;
	width: 17px;
	height: 19px;
}

.oscillicious_logo {
    margin-top: 3px;
    margin-left: 2px;
    float: left;
    background: url('../images/sprite.png') no-repeat -17px -47px;
	width: 118px;
	height: 14px;
    opacity: 0.5;
}

.oscillicious_logo:hover {
    opacity: 0.7;
}


#driveby_social
{
    z-index: 10;
    display: none;
    position: absolute;
    right: 5px;
    top: -10px;
    float: right;
    text-align: center;
    padding: 0px;
    margin: 0px;
}

#driveby_social li
{
    display: inline;
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
}


.tagline
{
    text-align: center;
    text-shadow: 0px -3px 0px rgba(0, 0, 0, 0.8);
}

/** Workaround for IE */
div.clickable { /* Containing div must have a position value */
    position:relative;
}

div.clickable a {
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    text-decoration:none; /* Makes sure the link   doesn't get underlined */
    z-index:10; /* raises anchor tag above everything else in div */
    background-image: url('../images/1px.png'); /*workaround to make clickable in IE */
    opacity: 0; /*workaround to make clickable in IE */
    filter: alpha(opacity=1); /* workaround to make clickable in IE */
}
/** End of Workaround for IE */

#frosting
{
    float: left;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 5;
    position: fixed;
    background-color: #000;
    opacity: 0.95;
    display: none;
}

#lightbox
{
    float: left;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 6;
    position: fixed;
    text-align: center;
    cursor: pointer;
    display: none;
}

#lightbox_img
{
    /* width: 880; */
    pointer-events: none;
    z-index: 99;
    position: fixed;
    top: 50%;
    left: 50%;
    display: none; /* Hidden at first */
}
#lightbox_loading
{
    position: absolute;
    text-align: center;
    width: 100%;
    margin-top: 300px;
    z-index: -1;
}
#lightbox_close
{
    position: fixed;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 100;
}

.splash
{
    position: relative;
    padding-top: 60px;
     background: url('../images/splash_background_beach1.png') no-repeat; 
    /* background: url('../images/splash_background_dh2.png') no-repeat; */
    height: 655px;
    z-index: 0;
    margin-top: 10px;
}

.splash_description
{
    text-align: center;
    font-size: 21px;
    text-shadow: 0px -1px 0px #000;
}

.splash_screenshot
{
    width: 1px;
    height: 1px;
    float: left; 
    margin-left: -50px;
    margin-top: 20px; 
    z-index: 0;
}

/* Covers the screenshot exactly */
#splash_screenshot_magnifier
{
    float: left;
    position: absolute;
    margin-top: 85px;
    left: 60px;
    /* border: 1px solid #fff;  */
    width: 315px;
    height: 191px;
    cursor: pointer;
}

#splash_screenshot_magnifier_inner
{
    background: url('../images/sprite.png') no-repeat -169px -5px;
    width: 49px;
    height: 48px;
    pointer-events: none;
    margin: 0px auto;
    margin-top: 70px;
    display: none;
}

.splash_button_box
{
    margin-top: 33px;
    position: relative;
    width: 560px;
    float: right;
}

.button_box_button
{
    float: left;
    margin: 8px;
    margin-top: 20px;
    height: 50px;
    line-height: 52px;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    border: 1px solid #000;
    padding: 0px 20px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    font-size: 21px;
    color: #f0f0f0;
}

.button_box_button:active { opacity: 0.8; }
.button_box_button:hover  { 
    -webkit-filter: brightness(5%);
    filter: brightness(5%);
}

.button_box_hang
{
    text-transform: none;
    pointer-events: none;
    font-size: 12px;
    font-weight: normal;
    line-height: 36px;
    text-shadow: 0px 2px 0px #000;
}

.button_box_options
{
    font-size: 11px;
    margin-top: 35px;
    text-align: center;
}

.download_button
{
    margin-left: 90px;
    padding: 0px;
    width: 178px;
    background-image: url('../images/download_button_bg.png') ;
}

.buy_button
{
    background-image: url('../images/buy_button_bg.png') ;
}

.submit_override
{
    color: #dcdcdc;
    cursor: pointer;
    font-family: 'Muli';
}
.buy_page_buybutton
{
    margin-left: 129px; 
    width: auto; 
    padding: 0px 20px;
}


.icon_loop
{
    margin-right: 15px;
    margin-top: 4px;
    float: left;
    background: url('../images/sprite.png') no-repeat -19px -76px;
    width: 52px;
    height: 51px;
}

.icon_guitar
{
    margin-right: 10px;
    margin-top: -3px;
    float: left;
    background: url('../images/sprite.png') no-repeat -76px -72px;
    width: 41px;
    height: 59px;
}

.icon_controller
{
    margin-right: 12px;
    margin-top: 3px;
    float: left;
    background: url('../images/sprite.png') no-repeat -127px -77px;
    width: 50px;
    height: 50px;
}

.icon_midi
{
    margin-right: 12px;
    margin-top: 10px;
    float: left;
    background: url('../images/sprite.png') no-repeat -188px -90px;
    width: 70px;
    height: 37px;
}

.feature_quadbox
{
    position: relative;
    float: left;
    margin-left: 30px;
    width: 224px;
    z-index: 2;
}

.feature_quadbox a 
{
    text-transform: none;
    font-family: 'Muli', Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none; 
    border-bottom: 1px dotted #a3a3a3;
}

.feature_quadbox p
{
    margin-top: 5px;
    font-size: 12px;
}

.feature_box
{
    float: left;
    background: #272727;
    border: 1px solid #b6b6b6;
    padding: 0px;
    padding-left: 5px;
    padding-top: 15px;
    height: 235px;
}
.feature_box h2
{
    margin: 0px;
    margin-top: 5px;
    padding: 0px;
}

.sub_splash
{
    border: 1px solid #000;
    border-radius: 5px;
    padding: 5px 0px 0px 15px;
    background: url('../images/splash_sub_background1.png') no-repeat;
    margin-left: 250px;
    text-shadow: 0px 1px 0px #000;
    margin-bottom: 40px;
}

.sub_splash h1
{
    margin: 0px;
    padding: 0px;
}

.audience_triplebox
{
    float: left;
    width: 253px;
    margin-left: 95px;
    text-align:justify;
    text-justify:inter-word;

}

.audience_triplebox h1
{
    margin-bottom: 0px;
    text-align: center;
}

.audience_triplebox_learnbutton
{
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    font-size: 1.2em;
    text-shadow: 0px 0px 3px #000;
    padding: 10px;
    width: 200px;
    margin: 30px auto;
    text-align: center;
    -webkit-box-shadow: inset 0px 0px -1px #000;
}


.learnmore1 { background-image: url('/images/learnmore1.png'); }
.learnmore2 { background-image: url('/images/learnmore2.png'); }
.learnmore3 { background-image: url('/images/learnmore3.png'); }


.testimonial
{
    text-align: center;
    font-family: 'MuliItalic';  
    font-size: 28px;
    margin: 0px;
}

.testimonial_author
{
    margin: 0px;
    text-align: center;
    font-size: 18px;
}


.breather
{
    text-shadow: 0px -2px 0px #000;
    margin-top: 100px;
    background-color: #1a1a1a;
    text-align: right;
    padding: 20px;
    padding-right: 35px;
}

.breather h2 
{
    font-size: 41px;
    margin: 0px;
    padding: 0px;
    color: #aaa;
}

.guicollage
{
    float: left;
    width: 253px;
    height: 77px;
    border: 1px solid #000;
    border-left: 1px solid #888;
    border-radius: 5px;
    margin-left: 95px;
    -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

.guicollage_first  { background: url('../images/guicollage2.png'); }
.guicollage_second { background: url('../images/guicollage1.png'); }
.guicollage_third  { background: url('../images/guicollage3.png'); }

.guicollage_desc
{
    float: left;
    width: 253px;
    margin-left: 96px;
}

.guicollage_magnifier
{
    float: left;
    position: absolute;
    /* border: 1px solid #fff;  */
    width: 253px;
    height: 77px;
    margin-left: 95px;
    cursor: pointer;
}

.guicollage_magnifier_inner
{
    background: url('../images/sprite.png') no-repeat -169px -5px;
    width: 49px;
    height: 48px;
    pointer-events: none;
    margin: 0px auto;
    margin-top: 20px;
    display: none;
}


.creativity_triplebox
{
    float: left;
    width: 31%;
    margin-right: 15px;
}

.instruments_quadbox
{
    position: relative;
    float: left;
    margin-left: 30px;
    width: 212px;
    z-index: 2;
}

.features_grid
{
    background-color: #0c0c0c;
    border: 1px;
    border-radius: 5px;
}

.features_grid_column
{
    float: left;
    width: 280px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 30px;
    font-size: 14px;
}

.features_grid_row h3
{
    margin: 0px;
    padding-left: 4px;
    text-shadow: 0px -2px 0px #111;
    background-color: #141414;
}
.features_grid_row p
{
    margin: 0px;
    padding-left: 4px;
    text-shadow: 0px -1px 0px #000;
}

.features_grid_row
{
    margin-bottom: 30px;
}

#last_call
{
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

#last_call h2
{
    margin: 0px;
}

#purchase_form p
{
    text-align: center;
    font-size: 1.3em;
}

#social_media
{
    padding-top: 15px;
    text-align: center;
    margin: 0px auto;
    width: 127px;
    /*width: 85px; /* the twitter button has a messed up width */
}

#footer_sitemap
{
	margin: 0px auto;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    text-align: center;
    color: #888888;
    font-size: 0.7em;
}

.footer_sitemap_column h2
{
    font-size: 1.0em;
    font-weight: bold;
}

.footer_sitemap_column
{
    vertical-align: top;
    display: inline-block;
	width: 150px;
	margin: 0px auto;
	border: 0px dashed;
    text-align: left;
}
#footer_legal
{
    font-size: 0.7em;
    text-align: center;
}