/*
Theme Name: 	Splotbox
Theme URI: 		https://github.com/cogdog/splotbox
Description: 	The SPLOT Media Collector (Child of Garfunkel) for building collections of contributed audio, video, and image media, kind of like a jukebox but better.
Version: 		4.22
Template:   	garfunkel
Author: 		CogDog
Author URI: 	https://cog.dog/
License: GNU General Public License v2.0 & Apache License 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html http://www.apache.org/licenses/LICENSE-2.0

*/

@font-face {
	font-family: 'Genericons';
		src: url('genericons/font/Genericons.woff') format('woff'),
		url('genericons/font/Genericons.ttf') format('truetype'),
		url('genericons/font/Genericons.svg#genericonsregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ----------------------------------- front page --------------------------------------*/
.blog-description {
	font-weight: 800;
	color: #FFF;
}

/* widgets added to front */
.widget-area {
    background-color: #fff;
}

/* --------------------------------------  archive -------------------------------------*/

.search-results .page-title h5, .paged .page-title h5, .archive .page-title h5, .licensed .page-title h5  {
    text-align: center;
    color: rgba( 255, 255, 255, 0.8 );
    font-size: 1em;
    font-style: italic;
}

/* --------------------------------------  menus --------------------------------------*/

.navigation .search-field {
    background: none;
    border: none;
    font-size: 0.9em;
    padding: 9px 0 9px 52px;
    margin-top: 16px;
}

.navigation .search-field:hover, .navigation .search-field:focus {
	background-color: #ededed;
	color: #222;
}

.navigation .search-form .genericon {
    font-size: 24px;
    margin-top: -6px;
}

.mobile-menu .search-form {
    padding: 12px 8%;
    width: 80%;
    color: #fff;
}

.mobile-menu .genericon-search {
    position: left:20%;
    left: 12%;
}

.mobile-menu .search-field:hover, .mobile-menu .search-field:focus {
		background: #ca2017;
		color: #fff;
}

/* -----------------------------------  single-item ------------------------------------*/

/* full player */
.audio-player {
  width: 100%;
	background-color: #282828;
}

iframe.ia-audio {
	padding: 5px 0;
    background: #000;
}

.featured-media audio {
  width: 100%;
 }

/* captures embeds with stuff after iframe, e.g. slideshare */

.featured-media iframe + div {
    display: none;
}

.post-info-items, .post-content {
	word-wrap: break-word;
}

.post-info-items li + li {
    word-break: break-all;
}

.single .post-meta p.post-download { background-image: url(images/icons/1x/download-g.png); }
.single .post-meta p.post-download:hover { background-image: url(images/icons/1x/download-c.png); }

.post-excerpt p.sharedby {
	font-size: 0.75em;
	margin: 0;
	line-height: 1.0em;
}


a.download-link {
	padding-right: 40px;
	background-image: url(images/icons/1x/download-g.png);
	background-repeat: no-repeat;
	background-position: 95% center;
}

a.download-link:hover {
	padding-right: 40px;
	background-image: url(images/icons/1x/download-c.png);
	background-repeat: no-repeat;
	background-position: 95% center;
}

.sb_meta {
    background: #ededed;
    border: 2px solid #666;
    padding: 1em;
    margin: 1em 0;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    clear: both;
}

.sb_meta textarea {
    background: #cecdcd;
    font-size: 0.7em;
    padding: 0.5em;
}


/* ---------------------------------  pretty-buttons -----------------------------------*/


/* some pretty buttons all done in CSS
   h/t http://www.graemeboy.com/modern-css-buttons */

    .pretty-button, .post-content input.pretty-button {
		padding: 12px 16px;
		margin: 0;
		border: none;
		color: #fff;
		font-size: 0.9rem;
		line-height: 1;
		-webkit-appearance: none;
		border-radius: 3px;
    	font-family: 'Fira Sans', sans-serif;
        text-decoration: none;
        text-align: center;
        display: inline-block
    }

    /* user actions on the buttons. */
    .pretty-button:hover, .post-content input.pretty-button:hover {
        text-decoration: none;
        color: #ffffff
    }
    .pretty-button:active, .post-content input.pretty-button:active {
        -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.03), inset 0px -1px 1px rgba(255, 255, 255, 0.05), 0px 1px 0px #777777, 0px 3px 3px rgba(0, 0, 0, 0.03);
        -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px -1px 1px rgba(255, 255, 255, 0.05), 0px 1px 0px #777777, 0px 3px 3px rgba(0, 0, 0, 0.03);
        box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.03), inset 0px -1px 1px rgba(255, 255, 255, 0.05), 0px 1px 0px #777777, 0px 3px 3px rgba(0, 0, 0, 0.03)
    }

    /* The next blocks of code are specific to the color. Copy the color you want. */

    .pretty-button-gray, .post-content input.pretty-button-gray {
        background: #333;
    }

    a.pretty-button-gray:hover, .post-content input.pretty-button-gray:hover {
        background: #ca2017;
        text-decoration: none;
    }

/* ------------------------------  alert/message boxes --------------------------------*/
/* h/t http://aviaryan.github.io/blog/css-notification-bubble-box.html */

.symbol {
    font-size: 0.9em;
    font-family: Times New Roman;
    border-radius: 1em;
    padding: .1em .6em .1em .6em;
    font-weight: bolder;
    color: white;
    background-color: #3229CF;
}

