/*
html, body {
	min-width: 1170px;
	overflow-x: scroll;
}
*/

#sb-site div.admin.container {
	margin: 0 auto;
	/* min-width: 1170px; */
}

.app #sb-site div.admin.container {
	/* min-width: 570px; */
}

#content hr {
	width: 90%;
	margin-left: 5px;
}

#content .padding {
	padding: 20px;
}

#content .padding h1 {
	font-size: 30px;
	text-align: left;
}

#content .padding #infoMessage {
	color: #ff0000;
	font-weight: bold;
}

#content .words_wrapper {
	min-width: 800px;
}

#content .usertable {
	border: 1px solid #ddd;
	margin: 20px 0;
	width: 100%;
}

#content .usertable th {
	background-color: #eee;
	border-bottom: 1px solid #ddd;
}

#content .usertable th,
#content .usertable td {
	padding: 5px 10px;
	max-width: 175px;
	overflow: hidden;
}

#content .colortable {
	border: 1px solid #999;
	border-collapse: collapse;
	margin-top: 1em;
	width: 100%;
}
#content .colortable td, #content .colortable th {
	background-color: none;
	border: 1px solid #999;
	empty-cells: show;
	font-size: 15px;
	font-weight: bold;
	padding: 3px;
	text-align: center;
}
#content .colortable tr:nth-child(even) { background-color: #eee; }

.fleft {
	float: left;
}
.fright {
	float: right;
}

.fright.app_btns {
	
}

/*** APP ***/

#content .app_wrapper {
	width: 100%;
	height: 90%;
}

.app_wrapper.row {
	margin-left: 0;
	margin-right: 0;
}

#content .app_wrapper.row > div {
	width: 515px;
}
#content .app_wrapper.row > div.mid {
	width: 70px;
	padding-top: 10px;
	text-align: center;
	margin-top: 30px;
}
#content .app_wrapper .listarea {
	padding: 10px 15px;
	min-height: 500px;
	font-size: 19px;
	line-height: 1.8em;
	font-family: Monaco, 'Lucida Console', monospace;
}
#content .app_wrapper span.accent {
	border: none;
	text-decoration: none;
	font-style: normal;
	/*border-bottom: 2px solid #000;*/
}
#content .app_wrapper .app_btns.fleft {
	text-align: right;
}

input#appsave {
	margin-right: 0 !important;
}

#content .app_wrapper .app_btns input {
	margin: 15px;
	font-size: 16px;
}
#content .app_wrapper .app_btns span {
	font-size: 16px;
}
#content .app_wrapper .listarea div.htr_wrap {
	display: inline-block;
	margin-right: .5em;
	position: relative;
}

.htr_wrap .htr_word {
	cursor: pointer;
}

#content .app_wrapper .listarea ul.htr_hide {
	z-index: 10001;
	border: 3px solid #333;
	padding: 7px;
	position: absolute;
	background-color: #fff;
	display: none;
	box-shadow: 2px 2px 10px #333;
}
#content .app_wrapper .listarea ul.htr_hide li span.accent {
	font-style: italic;
}

#savedialog {
	width: 220px;
	margin-bottom: 10px;
}
#deldialog {
	width: 220px;
	height: 75px;
	margin-bottom: 10px;
}
#deldialog input {
	margin: 5px 0 0;
}

.app_wrapper input,
.app_wrapper button#eetoggle {
	background: #3C5574;
	color: #fff;
	border-radius: 3px;
	border: 0;
	padding: 4px 8px;
}

p.info-note {
	margin-top: 25px;
}

#usrtxtsel {
	font-size: 18px;
}

/*** COLORS ***/

.yEs, .cd {
	color: #ffffff;
	background-color: #ff001e;
}
.quEEn, .ce {
	color: #ffffff;
	background-color: #32ff00;
}
.bOx, .ca {
	color: #ffffff;
	background-color: #783c3c;
}
.gO, .co {
	color: #ffffff;
	background-color: #ff8209;
}
.zOO, .cb {
	color: #ffffff;
	background-color: #3232dc;
}
.mUd, .cm {
	color: #ffffff;
	background-color: #a98246;
}
.wIn, .cp {
	color: #ffffff;
	background-color: #ff9dbe;
}
.rAt, .ck {
	color: #ffffff;
	background-color: #000000;
}
.jAY, .cg {
	color: #32ff00;
	background-color: #ff001e;
}
.pIe, .ci {
	color: #32ff00;
	background-color: #783c3c;
}
.tOY, .cs {
	color: #00dc00;
	background-color: #ff8209;
}
.fOOt, .ct {
	color: #b6a100;
	background-color: #3232dc;
}
.nOW, .cn {
	color: #7878ff;
	background-color: #783c3c;
}
.vIEW, .cu {
	color: #1111ff;
	background-color: #32ff00;
}
.cabLE, .cl {
	color: #a98246;
	background-color: #ffff00;
}
.heRe, .cr {
	color: #ffffff;
	background-color: #a900d0;
}
.sidE, .cx {
	color: #b7b6b6;
	background-color: #ffffff;
}
.c0, ._Low, ._One {
	color: #b68046;
	background-color: #ffffff;
}
.c1, ._solDier, ._oF, ._aGe, ._siNg, ._iS, ._THe, ._Xerox {
	color: #820e0b;
	background-color: #ffffff;
}
.c2, ._rouGe, ._Jacques, ._blaNc, ._maNana, ._aSia, ._equaTion, ._Wein, ._eXit, ._aZure, ._stePHen {
	color: #c90000;
	background-color: #ffffff;
}
.c3, ._enouGH, ._Hill, ._jorGe, ._Jorge, ._PHone, ._THree, ._piZza, ._niCe, ._aCHe, ._likeD {
	color: #3055d8;
	background-color: #ffffff;
}
.c4, ._naTure, ._caTCH, ._Cello, ._CHurch {
	color: #00dfdf;
	background-color: #ffffff;
}
.c5, ._speCial, ._maCHine, ._Sugar, ._SHe, ._naTion, ._anXious {
	color: #3c81a8;
	background-color: #ffffff;
}
.c6, ._upHill, ._Him {
	color: #8b95ff;
	background-color: #ffffff;
}
.c7, ._chOir, ._qUiet, ._Wet {
	color: #b68046;
	background-color: #ffffff;
}
.c8, ._poignAnt, ._nausEous, ._onIon, ._Johann, ._vaLLe, ._Yet, ._failUre {
	color: #00d200;
	background-color: #ffffff;
}
.c9, ._Run {
	color: #a900bc;
	background-color: #ffffff;
}
.accent {
	font-style: italic;
}

