﻿/* © 2013 Monscierge */

/* ==========================================================================
   Global Attribute Rules
   ========================================================================== */

html,
button,
input,
select,
textarea { color: #222; }

/* Layout */

body {
    font: normal 1em/1.6em "proxima-nova", sans-serif;
    width: 100%;
}

#style-1 { background-color: #F0F0F0; }

#style-2 { background: #203068 center top no-repeat url(../images/bg_blue.jpg); }

#style-3 { background-color: #f9f9f9; }

div { position: relative; }

br {
    display: block;
    margin-top: 10px;
}

hr {
    background-color: #666;
    border: 0;
    clear: both;
    height: 1px;
    margin: 0;
    padding: 0;
    width: inherit;
}

/* Text handling */

p, ul { margin: 0; }

h1, h2, h3, h4, h5, h6 {
    line-height: normal;
    margin: 0;
    padding: 0;
}

button, input, select, textarea { font-size: 1.4em; }

/* Buttons & Links */

a {
    color: #222;
    cursor: pointer;
    text-decoration: none;
}

a:visited { color: #222; }

/* Selection */

::-moz-selection {
    background: #b3d4fc;
    -ms-text-shadow: none;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    -ms-text-shadow: none;
    text-shadow: none;
}

/* ==========================================================================
   Global ID & Class Rules (still need to sort these a bit)
   ========================================================================== */

/* Top Bar */

#top-bar {
    background: url(../images/low-contrast-linen.png);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 40px;
    width: 100%;
    /*top: 0;*/
    /*position: fixed;*/
    z-index: 100;
}

#top-bar > .overlay {
    background: repeat-x url(../images/top-bar-shadow-overlay.png);
    height: inherit;
    position: absolute;
    width: 100%;
}

.monscierge-logo {
    height: 28px;
    margin: 6px 0 0 5px;
    width: 155px;
    /*float: left;*/
}

.monscierge-tagline {
    -ms-flex: 1;
    /*float: left;*/
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    color: #cccccc;
    flex: 1;
    font-size: 1.4em;
    left: 5px;
    margin: -7px 0 0 5px;
    position: relative;
    top: 50%;
}

.flexSpacer {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

#headerInfo {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    color: #cccccc;
    font-size: 16px;
    margin-right: 20px;
}

#headerInfo b {
    margin-left: 10px;
}
/* Top Bar Controls */

#top-bar-controls {
    font-size: 1.3em;
    height: inherit;
    /*float: right;*/
}

#top-bar-controls > .controls {
    list-style: none;
    margin-top: 0;
    padding: 0;
}

#top-bar-controls > .controls > .button-container { float: left; }

#top-bar-controls > .controls > .label-container {
    float: left;
    height: 40px;
    padding-top: 10px;
}

#top-bar-controls > .controls > .label-container > a {
    color: #ccc;
    margin-right: 10px;
    margin-top: 10px;
}

#top-bar-controls > .controls > .label-container > a:visited { color: #ccc; }

#top-bar-controls > .controls > .label-container > a:hover {
    color: #fff;
    text-decoration: none;
}

.top-bar-button {
    background: url(../images/web_buttons.png);
    display: block;
    height: 40px;
    width: 50px;
}

/* language button */

.top-bar-button.language {
    background-position: -240px -120px;
    width: 60px;
}

.top-bar-button.language:hover { background-position: -300px -120px; }

.top-bar-button.language:active { background-position: -300px -120px; }

.top-bar-button.language.selected { background-position: -300px -120px; }

.language-button-img {
    height: 24px;
    left: 7px;
    position: relative;
    top: 9px;
    width: 24px;
}

/* logout button */

.top-bar-button.logout { background-position: -240px 0; }

.top-bar-button.logout:hover { background-position: -290px 0; }

.top-bar-button.logout:active { background-position: -290px 0; }

.top-bar-button.logout.selected { background-position: -290px 0; }

/* help button */

.top-bar-button.support { background-position: -240px -40px; }

.top-bar-button.support:hover { background-position: -290px -40px; }

.top-bar-button.support:active { background-position: -290px -40px; }

.top-bar-button.support.selected { background-position: -290px -40px; }

/* settings button */

.top-bar-button.settings { background-position: -240px -80px; }

.top-bar-button.settings:hover { background-position: -290px -80px; }

.top-bar-button.settings:active { background-position: -290px -80px; }

.top-bar-button.settings.selected { background-position: -290px -80px; }

#select-country {
    display: none;
    margin-left: -700px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 101;
}

.fixed-column {
    float: left;
    max-width: 220px;
}

