/* 
	Simulator preview styles - only for the preview frame
    Created on : Oct 15, 2014, 11:15:08 AM
    Author     : Luke

	Important note - those in the #sfchurchapp_previewcontent are downsized with transform. (Un-downsized for image screenshot)
	Note the use of em instead of px sometimes, em inherits outer elements' font-size while px does not. This could be handy.
*/

.hide
{
	visibility:hidden;
}

body.sfchurchapp {
	font:100% "Open Sans";
	background: #F5F5F5;
	min-width: 1000px;/* Scroll rather than downsizing */
}

/* For drag drop */
body.highlighting [id$="upload-ui"] {
	background:orange;
}
body img.wideMatchHeight {
	/*When it's wide, match 100% height not 100% width. See js setting this */
	height: 100% !important;
	width: auto !important;
}
body.highlighting .uploader.haveUpload img {
	opacity: 0.5;
}
.SKtabSwitch {
	position: fixed;
	transform: rotate(90deg);
	transform-origin: left top 0;
	margin: 15px;
	width:260px;
}
.SKtabSwitch >* {
	color: #FFF;
	background: #222;
	border-radius: 6px 6px 0 0;
	border: 1px solid #DCDCDC;
	width: 80px;
	height: 40px;
	cursor: pointer;
	display:inline-block;
	font: 12px "Open Sans";
}
#Setup.sel, #Design.sel {
	background:#FFF;
	color:#000;
	border-bottom:none;
}

a, img {/* for old IE being weird*/
	border:none;
	outline:none;
}

.appmenu {
	background:#000;/*#555;*//*#f4f4f4*/
	color:#FFF;
}
.sfsyncbtn, .appmenu:after {
	bottom: 30px;
    left: 30px;
    color: blue;
    position: absolute;
    z-index: 2;
}
.sfsyncbtn {
	width: 106px;
	cursor:not-allowed;/*(only preview)*/
}

.simulatorpreviewer {
	color:#FFF;
}

/* Maybe this #configurer style shouldn't go in simulatorcss, but if it's same frame */
#configurer {
	color: #C3C3C3;
	/*float: right;*/
	display: inline-block;
	vertical-align: top;
	width: 500px;
	margin: 90px 0;
}
#configurer .ui-tabs-nav {
    width: 444px;
    margin: 20px auto 0 auto;
}
#configurer .ui-tabs-nav >li:first-of-type {
	width: 50%;
}
#configurer .ui-tabs-panel {
	color: #C3C3C3;
}
/*does nothing
sfchurchapp_iconrows {
	font: 12px "Open Sans";
}*/
#configurer .heading {
	text-align:left;
}
body #configurer #sfchurchapp_iconrows .fa.fa-bars {
	cursor: ns-resize;
}
#configurer .sfchurchapp_iconlabel {
	cursor: pointer;
}
#configurer .sfchurchapp_iconlabel,
#configurer .heading .titleName {
	display: inline-block;
	width: 50%;
	text-align: left;
}
#configurer .heading >div,
#configurer #sfchurchapp_iconrows .fa {
	display: inline-block;
	width: 55px;
	font-size: 71%;
	text-align: center;
}

/* less width, kind of indented after more: */
#configurer #sfchurchapp_iconrows .typemore ~ .sfchurchapp_previewicondiv {
	width: 90%;
	margin: 0 0 0 auto;
}
/* also in preview */
.appmenu .typemore ~ .sfchurchapp_previewicondiv {
	display:none;
}
#configurer #sfchurchapp_iconrows .typemore ~ .sfchurchapp_previewicondiv .sfchurchapp_iconlabel {
	width: 182px;
}
#configurer .sfchurchapp_iconlabel {
	margin:0 0 5px 0;
}
#configurer #sfchurchapp_iconrows .fa {
	font-size: 18px;
	cursor: pointer;
}
#configurer #sfchurchapp_iconrows .fa:hover {
	color:#252525;
}
#configurer .editor {
	background: #222;
	position: relative;
	padding: 20px;
	margin: 2px 20px;
}

/* For the posts, sermons editor */
.editor form ul {
	list-style-type: none;
	text-align: left;
	padding: 3px 27px;
	background: #0C0C0C;
	height: 100px;
	overflow-y: scroll;
}
.editor .layoutChoice {
	display: inline-block;
	font-size:0;
	width:100px; height:100px;
	background: #DCDCDC;
	border: 2px solid transparent;
	margin: 0 9px;
}
.typemore ~ .sfchurchapp_previewicondiv .layoutChoice {
	margin: 0 2px 0 0;
}

