Form Submit buttons

by Kyle Falconer

HTML

<script src="http://missouristate.info/styles/2013/global.aspx?debug=true"></script>
<script src="http://missouristate.info/scripts/2013/common_uncompressed.js"></script>
<div class="Desktop">
    <form action="#" method="get" onsubmit="return false;">
        <div class="SearchBox">
            <div class="input">
                <input type="search" autofocus name="q" id="q" />
            </div>
            <div class="Buttons">
                <div class="submit" id="SearchSubmit"><span class="MobileIconSprites SearchIcon"></span>

                </div>
                <div class="index" id="SiteIndexToggle"><span class="MobileIconSprites SiteIndexIcon"></span>

                </div>
            </div>
        </div>
    </form>
    <div class="spacer"></div>
    <div class="SpriteTest">
        <div class="MobileIconSprites SiteIndexIcon"></div>
    </div>
    <div class="SpriteTest">
        <div class="MobileIconSprites SearchIcon"></div>
    </div>
</div>

CSS

.SpriteTest {
    display:inline-block;
    background-color:#80151b;
    padding:5px;
    margin:10px;
}
.spacer {
    display:block;
    height:50px;
}
.input {
    overflow: hidden;
}
.input input {
    padding:8px;
    width:100%;
}
.SearchBox {
    padding-left: 5px;
    padding-right: 5px;
}
.submit {
    float:right;
    width:90px;
    position: relative;
    left: -2px;
}
.Desktop .SearchBox .input {
    margin-right:90px;
}
.Desktop .SearchBox .Buttons {
    min-width:90px;
    overflow:hidden;
    float:right;
    position:relative;
    top:-40px;
}
.Desktop #SearchSubmit {
    display:inline-block;
    width:90px;
    height:40px;
    color: white;
    background-color: #80151b;
    border-width: 0;
    text-decoration: none;
    font-size: 15px;
    line-height: 19px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin-right: 0;
}
.Desktop #SearchSubmit:before {
    display:inline-block;
    position: relative;
    top: 8px;
    width:100%;
    text-align:center;
    content:'Search';
    font-family:'PT-Sans', Arial, Helvetica, Sans-Serif;
    font-weight:bold;
    font-size:15px;
    line-height:24px;
}
.Desktop #SearchSubmit .SearchIcon, .Desktop #SiteIndexToggle .SiteIndexIcon {
    display:none;
}
.SearchBox .Buttons>* {
    cursor:pointer;
}
.Phone .SearchBox .input, .Tablet .SearchBox .input {
    margin-right:130px;
}
.Phone .SearchBox .Buttons, .Tablet .SearchBox .Buttons {
    width:130px;
    overflow:hidden;
    float:right;
    position:relative;
    top:-40px;
}
.Phone #SearchSubmit, .Phone #SiteIndexToggle, .Tablet #SearchSubmit, .Tablet #SiteIndexToggle {
    display:inline-block;
    width:60px;
    height:40px;
    color: white;
    background-color: #80151b;
    border-width: 0;
    text-decoration: none;
    font-size: 15px;
    line-height: 19px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
#SearchSubmit {
    float:left;
   ...