.select-country-ui {
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    background-color: #FFF;
    -ms-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    padding: 5px 0;
}

.select-country-ui > .list {
    list-style: none;
    padding: 0;
}

.select-country-ui * .country:hover { background-color: #B3D4FC; }

.select-country-ui * .country-link {
    color: #222;
    display: block;
    height: 100%;
    padding: 5px 10px;
    text-decoration: none;
}

.select-country-ui .country-flag {
    height: 30px;
    margin-right: 5px;
    vertical-align: middle;
    width: 30px;
}

#select-country-close-overlay {
    bottom: 0;
    display: none;
    position: fixed;
    top: 0;
    width: inherit;
    z-index: 99;
}

#menu-close-overlay {
    bottom: 0;
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 101;
}

#please-wait-overlay {
    cursor: wait;
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 999;
}

#please-wait-overlay > .background {
    background-color: #000;
    height: 100%;
    -ms-opacity: 0.6;
    opacity: 0.6;
    position: absolute;
    width: 100%;
}

#please-wait-overlay > .message {
    background-color: #FFF;
    border: 1px solid #E5E5E5;
    border-bottom: 1px solid #CCC;
    left: 50%;
    margin-left: -130px;
    margin-top: -45px;
    padding: 30px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 200px;
}

#wrapper {
    min-height: 100%;
    position: absolute;
    width: inherit;
}

/* Footer */

#page-footer {
    clear: both;
    display: none;
    height: 31px;
    margin: 20px auto;
    width: 562px;
}

/* Buttons */

input[type='button'].blue-button, input[type='submit'].blue-button {
    background: url(../images/web_buttons.png);
    background-position: -360px -222px;
    border: none;
    color: #FFF;
    display: block;
    font-family: "proxima-nova-n7", "proxima-nova", sans-serif;
    font-size: 16px;
    font-weight: 700;
    height: 37px;
    margin: 15px auto;
    -ms-text-shadow: 0 1px 2px #000;
    text-shadow: 0 1px 2px #000;
    width: 202px;
}

.blue-button:hover { background-position: -562px -222px; }

.blue-button:active { background-position: -562px -222px; }

.blue-button.selected { background-position: -562px -222px; }

.grey-button {
    background: url(../images/web_buttons.png);
    background-position: -360px -260px;
    clear: none;
    color: #222;
    cursor: pointer;
    display: block;
    font-family: "proxima-nova-n7", "proxima-nova", sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 22px;
    margin: 0 auto;
    padding-top: 6px;
    text-align: center;
    -ms-text-shadow: 0 1px 2px #aaa;
    text-shadow: 0 1px 2px #aaa;
    width: 171px;
}

.grey-button:hover { background-position: -532px -260px; }

.grey-button:active { background-position: -532px -260px; }

.grey-button.selected { background-position: -532px -260px; }