.editor .layoutChoice.sel {
	border: 2px solid #447FC4;
}
.editor .layout1 .quarter {
	width:40px; height:40px;
	display: inline-block;
	margin: 5px;
	background: #FFF;
}


.editor .layout2 .row {
	width: 60%;
	height: 29%;
	margin: 3% 3% 3% auto;
	background: #FFF;
}

.editor .delayDropdown
{
	margin-left:3%;
}

.editor .calendarDropdown
{
	width:100%;
	height:22px;
	border: 1px solid #CCC;
}
.inputReadonly
{
	opacity:0.5;
}

#AddBtn {
	cursor: pointer;
	display: block;
	text-align: left;
	color: #1ea9ee;
	font-weight: bold;
	font-size:12px;
}
#Adder {
	display: none;
	/*height: 507px;*/
	padding-bottom: 16px;
	margin-bottom: 10px;
	background: #222;
	opacity: 0;
	transition: linear opacity 0.33s;
	
    width: 390px;
    margin: 0 auto;
    text-align: left;
}
#Adder.shown {
	display: block;
	opacity: 1;
	transition: linear opacity 0.33s;
}
#Adder >* {
	color: #FFF;
	cursor: pointer;
	font-size: 40px;
	width: 110px;
	height: 110px;
	margin: 14px 0 0 14px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	text-decoration: none;
	text-align: center;
}
#Adder .sermoncloudicon {
    background: url('Sermon-Cloud-Logo-White.svg') no-repeat 50% 20% /67px;
    width: 64px;
    height: 64px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
#Adder i {
	margin: 24px 0 4px 0;
	/*make consistent, icon and fotnawesome icon*/
	line-height:40px;
	width:40px;
	height:50px;
	font-style: normal;
}
#Adder label {
	display: block;
	font: 12px "Open Sans";
	width: 100%;
	position: absolute; left:0; bottom: 10px;
}
#Adder .addsermons {
	background: #1d71ab;
}
#Adder .addblog {
	background: #803b76;
}
#Adder .addblog i {
	background: url(../images/sectionBlog.png) no-repeat 1px 0 /40px;
	display: inline-block;
}
#Adder .addgive {
	background: #c82b8d;
}
#Adder .addlink {
	background: #39a48d;
}
#Adder .addmap {
	background: #129212;
}
#Adder .addbible {
	background: #fb7222;
}
#Adder .addbible i{
	background: url(../images/sectionBible.png) no-repeat 0 10px /40px;
	display: inline-block;
}
#Adder .addcontact {
	background: #00bcf2;
}
#Adder .addcalendar
{
	background: #8c1000;
}
#Adder .tutorials {
	background: #0F829C;
}
#Adder .addvideo
{
	background: #ecad00;
}

/* #deviceimage means the simulator (right panel), not sidekick:

the bottommmenu mode:*/
body.sfchurchapp {
	text-align: center;
}

#deviceimage.SFAppThemebottom .appmenu{
	top:auto; width:100%;
}
#deviceimage.SFAppThemebottom .appmenu >div{
	display:inline-block;
	padding: 8px;
}

/*Common topmenu, menu stuff:*/
#deviceimage .icontoggle {
	cursor: pointer;
    z-index: 99;
    position: absolute;
	padding: 80px 66px 13px 66px
}
.activity >.title .spkr_btn {
	position:absolute;
	right:66px; top:75px;
	z-index: 1; /*above edit overlay*/
	/*cursor: pointer; doing nothing now*/
}
#deviceimage .icontoggle {
	color:#fff;
	font-family: fontawesome;
}
#deviceimage .icontoggle img{
	height: 89px;
}
#deviceimage .appmenu {
	position: absolute;
	z-index: 2;
    top: 212px;
	bottom: 0px;
    width: 624px;
	left: 0;
	transition: left 0.33s, right 0.33s, top 0.33s, bottom 0.33s;
}
#deviceimage.hiddenmenu .appmenu,
#deviceimage.hiddenmenu .sfsyncbtn {
	/*transition-property:left;
	transition-duration:2s; inconsistent*/
	left:-624px;/*to be changed in animate js*/
}
/* --Activity screen behavior: -- */
#deviceimage .activity {
	top: 0px; width:100%; height:100%;
	position: absolute;
}
#deviceimage .activity >.title {
	text-align:center;
	/*text-transform: uppercase;*/
	font:50px "Open Sans";
	font-weight: bold;
	letter-spacing: 2.8px;
	color: #FFF;
	position: absolute;
	width: 100%;
	height: 212px;
	z-index: 10;/*or html2canvas glitches, at smaller numbers*/
}
.activity >.title >div {/*The main .titletext.*/
	margin: 99px 0;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	left:182px; right:151px;
	position:absolute;
}

