Perfect Order

by arunzo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>
    <div class="header">
        <div class="logo-cont">
            <img class="img-responsive parker-caption pull-right" src="img/parker_tagline.jpg" alt="Engineering your success">
            <img class="img-responsive " src="img/home_logo.jpg" alt="Parker Online">
        </div>
        <div class="orange-bar"></div>
        <div class="help-nav"> <a class="hidden-print" href="#">Help</a>

        </div>
        <div class="parker-page-title">
            <p>Perfect Order Dashboard</p>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <div class="focus-control-list">
                    <div class="focus-control-header"> <strong>
                                        <span id="lblCountryRegion">Country/Region</span></strong>

                    </div>
                    <div class="focus-control-content">
                        <select name="ctl00$ddlRegionCountry" id="ddlRegionCountry" class="form-control focus-control-dropdown"></select>
                    </div>
                </div>
                <div class="focus-control-list">
                    <div class="focus-control-header"> <span id="lblFocusCtrl">&nbsp;&nbsp;Focus</span>

                    </div>
                    <div class="focus-control-content">
                        <div class="center-block focus-gdl">
                            <select name="ctl00$ddlGroup" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ddlGroup\',\'\')', 0)" id="ddlGroup" class="form-control focus-control-dropdown"></select> <span id="MasterGrpValidator" class="Error-star hidden" style="visibility:hidden;">*</span>

                            <select name="ctl00$ddlDivision" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ddlDivision\',\'\')', 0)" id="ddlDivision" disabled="disabled"...

CSS

body {
    font-size: 11px !important;
    background-attachment: fixed;
    background-repeat: repeat-y;
    font-family: verdana, arial, helvetica, sans-serif !important;
    background-color: #fff;
    color: #333;
    line-height: 20px;
    margin: 0;
    padding: 0;
}
.logo-cont {
    height: 60px;
}
.orange-bar {
    height: 25px;
    min-width: 0;
    background-color: #ffae00;
}
.help-nav {
    padding-top: 3px;
    padding-bottom: 4px;
    background-color: #000;
    height: 25px;
}
.help-nav >a, .help-nav >a:hover {
    padding-right: 8px;
    color: #FFF;
    float: right;
    clear: both;
}
.parker-page-title {
    background-color: #F5F5F5;
}
.parker-page-title>p {
    display: block;
    margin:0 auto;
    padding:0 2px;
    font-weight: 550;
    font-size: larger;
    text-align: center;
}
.container-fluid {
    margin-top:12px;
}
.focus-controls {
    padding-top: 0;
}
.focus-control-header {
    padding-left: 10px;
    border-radius: 5px 5px 0 0;
    background-color: #BACBDA;
    font-weight: 700;
    text-align: left;
    behavior: url(Styles/PIE.htc);
}
.focus-control-content {
    padding-right: 5px;
    padding-bottom: 0;
    padding-left: 5px;
    border-color: #BACBDA;
    border-style: solid;
    border-width: 1px;
}
.focus-control-dropdown {
    width: 100%;
    line-height: 15px;
    margin-top: 3px;
    margin-bottom: 3px;
    direction: ltr;
    text-align: left;
    height: 20px;
    background-color: #FFF;
    font-size: 11px;
    color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.focus-control-list {
    padding-top: 0;
    padding-bottom: 8px;
}
.focus-daterange-subdiv.date-range {
    background-color: #F5F5F5;
    margin: 5px 0;
    padding: 8px;
}
.focus-date-label {
    font-weight: 400;
}