.link { color: #1f9fff; }

.link:hover { text-decoration: underline; }

/* Text Handling */

.overlabel {
    color: #999;
    cursor: text;
    font-size: 1.4em;
    margin: -7px 0 0 10px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    z-index: 1;
}

.overlabel.icon { margin: -7px 0 0 44px; }

.input-container {
    height: 44px;
    width: inherit;
}

.input-text-icon {
    height: inherit;
    margin: 0;
    margin-left: 10px;
    margin-top: -6px;
    position: absolute;
    top: 50%;
    width: 44px;
    z-index: 1;
}

.input-text-divider-top { background-color: #FFF; }

.input-text-divider-bottom { background-color: #CCC; }

.callout {
    display: none;
    height: inherit;
    left: 100%;
    margin-left: -10px;
    margin-right: -1000px;
    max-width: 80%;
    position: absolute;
}

.callout-triangle-left {
    border-bottom: 10px solid transparent;
    border-right: 10px solid #000;
    border-top: 10px solid transparent;
    margin-top: -10px;
    position: absolute;
    top: 50%;
}

.callout-content {
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    background: #000; /* IE8 */
    background-color: rgba(0, 0, 0, 0.8);
    -ms-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    color: #FFF;
    font-size: 1.4em;
    left: 10px;
    margin-right: -250px;
    padding: 15px;
    position: absolute;
}

/* Input validation */

.field-validation-error { color: #f00; }

.field-validation-valid { display: none; }

.input-validation-error {
    background-color: #fee;
    border: 1px solid #f00;
}

.validation-summary-errors {
    -moz-border-radius: 4px;
    background-color: white;
    border: 1px solid red;
    -ms-border-radius: 4px;
    border-radius: 4px;
    color: #f00;
    font-size: 1.3em;
    margin: 0 0 10px;
    padding: 5px;
}

.validation-summary-errors ul { margin: 0; }

.validation-summary-valid { display: none; }

.validation-summary-info {
    -moz-border-radius: 4px;
    background-color: white;
    border: 1px solid #1f9fff;
    -ms-border-radius: 4px;
    border-radius: 4px;
    color: #1f9fff;
    font-size: 1.3em;
    margin: 0 0 10px;
    padding: 5px;
}

/* Layout */

.displace {
    left: -5000px;
    position: absolute;
}

.hidden { display: none; }

/* Effects */

.shadow {
    -moz-box-shadow: 0 2px 3px #000000;
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#000000')"; /* For IE 8 */
    -webkit-box-shadow: 0 2px 3px #000000;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 2px 3px #000000;
    box-shadow: 0 2px 3px #000000;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    -webkit-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#000000');
    -moz-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#000000');
    -o-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#000000');
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#000000'); /* For IE 5.5 - 7 */
}

.shadow-light {
    -moz-box-shadow: 0 2px 3px #000000;
    -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#AAAAAA')"; /* For IE 8 */
    -webkit-box-shadow: 0 2px 3px #000000;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 2px 3px #000000;
    -ms-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 3px #000000;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    -webkit-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#AAAAAA');
    -moz-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#AAAAAA');
    -o-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#AAAAAA');
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#AAAAAA'); /* For IE 5.5 - 7 */
}

.unselectable {
    -moz-user-select: -moz-none;
    -ms-user-select: none; /* IE10+, use unselectable HTML attribute for 9 down. */
    -webkit-user-select: none;
    cursor: default;
}

.ie-text-shadow {
    -moz-user-select: -moz-none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)" "progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
    -ms-user-select: none; /* IE10+, use unselectable HTML attribute for 9 down. */
    -webkit-user-select: none;
    color: #000;
    -webkit-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70) progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');
    -moz-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70) progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');
    -o-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70) progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70) progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');
    left: -5px;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: -4px;
    width: 100%;
    z-index: -1;
}

.ie-text-shadow .ie-text-link-shadow {
    font-family: "proxima-nova-n7", "proxima-nova", sans-serif;
    font-weight: 700;
    text-decoration: none;
}

.ie-text-light-shadow { color: #AAAAAA; }

/* ==========================================================================
   Main
   ========================================================================== */

#main-nav {
    background: repeat-x url(../images/main-nav-bar.png);
    font-size: 1.3em;
    height: 50px;
    width: 100%;
    z-index: 98;
    /*position: fixed;*/
    /*top: 40px;*/
    /*min-width: 960px;*/
}

.main-nav-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav-li { float: left; }

.main-nav-button {
    background: url(../images/web_buttons.png);
    display: block;
    height: 50px;
    width: 60px;
}

.main-nav-button.home { background-position: 0 0; }

.main-nav-button.home:hover { background-position: -60px 0; }

.main-nav-button.home:active { background-position: -120px 0; }

.main-nav-button.home.selected { background-position: -180px 0; }

.main-nav-button.local { background-position: 0 -49px; }

.main-nav-button.local:hover { background-position: -60px -49px; }

.main-nav-button.local:active { background-position: -120px -49px; }

.main-nav-button.local.selected { background-position: -180px -49px; }

.main-nav-button.menus { background-position: 0 -98px; }

.main-nav-button.menus:hover { background-position: -60px -98px; }

.main-nav-button.menus:active { background-position: -120px -98px; }

.main-nav-button.menus.selected { background-position: -180px -98px; }

#main-nav .ApplyTooltip .TouchTooltip {
    margin-right: 0;
    top: 50px !important;
}

#top-bar .ApplyTooltip { margin-right: 0; }

#main-content-wrapper {
    min-height: 100%;
    position: absolute;
    width: inherit;
}

#main-content-container { width: inherit; }

#main-content {
    /*padding-top: 90px;*/
    margin-left: 250px;
    padding-bottom: 1px;
}

#main-content.no-nav {
    border-left: none;
    margin-left: 0;
}

#main-left-nav-container {
    background-color: #E3E3E3;
    border-right: 1px solid #F6F6F6;
    height: 100%;
    position: absolute;
    width: 249px;
    z-index: 1;
}

#main-left-nav h2 {
    background: url(../images/web_buttons.png);
    background-position: -360px 0;
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    height: 44px;
    line-height: 44px;
    padding-left: 15px;
}

#main-left-nav .section-button {
    background: url(../images/web_buttons.png);
    background-position: -360px -44px;
    display: block;
    height: 44px;
    line-height: 46px;
    overflow: hidden;
}