#deviceimage .activity >.viewer {
	position: absolute;
	overflow:hidden;/*so scrollTop() works*/
	top: 270px;
	bottom: 0;
	right: -624px;/*137px+usual 40, move to right */
	left: 624px; /*377px + usual 40 margin*/
	z-index: 1;/*or html2canvas glitches*/
	transition: left 0.33s, right 0.33s, top 0.33s, bottom 0.33s;
	padding:0;
}
#deviceimage.hiddenmenu .activity >.viewer {
	padding: 0;
	left:0px;/* ^normal padding is padding so it's possible to have full-width'*/
	right:0px;
}
#deviceimage .activity a {
	color:#DEDEDE;
}


#deviceimage .viewer .preview {
	/*this-is-a-preview headings*/
	width: 80%;
	margin: 0 auto;
	font-size: 100px;
	text-align: center;
	font-weight: 300;
}
/*not editing: no such thing as .activity .editor in screen
.activity .editor {
	display:none;
}
.activity:hover .edit_highlight {
	border:3px dashed #555;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}*/

.edit_btn {
	display:none;
	position:absolute;
	cursor:pointer;
	font:45px fontawesome;
	z-index: 2;
}

.editor .mce-edit-area >iframe {
	height:300px;
}
#deviceimage .mce-ico {
	font-size:35px;
	line-height:40px;
}
#deviceimage .mce-btn button {
	padding:18px 46px 37px 31px;
}

/*editing in phone N/A
.AppEditing .editor {
	display:block;
}
.AppEditing .activity .viewer,
.AppEditing .activity .edit_highlight,
.AppEditing #outer .edit_btn {
	display:none;
}
.AppEditing #screenshotBtn {
	opacity:0.5;
}*/

.httpurl.invalidurl + .errUrlBox{
	display:block;
}
.errUrlBox {
	display:none;
	color:#FFF;
	text-align: left;
}

.httpCalendar.invalidurl + .errCalendarBox{
	display:block;
}
.errCalendarBox {
	display:none;
	color:#FFF;
	text-align: left;
}
.sfchurchapp_previewicondiv.typecalendar .editor a.tutorialLink
{
	color:#FFF;
}

/*noshow
#deviceimage.SFAppThemeside .appmenu img {
	height:49px; width:49px;
	margin:8px;
}*/

#deviceimage .sfchurchapp_previewicondiv {
	font: 20px Arial;
	cursor:pointer;
	width:100%;
	margin:35px 0 -32px 17px;
	text-align: left;
	border:none;
}
#deviceimage .sfchurchapp_iconlabel {
	margin:41px 18px;
	font: 50px "Open Sans";
}
#deviceimage .sfchurchapp_previewicondiv >div{
	display:inline-block;
	vertical-align:middle;
	font-weight:bold;
	white-space:nowrap;
	overflow: hidden;
	max-width:89%;
}
#deviceimage .sfchurchapp_previewicondiv >div img{
	display:none;
}

[id$="drop-area"] img {
	/*center
	display:inline-block;*/
	position: absolute; left: -100%; right: -100%; top: -100%; bottom: -100%;
	margin: auto;
}

#deviceimage.layout0 /*.griditem */[id$="drop-area"] img {
	position:absolute !important; /*get overwritten in sytle by something*/
}

/*********************************
      Grid, layout Nook #1 
**********************************/
#deviceimage.layout1 .viewer {
	text-align: left;/*or third item is centered*/
}
#deviceimage.layout1 .postItem,
#deviceimage.layout1 .griditem {
	width: 480px;
	height:704px;/* for IE */
	margin: 0px 66px;
	display: inline-block;
}
#deviceimage.layout1 .uploader,
#deviceimage.layout1 .postPreview {
	max-width: 100%;
}
#deviceimage.layout1 [id$="drop-area"] {
	/*all square*/
	width: 480px;
	height: 480px;
	overflow: hidden;
	position: relative;
}
#deviceimage.layout1 .postPreview {
	width: 480px;
	height:480px;
	margin: 33px 0 17px 0;
}
#deviceimage.layout1 [id$="drop-area"] img {
	/*clip*/
	height: auto;
	width: 100%;
}
#deviceimage.layout1 .postPreview .excerpt {
	max-height: 224px;
	font: 46px/55px "Open Sans";
	overflow:hidden;
}