/*** FORMS ***/

/* wordtools forms */

#content #words_sidebar {
	float: left;
	width: 33%;
}

#content .sidetools {
	margin-bottom: 20px;
}
#content label {
	padding-right: 10px; 
	vertical-align: bottom;
}
#content input.typeahead.tt-hint {
	padding: 1px 5px;
	width: 205px;
}

#content .words_wrapper input.tt-input,
#content .words_wrapper input#searchstring {
	padding: 1px 5px;
	width: 205px;
}
#content .words_wrapper input.word-submit {
	font-size: 15px;
	vertical-align: bottom;
}
#content .tt-dropdown-menu {
	background-color: #ffffff;
	border-color: #cccccc;
	border-style: solid;
	border-width: 1px;
	height: 120px;
	overflow-y: scroll;
	padding-left: 5px;
	top: 30px !important;
	width: 200px;
}

#content .words_wrapper #searchtype,
#content .words_wrapper #ruletype {
	font-size: 16px;
	margin: 0 0 5px;
	width: 145px;
}
#content .words_wrapper #ruletype {
	width: 165px;
	margin-right: 10px;
}
#content .words_wrapper span {
	font-family: Monaco, monospace;
}

#content .listarea {
	border: 1px solid #cccccc;
	color: #666666;
	font-size: 21px;
	font-weight: bold;
	height: 300px;
	width: 100%;
	margin-top: 5px;
	padding: 1px 5px;
	overflow-y: scroll;
}

#content .listarea.bulk {
	font-family: Monaco, monospace;
}

#content .listarea ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#content .listarea ul li {
	margin: 0;
	padding: 0 0 3px 0;
	border: 1px dotted #ffffff;
	font-family: Monaco, monospace;
}

#content .listarea ul li.selected {
	border-color: #ff0000;
}

#content .listarea ul li span {
	margin-right: 0px;
}

#content .listarea.bulk ul li {
	float: left;
}

/* encode form */

#content #words_coding {
	float: left;
	width: 67%;
}
#content #wordencode {
	padding: 15px;
}
#content #wordreadme {
	float: left;
	margin: 15px 0 0;
}
#content #wordactions {
	float: right;
	margin: 15px 0 0;
}
#content #addword,
#content #saveword {
	margin-right: 10px;
}

#content .noborder {
	border: none;
}
#content .encodetxt {
	font-size: 38px;
	font-weight: bold;
	margin: -5px 0px 0px;
	min-height: 55px;
	text-align: center;
	width: 100%;
}
#content .encodetxt > span {
	padding: 0 3px;
	margin: 2px;
}
#content .encodetxt > span.selected,
#content .colortable td > span.selected
{
	margin: 0;
	border: 2px dotted #ff0000;
}

#ppsubscribe > input {
	border: none;
	padding: 25px 0;
}
#ppunsubscribe a > img {
	padding: 25px 0;
}

/*** Vowels and Diphthongs on app page ***/

.app_color_key {
	background: #f3f3f3;
	text-align: center;
	border: 1px solid #ddd;
	margin: 20px 0;
}

.toggler {
	background: url(../images/arrow_up.png) no-repeat 99% 50% #ddd;
	color: #333;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	padding: 12px;
	margin: 0;
	cursor: pointer;
	transition:background-color .2s ease-in-out;
}

.toggler:hover {
	background: url(../images/arrow_up.png) no-repeat 99% 50% #bbb;
}

.toggler.contracted {
	background: url(../images/arrow_down.png) no-repeat 99% 50% #ddd;
}

.toggler.contracted:hover {
	background: url(../images/arrow_down.png) no-repeat 99% 50% #bbb;
}

.app_vowels,
.app_diphthongs {
	max-width: 400px;
	text-align: center;
	display: inline-block;
	margin: 20px;
}

.app_vowels .vowel {
	width: 60px;
	display: inline-block;
	margin:5px;
}

.app_diphthongs .diphthong {
	width: 110px;
	display: inline-block;
	margin:5px;
}

.app_vowels .vowel p,
.app_diphthongs .diphthong p {
	margin:0;
}


@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 1) {
	#appsubmit { font-size: 10px; }
	#content .app_wrapper.row > div { width: 47% }
}


@media only screen and (max-width: 1200px) {

	#content .app_wrapper.row > div {
		width: 415px;
	}

}


@media only screen and (max-width: 992px) {

	#content .app_wrapper.row > div {
		width: 305px;
	}

}


@media only screen and (max-width: 767px) {

	#content .app_wrapper.row > div {
		width: 100%;
	}

	#content .app_wrapper .app_btns.fleft {
		text-align: left;
		padding-right: 0;
	}

	#content .app_wrapper .app_btns #appclear {
		margin-left: 0;
	}

	#content .app_wrapper.row > div.mid {
		width: 100%;
		margin-bottom: 25px;
	}

	.toggler {
		background-position: 97% 50% !important;
	}

}