#main-left-nav .section-button:hover { background-position: -610px -44px; }

#main-left-nav .section-button:active { background-position: -860px -44px; }

#main-left-nav .section-button.selected { background-position: -1110px -88px; }

#main-left-nav .section-button.selected-2 { background-position: -1110px -44px; }

#main-left-nav .section-button .name {
    float: left;
    font-size: 14px;
    font-weight: 700;
    margin: 0 40px;
    vertical-align: middle;
}

#main-left-nav .section-button .count {
    display: block;
    float: right;
    font-size: 15px;
    font-weight: 700;
    max-width: 40px;
    position: absolute;
    right: 10px;
    text-align: right;
    vertical-align: middle;
}

.CategoriesLoader {
    float: right;
    height: 32px;
    position: relative;
    right: 20px;
    top: 15px;
    width: 32px;
}

#main-left-nav .section-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-left-nav > .with-overflow {
    height: calc(100vh - 159px);
    overflow: auto;
}

#main-left-nav .section-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-left-nav .section-list .list-item {
    align-items: center;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    /*height: 30px;*/
    line-height: 31px;
    /*background: url(../images/web_buttons.png);*/
    overflow: hidden;
}

#main-left-nav .section-list .list-item.selected { color: #fff; }

#main-left-nav .section-list .item-name {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-size: 13px;
    line-height: 16px;
    margin: 7px 30px 7px 22px;
    text-indent: -10px;

    vertical-align: middle;
}

#main-left-nav .section-list .item-count {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 16px;
    margin-bottom: 7px;
    margin-right: 10px;
    margin-top: 7px;
    max-width: 40px;
}

#main-left-nav .section-list .list-item-container {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    cursor: pointer;
}

#main-left-nav .section-list .list-item-category {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #C2C2C2;
    border-bottom: 1px solid #979797;
    border-top: 1px solid #F1F1F1;
    box-sizing: border-box;
    width: 7px;
}

#main-left-nav .section-list .list-item-body {
    -moz-box-sizing: border-box;
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -webkit-box-sizing: border-box;
    -webkit-flex: 1;
    background-color: #C2C2C2;
    border-bottom: 1px solid #979797;
    border-top: 1px solid #F1F1F1;
    box-sizing: border-box;
    flex: 1;
    height: 100%;
}

#main-left-nav .section-list .list-item-category.red {
    background-color: #bd272b;

    background-color: rgba(189, 39, 43, 1);
    border-top-color: #E5A9AA;
}

#main-left-nav .section-list .list-item-category.yellow {
    background-color: #db882e;
    background-color: rgba(219, 136, 46, 1);
    border-top-color: #F1CFAB;
}

#main-left-nav .section-list .list-item-category.green {
    background-color: #6ea550;
    background-color: rgba(110, 165, 80, 1);
    border-top-color: #C5DBB9;
}

#main-left-nav .section-list .list-item-container a:hover { text-decoration: none; }

#main-left-nav .section-list .list-item-container:hover .list-item-body {
    background-color: #DCDCDC;
    border-bottom: 1px solid #979797;
    border-top: 1px solid #F1F1F1;
}