#deviceimage.layout1 .excerpt {
	display: none;
}
/*tablet*/
#deviceimage.tablet.layout1 .postItem,
#deviceimage.tablet.layout1 .griditem {
	width: 577px;
	margin: 13px 0 0 87px;
}
#deviceimage.tablet.layout1 .postItem .postPreview/*,
#deviceimage.tablet.layout1 .griditem*/
 {
	height: 423px;
	margin: 48px 0 0 0;
}
#deviceimage.tablet.layout1 [id$="drop-area"] {
	/*big square*/
	width: 533px;
	height: 533px;
}
#deviceimage.tablet.layout1 .uploader {
	max-width: 533px;
}

#deviceimage.tablet.layout1 .postPreview {
	width: 533px;
}

#deviceimage.tablet.layout1 .griditem .sectionTitle {
    width: 533px;
}

#deviceimage.layout1 .postItem h3,
#deviceimage.layout1 .sectionTitle
{
	font: 58px/81px "Open Sans";
	/*font-weight: 300;*/
	letter-spacing:1px;
	height:166px;
	max-height:166px;
}

#deviceimage.layout1 .sectionTitle {
	margin: 0 0 50px 0;
	overflow: hidden;
	padding-top: 33px;
	padding-bottom:33px;
}

#deviceimage.tablet.layout1 .postItem h3
#deviceimage.tablet.layout1 .sectionTitle
{
	font: 47px/64px "Open Sans";
	font-weight: 300;
	letter-spacing:1px;
	height:133px;
	max-height:133px;
}

/********************************
  Gamut layout, id 0, full width
*********************************/
.editor .layout0 .row {
	width: 100%;
	height: 32%;
	margin: 0 0 3% 0;
	background: #FFF;
}
#deviceimage.layout0 .activity div.viewer {
	padding: 0;
	top: 210px;
}
#deviceimage.layout0 .uploader,
#deviceimage.layout0 .postPreview {
	display: block;
	max-width: 100%;
}
#deviceimage.layout0 .postItem .postTitle,
#deviceimage.layout0 .griditem .sectionTitle {
	position: absolute; top: 50%;
	text-align: center;
	margin: -124px 0 0 0;
	left: 83px;
	right:83px;
	max-height: 281px;
	z-index: 3;
	width:1076px;
}

/*#deviceimage.layout0 .griditem .sectionTitle {
	top: 30%; should be 50? already defined
}*/
#deviceimage.layout0 .excerpt,
/*and the date that normally shows, only on screenshotting:*/
#deviceimage.layout0 .date.notImgSim,
#deviceimage.layout0 .titletext.notImgSim{
	display: none;
}
#deviceimage.layout0 [id$="upload-ui"] {
	overflow:hidden;
}
#deviceimage.layout0 [id$="drop-area"] {
	/*full width*/
	width: 100%;
	height: 629px;
	overflow: hidden;
	background: #000;
}
#deviceimage.layout0 [id$="drop-area"] img {
	/*clip*/
	height: auto;
	width: 100%;
	/*30% black*/
	opacity: 0.7;
}
#deviceimage.layout0 .hideTitle [id$="drop-area"] img{
	opacity: 1;
}

#deviceimage.layout0 .uploader:not(.haveUpload) img {
	opacity: 0; /*still clickable*/
}
#deviceimage.layout0 .uploader:not(.haveUpload):after {
	position: absolute; left:5px; bottom:5px;
	content:"YOUR IMAGE HERE";
	font:50px/50px "Open Sans";
	color: #C3C3C3;
}

#deviceimage.layout0 .postItem,
#deviceimage.layout0 .griditem {
	position: relative;
	float: left;/*same as others - or makes space between*/
	height:629px;
	width:100%;
	margin:0;
}
/*tablet:*/
#deviceimage.layout0.tablet .postItem,
#deviceimage.layout0.tablet .griditem{
	height: 775px;
}
#deviceimage.layout0.tablet .postTitle,
#deviceimage.layout0.tablet .griditem .sectionTitle {
	margin: -133px 0 0 0;
	left: 93px;
	right:93px;
	max-height: 307px;
	font: 96px/169px "Open Sans";
	/*font-weight: 300;*/
	letter-spacing:1px;
	width:1861px;
}