.icon-info { background-color: #3229CF; }
.icon-error { background: #e64943; font-family: Consolas; }
.icon-tick { background: #13c823; }
.icon-excl { background: #ffd54b; color: black; }
.icon-info:before { content: 'i'; }
.icon-error:before { content: 'x'; }
.icon-tick:before { content: '\002713'; }
.icon-excl:before { content: '!'; }

.notify {
    background-color:#e3f7fc;
    color:#555;
    border:.1em solid;
    border-color: #8ed9f6;
    border-radius:10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.75em;
	font-weight: 700;
    padding:10px 10px 10px 10px;
    margin:10px;
    cursor: default;
}

.notify-yellow { background: #fff8c4; border-color: #f7deae; }
.notify-red { background: #ffecec; border-color: #fad9d7; }
.notify-green { background: #e9ffd9; border-color: #D1FAB6; }


/* ----------------------------------  splot forms ------------------------------------*/

#splotboxform .uploader {
	float:left;
	margin: 0 1.3em 1.3em 0;
}

#splotboxform label {
	font-size: 1.2em;
	display: block;
	margin-top: 1em;
}

#splotboxform .required, .notify .required  {
	font-weight: bold;
	color: #ca2017;
}

#splotboxform .sublabel {
	font-size: 0.9em;
	margin-bottom: 1em;
}

#splotboxform p {
    font-size: 0.9em;
    line-height: 110%;
}

#splotboxform .supports {
    background-color: #eee;
    font-weight: 600;
    line-height: 150%;
}

#splotboxform .descrip {
	font-size:0.8em;
	display: block;
	margin-left:2em;
}

#splotboxform a.fbutton, a.splotbutton {
    margin: 0;
    border: none;
    background: #333;
    color: #fff;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: inherit;
    padding: 18px 24px;
    -webkit-appearance: none;
    border-radius: 3px;
    text-decoration: none;
}

#splotboxform a.fbutton:hover, a.splotbutton:hover, #checkit:hover, #makeit:hover  {
	cursor: pointer;
	background: #ca2017;
	color: #fff;
}

#splotboxform a.disabled, #splotboxform input[type="submit"][disabled], #splotboxform input[type="button"][disabled] {
   pointer-events: none;
   cursor: default;
   opacity:0.4;
}

#splotboxform input[type="submit"][disabled]:hover {
	background: #333;
	opacity:0.4;
}



/* -------------------------------  tiny-mce editor -----------------------------------*/
div.mce-panel, .wp-editor-tabs {
    font-family: 'Fira Sans', sans-serif;
}

/* -------------------------------  image drop zone ----------------------------------*/


#footlocker, #idlocker {
	display: none;
}

#uploadresponse {
    color: #673ab7;
}

img#mediathumb {
    float: left;
    margin: 0 1em 0 0;
    cursor: pointer;
    object-fit: cover;
    width: 150px;
    height: 150px;
}

#splotdropzone {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 0 1em 0;
    width: 100%;
    height: 200px;
    border: 3px dashed #999;
    background: url(images/upload-icon.png) no-repeat center 20%, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAH0lEQVQoU2NkIAIwEqGGgfaK/jMwIGyhvXUonibKOgCoygEKFVx9rwAAAABJRU5ErkJggg==) repeat !important;
    cursor: pointer;
}

#splotdropzone input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
}

#dropmessage {
	width: 100%;
	height: 100%;
	padding-top: 70px;
	text-align: center;
	word-break: break-word;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	font-weight:bold;
	color: #333;
}


/* --------------------------------  audio recorder -----------------------------------*/


#wMediaRecorder {
  background-color: #493657;
}

.vjs-icon-record-start {
    color: red!important;
 }

 .recordermsg {
    padding: 0.4rem;
    font-family: monospace;
    text-align: center;
    background-color: #333446;
    color:#eee;
    width:100%;
}

#wUploadRecording {
    display: block;
    background: #555;
    margin: 1em auto;
}

#wUploadRecording:hover {
	cursor: pointer;
	background: #ca2017!important;
	color: #fff!important;
}

/* secret interceptor to trap record button clicks */
#countrec {
  width: 2rem;
  height: 2rem;
  position: absolute;
  /*background-color: yellow; */
  left: 0;
  bottom: 0;
  z-index: 5;
}

/* counter circle */
#countdown {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  font-size: 3rem;
  color: #fff;
  line-height: 6rem;
  text-align: center;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -5;
}

/* smaller screenn / smaller circle */
@media screen and (max-width: 600px) {

	#countdown {
		width: 3rem;
		height: 3rem;
		font-size: 1.5rem;
		line-height: 3rem;
	}
}

/* -------------------- style the autocomplete stuff ----------------------------------*/
/* h/t http://sudarmuthu.com/blog/using-wordpress-built-in-tag-auto-complete-script-in-your-plugins/#comment-644312 */
.ac_results
{
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	z-index: 10000;
	display: none;
	border-width: 1px;
	border-style: solid;
	background-color: white;
}

.ac_results li
{
	padding: 4px 6px;
	white-space: nowrap;
	text-align: left;
}

.ac_over { cursor: pointer; }
.ac_match { text-decoration: underline; }

/* -------------------- icon for the taxonomy list widget -------------------------------*/

.widget_lc_taxonomy li:before {
    font: 16px/1 'Genericons';
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    color: #999;
    margin-right: 8px;
    position: relative;
    top: -1px;
    content: '\f104';
}

.widget_lc_taxonomy ul {
    margin-left: 0;
}