/* ==========================================================================
	#Selecter
========================================================================== */
.selecter { display: block; position: relative; z-index: 1; }

.selecter .selecter-element { *left: -999999px; height: 100%; left: 0; position: absolute; opacity: 0; width: 100%; z-index: 0; }
.selecter .selecter-element,
.selecter .selecter-element:focus { outline: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-tap-highlight-color: transparent;
}

.selecter .selecter-selected { background: #fff url(../images/select.png) no-repeat right center; border: 1px solid #ccc; color: #000; cursor: pointer; display: block; font-size: 12px; margin: 0; overflow: hidden; padding: 6px 7px; position: relative; text-overflow: clip; z-index: 2; font-weight: normal; }
.selecter .selecter-options { box-sizing: border-box; border: 1px solid #ccc; border-width: 0 1px 1px; background-color: #fefefe; display: none; left: 0; margin: 0; max-height: 260px; overflow: auto; overflow-x: hidden; padding: 0; position: absolute; top: 100%; width: 100%; *width: auto; z-index: 50; }
.selecter .selecter-group { background: #F9F9F9; border-bottom: 1px solid #e3e3e3; color: #999; display: block; font-size: 11px; padding: 6px 10px 5px; text-transform: uppercase; }
.selecter .selecter-item { background: #fff; border-bottom: 1px solid #e3e3e3; color: rgba(0, 0, 0, 0.35); cursor: pointer; display: block; font-size: 15px; margin: 0; overflow: hidden; padding: 8px 15px; text-overflow: ellipsis; width: 100%; font-weight: bold; }
.selecter .selecter-item:hover { background: #e6e6e6; }
.selecter .selecter-item.disabled { color: #999; cursor: default; }
.selecter .selecter-item:last-child { border-bottom: 0; }

/* Open */
.selecter.open { z-index: 3; }
.selecter.open .selecter-selected { z-index: 51; }

.selecter.open .selecter-selected,
.selecter.focus .selecter-selected { background-color: #fff; }

/* ==========================================================================
	#Grayscale
========================================================================== */
.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
  */
  -webkit-filter: grayscale(100%);
}

.grayscale.grayscale-fade {
  -webkit-transition: -webkit-filter .5s;
}

.grayscale.grayscale-fade:hover {
  -webkit-filter: grayscale(0%);
  filter: none;
}

.grayscale-replaced.grayscale-fade svg {
  opacity: 1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

.grayscale-replaced.grayscale-fade:hover svg {
  opacity: 0;
}

/* ==========================================================================
  #Colorbox
========================================================================== */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:hidden!important; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#10171a; opacity: 0.63!important; }
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}