#deviceimage.layout0.tablet [id$="drop-area"] {
	height: 775px;
}

#deviceimage.layout0 .postItem h3,
#deviceimage.layout0 .griditem .sectionTitle
{
      /* margin:0 0 30px 0;*/
       overflow:hidden;
       /*2 lines max:*/
       max-height:285px; height:497px;
       font: 91px/137px "Open Sans";
       font-weight:300;
       letter-spacing:1px;
}

.fullWidth {
	width:100%;
}
#deviceimage.layout0 .centered,
#deviceimage.layout0 .griditem .sectionTitle.centered div {
	margin-left: 83px;
}


/*********************************
      Reveal, layout Reveal #2 
**********************************/
#deviceimage.layout2 .activity >.viewer {
	top: 210px;
}

#deviceimage.layout2.tablet .activity >.viewer {
	top: 210px;
}

#deviceimage.layout2 .postItem h3,
#deviceimage.layout2 .griditem h3 {
	font: 56px/68px "Open Sans";
	max-height:137px;
	height: 137px;
	width: 530px;
}

#deviceimage.layout2.tablet .postItem h3,
#deviceimage.layout2.tablet .griditem h3
 {
	font: 63px/88px "Open Sans";
	max-height:187px;
	height: 187px;
	width: 960px;
}

#deviceimage.layout2 .postItem,
deviceimage.layout2 .griditem
{
	border-bottom: 5px solid #5D5D5D; /*smaller and invisible on standard resolution*/
}

#deviceimage.layout2 .activity >.viewer [id$="drop-area"] {
	overflow:hidden;
}

#deviceimage.layout2 .activity >.viewer [id$="drop-area"],
#deviceimage.layout2 .uploader {
	width: 623px;
	height: 467px;
}
#deviceimage.layout2 .activity >.viewer [id$="drop-area"] img {
	width: 100%;
	height: auto;
}

#deviceimage.layout2.tablet .activity >.viewer [id$="drop-area"],
#deviceimage.layout2.tablet .activity >.viewer [id$="drop-area"] img,
#deviceimage.layout2.tablet .uploader {
	width: 912px;
	height: 684px;
}

#deviceimage.layout2 .uploader {
	border: 5px solid #5D5D5D;
	border-bottom:none;
	border-top:none;
}

#deviceimage.layout2 .postPreview {
	max-height: 712px;
	overflow:hidden;
	margin-left:30px;
	letter-spacing:1px;
}

#deviceimage.layout2.tablet .postPreview {
	overflow:hidden;
	margin-left:83px;
	letter-spacing:1px;
	max-height: 679px;
	height: 547px;
}

#deviceimage.layout2 .uploader {
	min-width: 619px;
	height: 467px;
}

#deviceimage.layout2.tablet .uploader {
	min-width:909px;
	max-width:909px;
	height: 684px;
}

#deviceimage.layout2.tablet .postItem,
#deviceimage.layout2.tablet .griditem
 {
	height: 684px;
	margin:0px;
}

#deviceimage.layout2.tablet .postPreview {
	max-width:960px;
	/* margin-top:-60px; */
}

#deviceimage.layout2 .postPreview .excerpt {
	/*font-weight:300;*/
	height: 177px;
	line-height: 58px;
}

#deviceimage.layout2.tablet .postPreview .excerpt {
	font-size: 52px;
	line-height: 64px;
	padding-top: 53px;
	height: 240px;
}

#sfchurchapp_previewcontent
{
	overflow:hidden;
	background:#252525;
	
	/*.tallphone default:*/
	position: absolute;
	width: 1242px; /* was 750px.  750/.604 = newphone dimension */
	height: 2208px; /*was 1334px*/
	top: 100px;
	font-size:41px;/*default - since it should be bigger in downsized, this is like 11pt.*/
}

/***** Having out of app experience, notification pushy ******/
#deviceimage.layoutPush .activity .title,
#deviceimage.layoutPush .appmenu,
#deviceimage.layoutPush .icontoggle,
#deviceimage.layoutPush .sfsyncbtn {
	display: none;
}
#deviceimage.layoutPush .activity >.viewer {
	top: 0;
}
#deviceimage.layoutPush #screenshotBtn {
	opacity: 0.5;
}
#configurer .SFApp_NA span {
	position: absolute;
	top: 40%;
}