#main-left-nav .section-list .list-item-container:active .list-item-body {
    background: #bdbdbd;
    background: -moz-linear-gradient(top, #bdbdbd 0, #c7c7c7 3%, #d1d1d1 6%, #dcdcdc 9%, #dcdcdc 91%, #d4d4d4 94%, #cacaca 97%, #c0c0c0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bdbdbd), color-stop(3%, #c7c7c7), color-stop(6%, #d1d1d1), color-stop(9%, #dcdcdc), color-stop(91%, #dcdcdc), color-stop(94%, #d4d4d4), color-stop(97%, #cacaca), color-stop(100%, #c0c0c0));
    background: -webkit-linear-gradient(top, #bdbdbd 0, #c7c7c7 3%, #d1d1d1 6%, #dcdcdc 9%, #dcdcdc 91%, #d4d4d4 94%, #cacaca 97%, #c0c0c0 100%);
    background: -o-linear-gradient(top, #bdbdbd 0, #c7c7c7 3%, #d1d1d1 6%, #dcdcdc 9%, #dcdcdc 91%, #d4d4d4 94%, #cacaca 97%, #c0c0c0 100%);
    background: -ms-linear-gradient(top, #bdbdbd 0, #c7c7c7 3%, #d1d1d1 6%, #dcdcdc 9%, #dcdcdc 91%, #d4d4d4 94%, #cacaca 97%, #c0c0c0 100%);
    background: linear-gradient(to bottom, #bdbdbd 0, #c7c7c7 3%, #d1d1d1 6%, #dcdcdc 9%, #dcdcdc 91%, #d4d4d4 94%, #cacaca 97%, #c0c0c0 100%);
    border-bottom: 1px solid #979797;

    border-top: 1px solid #F1F1F1;
    -webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#c0c0c0', GradientType=0);
    -moz-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#c0c0c0', GradientType=0);
    -o-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#c0c0c0', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdbdbd', endColorstr='#c0c0c0', GradientType=0);
}

#main-left-nav .section-list .list-item-container.selected .list-item-body {
    background-color: #6391E5;
    border-bottom: 1px solid #365795;
    border-top: 1px solid #CCDEFD;
}

#main-left-nav .section-list .list-item-container.selected .list-item-body a { color: #f1f1f1; }

/* ==========================================================================
   Page
   ========================================================================== */

.page-nav {
    background: repeat-x url(../images/main-content-bar.png);
    height: 44px;
}

.page-nav .page-title {
    color: #fff;
    float: left;
    font-size: 18px;
    font-weight: normal;
    line-height: 44px;
    margin-left: 10px;
}

.add-item-button {
    background: url(../images/web_buttons.png);
    background-position: -359px -288px;
    display: block;
    float: left;
    height: 36px;
    margin: -18px 0 0 4px;
    position: relative;
    top: 50%;
    width: 52px;
}

.add-item-button:hover { background-position: -411px -288px; }

.add-item-button:active { background-position: -463px -288px; }

.add-item-button.selected { background-position: -463px -288px; }

.hover-callout-container {
    display: inline-block;
    float: left;
    height: inherit;
}

.hover-callout-container:hover > .hover-callout { display: block; }

.hover-callout {
    display: none;
    height: inherit;
    left: 100%;
    margin-left: 5px;
    margin-right: -1000px;
    max-width: 80%;
    position: absolute;
    z-index: 102;
}

.hover-callout-triangle-left {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #267DDA;
    border-top: 8px solid transparent;
    margin-top: -6px;
    position: absolute;
    top: 50%;
    z-index: 1;
}

.hover-callout-content {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background-color: #267DDA;
    -ms-border-radius: 4px;
    border-radius: 4px;
    color: #FFF;
    font-size: 1.4em;
    left: 8px;
    margin-right: -250px;
    padding: 10px;
    position: absolute;
    top: 5px;
}

#add-item-menu {
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    background: #333;
    -ms-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    display: none;
    padding-bottom: 4px;
    position: absolute;
    top: 100%;
    z-index: 102;
}

#add-item-menu .list {
    list-style: none;
    padding: 0;
}

#add-item-menu .title {
    border-bottom: 1px solid #6DA2DA;
    color: #6DA2DA;
    display: block;
    font-size: 1.6em;
    padding: 10px;
}

#add-item-menu .list-item { float: left; }

#add-item-menu .list-item:hover { background-color: #555; }

#add-item-menu .list-item-button {
    color: #DDD;
    display: block;
    font-size: 1.3em;
    -moz-min-width: 200px;
    -ms-min-width: 200px;
    -o-min-width: 200px;
    -webkit-min-width: 200px;
    min-width: 200px;
    padding: 10px;
}

.page-content {
    background-color: #FFF;
    border: 1px solid #E5E5E5;
    border-bottom: 1px solid #CCC;
    margin: 10px;
    padding: 50px;
}

.page-content.center { margin: 10px auto; }

.page-content.width650 { width: 650px; }

.page-header .title {
    font-size: 32px;
    font-weight: normal;
}

.page-header .sub-title {
    color: #1F9FFF;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 30px;
}

.page-header span {
    color: #666;
    display: block;
    font-size: 18px;
    margin-bottom: 20px;
}

.fixed-width { font-family: "Consolas", monospace; }

/* Search Bar*/

button, input, select, textarea { vertical-align: middle; }

.page-nav {
    padding-left: 10px;
    padding-top: 2px;
}

.page-nav form { margin: 0; }

.page-nav .listing-input {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #CCCCCC;
    -ms-border-radius: 4px;
    border-radius: 4px;
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 20px;
    margin-bottom: 0;
    padding: 4px 6px;
    vertical-align: middle;
    width: 206px;
}

.page-nav #searchButton {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 0;
    -ms-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    margin: 0;
    -moz-min-width: 60px;
    -ms-min-width: 60px;
    -o-min-width: 60px;
    -webkit-min-width: 60px;
    min-width: 60px;
    padding: 0 15px;
    -ms-text-shadow: none;
    text-shadow: none;
    width: auto;
}