/* 
 
    Beacon Dashboard v2
 
    Guidelines:
    1. id & class names are lowercase containing only dashes
        .navbar-edit = correct
        .navbar_edit = incorrect
        .navbarEdit = incorrect

    2. for development purposes each page / distinct area of functionality must have it's own css file

    3. where possible always use bootstrap components and make use of the bootstrap grid and other idioms.

    4. CSS selector rules show generally go on one line rather than a line break after each rule.

	5. comment liberally. what seems obvious now may be quite confusing in a few months time
//html indentation & closing tag comments

 */


/*
 * Base dashboard styles
 * --------------------------------------------------
 */
html,
body {
/* Prevent scroll on narrow devices */ overflow-x: hidden;
font-size: 100%;
}

* { user-select: none; -webkit-tap-highlight-color: rgb(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

body { padding-top: 70px; } 
footer { padding: 30px 0; text-align: center; opacity: 0.5; }
:webkit-full-screen { width: 100%; height: 100%; }


.content-main h1 { padding: .5em 0; }
h1.element { background: #333; color: #fff; padding: .2em .5em; text-align: center; }

form p.note { opacity: 0.5; font-style: italic; padding: .5em 0; }
.btn-beacon { background: #fc3; color: #333; transition: 0.3s;}
.btn-beacon:hover { background: #fd5; color: #000; }

.spinner { display: inline-block; opacity: 0; max-width: 0;
  transition: opacity 0.25s, max-width 0.45s; }


.has-spinner.active .spinner { opacity: 1; max-width: 50px; }

#topstrip { background: #fc3; color: #4d3d17; border: none; }
#topstrip a { color: #4d3d17; }
a.logo { display: block; padding-left: 1em; font-weight: bold; font-size: 110%; }

#topstrip a.warn { color: #600 !important; font-style: italic; font-size: 90%;}
#edit-options { display: none; }

/* 
 * ---------------------------------------------> SMALLER SCREENS
 * */
@media screen and (min-width: 959px) {

#topstrip .navbar-nav { display: block; margin-left: 270px; }
#topstrip .navbar-right { position: absolute; right: 3em; }


}


/*
 * PNG Sprite (default)
 */

.actions {
    display: block;
    overflow: auto;
}

.actions a {
    background-repeat: no-repeat;
    display: block;
    float: left;
    font-weight: bold;
    color: #444;
    background-color: #ccc;
    text-decoration: none;
    border-radius: 5px;
    text-shadow: 0 -1px 2px #fff;
}

#size100 {
    font-size: 100%;
}

#size200 {
    font-size: 200%;
}

#size200 h3 {
    font-size: 50%;
}

/*
 * Pixel Sizes
 */

.actions-px a {
    font-size: 16px;
    line-height: 20px;
    padding: 10px 20px 10px 40px;
    margin-right: 5px;
}

.a-share {
    background-position: 10px 0;
}

.a-print {
    background-position: 10px -40px;
}

.a-tag {
    background-position: 10px -80px;
}

.a-delete {
    background-position: 10px -120px;
}


/*
 * Relative Sizes
 */

.actions-em a {
    font-size: 1em;
 /* 16px */
    line-height: 1.25em;
 /* 20/16px */
    padding: 0.625em 1.25em 0.625em 2.5em;
 /* 10-20-10-40/16px */
    margin-right: 0.3125em;
 /* 5/16px */
    border-radius: 0.3125em;
}

.actions-em .a-share {
    background-position: 0.625em 0;
 /* 10/16px */
}
.actions-em .a-share:hover {
    background-postion: 0.625em 2em;
}

.actions-em .a-print {
    background-position: 0.625em -2.5em;
 /* 10-40/16px */
}

.actions-em .a-tag {
    background-position: 0.625em -5.0em;
 /* 10-80/16px */
}

.actions-em .a-delete {
    background-position: 0.625em -7.5em;
 /* 10-120/16px */
}

.actions-em a {
    -webkit-background-size: 1.875em 10em;
    -o-background-size: 1.875em 10em;
    -moz-background-size: 1.875em 10em;
    background-size: 1.875em 10em;
 /* 30-160/16px */
}

/*
 * SVG Sprite
 */

.actions-svg a.sprite {
    background-image: url('../svg/sprite.svg');
}




.modal-content input { border: 1px solid rgba(0,0,0,0.2); padding: .3em; border-radius: 5px; display: block; margin: 0 auto;  }
.modal-header { background: #333; color: #fc3; }
.modal-footer { border-top: none; padding-top: 0; }

.modal-header button.close { color: #fff; }

.modal-content ::-webkit-input-placeholder { color: #999; font-style: italic;  }
.modal-content :-moz-placeholder { /* Firefox 18- */ color: #999; font-style: italic; }
.modal-content ::-moz-placeholder {  /* Firefox 19+ */ color: #999; font-style: italic; }
.modal-content :-ms-input-placeholder {  color: #999; font-style: italic; }

.popover { background: #333; color: #fff; }
.popover.top .arrow:after { border-top-color: #333; }
.tooltip { font-size: 90%; }

#analytics table { margin-bottom: 5em; }
#analytics table.table.styled {}
#analytics table.table.styled thead { background: #333; color: #fff; }
#analytics table.table.styled thead tr { border-radius: 5px; }


.side-left { left: 0; background: #333; margin-top: -32px; height: 100%; color: #fff; }
.side-left ul { list-style: none; margin: 0 0 1em 0; padding: .5em; max-height: 60%; overflow-y: auto; }
.side-left li {}
.side-left li a { position: relative; padding: 1em 2em; color: #fff; display: block; width: 100%; }
.side-left h4 a { width: 100%; display: block; }
.side-left h4 a:hover { color: #fff; text-decoration: none; }
.side-left li a:hover { background: rgba(255,255,255,0.1); }
.side-left li a .pagetype { position:absolute; top: 1em; left: .5em; }
.side-left li a .pagedelete { position:absolute; bottom: 1em; right: .5em; }

.side-left h2 { margin-top: 2.7em; font-size: 150%; padding-top: 0; }
.side-left p a { color: #fc3; }
.side-left p a:hover { text-decoration: none; }
.side-left h4 a,
.side-left li a { color: rgba(255,255,255,0.5); }
.side-left li.active a { background: transparent; color: #fff; }
.side-left li.active,
.side-left li:hover
{ color: #fff; }
.side-left li.active { background: rgba(255,255,255,0.05); border-radius: 4px; }
.side-left .nav-pills li.active a:hover { background: rgba(255,255,255,0); }
.side-left li .pagedelete { display: none; }
.side-left li:hover .pagedelete { display: block; }



form label { margin-top: 1em; }
form textarea { display: block; clear: both; }

body.settings .content h1 { margin-top: .5em; padding-top: 0; }