/* downsized: what user sees on screen: */
.tallphone #sfchurchapp_previewcontent.downsized {
	/*width: 275px;
	height: 486px;
	^ downscale to that dimension, so screenshot-getter can have full-res of retina*/
	left:27px;/*viewable*/
	transform:scale(0.221);
	-webkit-transform:scale(0.221);
	-o-transform:scale(0.221);
	-ms-transform:scale(0.221);
	transform-origin: 10px -12px;
	-webkit-transform-origin: 10px -12px;
}

.uploader {
	border:5px solid #CECECE; /*shorter shows no border some places on standard 1920x1080*/
	cursor:pointer;
}
body .haveUpload {
	border:none;/*border's only for blank blocks*/
}
.moxie-shim { /* funny in full width layout, extra space bottom */
	max-height:100%;
}

.uploader img{
	display:none; /* no show placeholder when screenshotting*/
}/*unless have actual image:*/
.uploader.haveUpload img{
	display:block;
}
#sfchurchapp_previewcontent.downsized .uploader img {/*but always show img in preview:*/
	display:block;
}
/*img[src$="/Block_Not_Uploaded.png"] {
#sfchurchapp_previewcontent.downsized .haveUpload img{
	display:block;
}*/
#sfchurchapp_previewcontent.downsized .notImgSim{
	/* rendered in actual device but we want to see over the "your image here" hint in sim:*/
	display:none;
}
#sfchurchapp_previewcontent .haveUpload .notImgSim{
	display:none;
}
[id$="drop-area"] .notImgSim {
    position: absolute;
    font-weight: bold;
    top: 29%;
    left: 0;
    right: 0;
    text-align: center;
}

#sfchurchapp_previewcontent .viewer {
	background:#252525;/*or html2canvas glitches*/
}

#deviceimage.tablet #sfchurchapp_previewcontent
{
	position: absolute;
	width: 2048px; /*previously 1536*/
	height: 2732px; /*previously 2048*/
	top: 31px;
	/*font: 40px "Open Sans"; default font a little bigger than the usual set above - if so it needs adjustment to 2line-titles.*/
}
#deviceimage.tablet #sfchurchapp_previewcontent.downsized {
	/*width: 387px;
	height: 517px;
	^ downscale to that dimension, so screenshot-getter can have full-res of retina
	*/
	left: 59px;
	transform: scale(0.1893);
	-webkit-transform:scale(0.1893);
	-o-transform:scale(0.1893);
	-ms-transform:scale(0.1893);
	transform-origin: -39px 47px;
	-webkit-transform-origin: -39px 47px;
}
/* real size: pushed to right:*/
.tallphone #sfchurchapp_previewcontent,
.tablet #sfchurchapp_previewcontent {
	left: 1400px;/*render off-screen, no jump*/
}

.specific {
	display:none;/*by default - and show current:*/
}
#deviceimage.tallphone .specific.tallphone{
	display:block;
}
#deviceimage.tablet .specific.tablet {
	display:block;
}

/*Don't show half phone render*/
#deviceimage {
	opacity: 0;
	display: inline-block;
	vertical-align: top;
	margin: 25px 0 0 0;
	width: 50%;
	max-width: 40%;/*nonsupporting browser*/
	max-width: calc(100% - 530px);/*Don't jump to its own line when 500px right side is bigger*/
}

#deviceimage.tallphone, #deviceimage.tablet {
	/*display:block;*/
}

a.SFLogo {
	background:url(../images/dark/thick/pbsf.png) center center no-repeat;
	background-size: 626px 70px;/*downsize the big image. Without 2 numbers Firefox has problem with screenshot.*/
	height: 149px;
}

[id$="drop-area"] img,
[id$="drop-area"] {
	/* thumbnail like 132x99 for the 1024x768  *2 +10%*/
	width: 480px;
	height: 361px;
}

/* for editing stuff */
#screenSpinner {
	display:none;
	position:absolute;
	top:50%;left:50%;
	margin: -20px 0 0 -25px;
	z-index: 9999;
}
.screenLoading #screenSpinner {
	display:block;
}

.editor input,
.editor button,
.editor textarea {
	font:inherit;/*not tiny*/
}


.editor input[type=checkbox],
.editor select {
	margin: 5px 9px;
}
.editor select {
	display:block;
	margin:9px auto;
	/*width:200px; height:230px; was for old sermon selector?
	*/
}
.editor textarea {
	width:95%;
}
.editor button {
	padding: 3px;
}

#sfchurchapp_devicepreviewmenu .pseudolink img {
	height:50px;
}
.editor button[type=submit], .editor button.cancelSection {
	cursor: pointer;
	width: 150px;
	max-width:calc(50% - 22px);
	padding: 7px 12px;
	margin: 10px;
	background: #1ea9ee;
	color: #FFF;
	font-size: 13px;
	border: none;
	border-radius: 4px;
	text-transform: uppercase;
}

.editor button[type=submit]:disabled, .editor button.cancelSection:disabled {
	background: #b8b8b8;
	color:#FFF;
}
.editor button.cancelSection {
	background: #FFF;
	color:#1ea9ee;
}

.editor input[type=text] {
	padding: 0 0 0 20px;
	width: 95%;
	height: 22px;
}
/*no bold editor headings!*/
.editor h1, .editor h2, .editor h3 {
	font-weight: normal;
	font-size: 15px;
}

#sfchurchapp_devicepreviewmenu >div
{
	/*out of resized area*/
	cursor: pointer;
	position: relative;
	display: inline-block;
	width: 60px;
	height: 43px;
	background:url('../images/DeviceIcons.png') no-repeat 0 0 /114px;
	margin: 0 auto;
	border-radius: 5px;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* device size selector: */
#sfchurchapp_devicepreviewmenu >div >div
{
	font-size:13px;
	position:absolute;
	top: 0;
	width: 100%;
	text-align:center;
}

/*unused?*/
#sfchurchapp_devicepreviewmenu #sfchurchapp_devicepreviewphone {
	background-position:4px 12px;
}
#sfchurchapp_devicepreviewmenu #sfchurchapp_devicepreviewtablet {
	background-position:-64px 12px;
}

#screenshotBtn {
	background: url(../images/ScreenshotBtn.png) 50% 0 no-repeat transparent;
	color: #fff;
	height: 40px;
	cursor: pointer;
}
#screenshotBtn div {
	padding: 8px 0 8px 32px;
	width: 141px;
	margin: 0 auto;
	font: 16px "Open Sans";
	font-weight: 300;
}

#sfchurchapp_devicepreviewmenu div.current
{
	background-color: rgba( 136, 192, 88, 0.25 );
}
#notifications {
	width: 100%;
	height: 100%;
	text-align: left;
	box-sizing: border-box;
}
#deviceimage.tallphone #notifications {
	background: url(../images/iPhoneNotif.jpg) no-repeat 0 0 /100%;
	padding: 232px 84px;
	font: 50px "Open Sans";
}
#deviceimage.tablet #notifications {
	background: url(../images/iPadNotif.jpg) no-repeat 0 0 /100%;
	padding: 400px 216px;
	font: 60px "Open Sans";
}

#notifications .AppName {
	background: rgba(27, 27, 27, 0.7);
	padding: 10px 0 20px 0;
}
#notifications img {
	border-radius: 33px;
	display: inline-block;
	vertical-align: middle;
	margin: 15px 30px;
	width: 83px;
}
#notifications a {
	text-decoration: none;
}
#notifications .message {
	margin: 30px 8px 30px 149px;
	padding-bottom: 41px;
	border-bottom: 3px solid #CCC;
	width: calc( 100% - 180px);
}

/*never show these:*/
body .quicktags-toolbar {
	display:none;
}

.editor select.service {
	margin-bottom:20px;
	margin-left:0px;
}

.editor label.streamIdLabel {
	margin-top:20px;
	margin-bottom:10px; 
}

.editor label.streamTypeLabel {
	margin-top:20px;
}

.btn.btn-green {
    color: #FFF !important;
    background-color: #4fb3d0;
    border: none;
    border-radius: 4px;
}
.btn {
    background-color: #f0f0f0;
    background-repeat: repeat-x;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    font: normal 12px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    text-align: center;
    text-decoration:none;
    /* text-shadow: 1px 1px 1px rgba(0,0,0,0.2); */
    text-shadow: none;
    padding: 5px 18px;
}
.mce-branding-powered-by {
	display: none;
}
.mce-edit-area.mce-panel.mce-container {
	border-right-width: 1px !important;
}