/*these get set later*/
@window-height: 0px;
@window-width: 0px;
@height-cent: @window-height / 100;
@width-cent: @window-width / 100;

@column-count: 1;
@column-gap: 0;
@column-fill: auto;
@panel-rgba: rgba(0, 0, 0, .4);
@border-color: black;
@first-color: white;
@second-color: white;
@background-image: none;
@background-color: inital;
@image-shadow: black;
@shulcloud-logo: none;
@iframe-background: inital;
@iframe-color: initial;


* {
	font-weight: 700;
	text-shadow: none;
}

body, [data-role=page], .bg-fix {
	font-family: 'Open Sans Condensed', sans-serif;
	background-image: @background-image !important;
    background-color: @background-color;
	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100% !important;
}

[data-role=page] > table.slide {
	/*text-align: center;*/
	
}

[data-role=page] > table.slide  td {
	position: relative;
	overflow: hidden;
}

.powered-by-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: @height-cent * 6;
	line-height: @height-cent * 6;
	text-align: center;
	background-color: @panel-rgba;
	box-shadow: 0 0 3px 3px @border-color;
	color: @second-color;
	div {
		height: 73%;
		position: relative;
		top: 12%;
		text-align:right;
		font-size:24px;
		font-color:#8FA2A9;
	}
}

.powered-by-container .powered-left {
	float: left;
	top: 0px;
	padding-left: 20px;
}

.powered-by-container .powered-right {
	float: right;
	top: 0px;
	padding-right: 20px;
}

.powered-by-container .powered-logo, .powered-by-watermark {
	background-image: @shulcloud-logo;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.powered-by-watermark {
	position: fixed;
	height: @height-cent * 4;
	line-height: @height-cent * 4;
	width: @height-cent * 20;
	bottom: 10px;
	right: 10px;
	opacity: 0.5;
}

.powered-by-watermark-no-sig{
	font-size: 16px;
	color: @second-color;
	position: fixed;
	bottom: 10px;
	left: 10px;
}

[data-role=page] table.slide {
	@spacing-width: @height-cent * 2.5;
	@spacing-height: @height-cent * 2.5;
	empty-cells:hide;
	width: 100%;
	height: @height-cent * 93.5;
	border-spacing: @spacing-width @spacing-height;
	table.inner-table {
		/* display: block; */
		height: 100%;
		width: 100%;
		/*border-spacing: (@window-width / 100) * .5 (@window-width / 100) * 1;*/
        /*
		border-spacing: @spacing-width / 2 @spacing-height / 2;
        */

		> tbody > tr > td {
			background: @panel-rgba;
			color: @second-color;
			border-radius: 10px;
			text-shadow: none;
			box-shadow: 0 0 3px 3px @border-color;
		}

	}
}

.section {
  border-color: transparent;
}

/*Block Styles LESS format*/
.ratio-x-4.ratio-y-3 {
	.section.section-size-x-4 {
		.horizontal-general-list(25px, 20%, 10px, 10%, 80%);
	}
	.section.section-size-x-3, .section.section.section-size-x-2 {
		.horizontal-general-list(25px, 20px, 10px);
	}
	.section.section-size-x-4.section-size-y-1, .section.section-size-x-3.section-size-y-1, .section.section-size-x-2.section-size-y-1 {
		.horizontal-general-list(20px, 10px, 10px);
	}
	.section.section-size-x-1 {
		.vertical-general-list(13px);
	}
	.section.section-size-x-1.section-size-y-1 {
		.vertical-general-list(0, .1em, 1.2em, 11px);
	}
}


/*hack to get it working on all displays TODO: fix */
.ratio-x-4.ratio-y-3, .ratio-x-4.ratio-y-2, .ratio-x-3.ratio-y-4, .ratio-x-2.ratio-y-4 {
	.section.section-size-x-4 {
		.horizontal-general-list(25px, 20%, 10px, 10%, 80%);
	}
	.section.section-size-x-3, .section.section.section-size-x-2 {
		.horizontal-general-list(25px, 20px, 10px);
	}
	.section.section-size-x-4.section-size-y-1, .section.section-size-x-3.section-size-y-1, .section.section-size-x-2.section-size-y-1 {
		.horizontal-general-list(20px, 10px, 10px);
	}
	.section.section-size-x-1 {
		.horizontal-general-list(25px, 20%, 10px, 10%, 80%);
		/*.vertical-general-list(13px);*/
	}
	.section.section-size-x-1.section-size-y-1 {
		.horizontal-general-list(25px, 20%, 10px, 10%, 80%);
		/*.vertical-general-list(0, .1em, 1.2em, 11px);*/
	}
	.section-size-x-3,
	.section-size-x-4 {
		.listing {
			-webkit-column-count: @column-count + 1 ;
			   -moz-column-count: @column-count + 1 ;
					column-count: @column-count + 1 ;
			-webkit-column-gap: @column-gap;
			   -moz-column-gap: @column-gap;
					column-gap: @column-gap;
			-webkit-column-fill: @column-fill;
			   -moz-column-fill: @column-fill;
					column-fill: @column-fill;
			font-size: @width-cent * 2 ;
            /*
			line-height: @height-cent * 5.5 !important;
            */
		}

		.date-sep,
		.general-list {
			margin-right: 50px;
		}
	}
	.section-size-x-4.section-size-y-2 {
		h3 {
			padding: 0 !important;
			padding-bottom: @height-cent * 1.4 !important;
			margin: 0 @width-cent * 2.7 !important;
			margin-top: @height-cent * 1.2 !important;
			margin-bottom: @height-cent * 1.9 !important;
			display: block !important;
			/*font-size: @height-cent * 7 !important;*/
			font-size: 3.7em ;
			text-align: left !important;
			padding-bottom: @height-cent * 2;
			border-bottom: 1px solid @border-color;
		}
	}
}

.section-size-x-1 {
	.carousel {
		font-size: 125%;
		
	}
}

h1, h3 {
	margin-top: 0;
	white-space: nowrap;
	overflow: hidden;
	/*text-overflow: ellipsis;*/
	padding-left: 0;
	padding-right: 0;
	font-size: @width-cent * 2.5;
	overflow: visible; /* chrome weirdness */
	overflow-x: initial; /* chrome weirdness */
}


.horizontal-general-list(@height, @side-padding, @dot-padding, @left: auto, @width: auto) {
	.sc-general-list {
		text-shadow: none;
		color: @second-color;
		height: 100%;
		text-align: left;
		> h3 {
			/*display: inline-block;*/
			/*padding-left: @width-cent * 1;*/
			font-size: @width-cent * 2.5;		
			.pixel-ratio-2 & {
				font-size: @width-cent * 5;
			}
			font-weight: 700;
			/*margin-top: @height-cent * 2;*/
			margin-bottom: @height-cent * 2;
			margin-top: 0;
			/*margin-bottom: 0;*/
			text-align: center;
		}
		.listing-container {
			.listing {
				overflow: hidden;
				height: 100%;
				width: calc(100% - 10px);
				font-size: @width-cent * 1.5;
				.pixel-ratio-2 & {
					font-size: @width-cent * 3;
				}
				-moz-column-count: @column-count;
				-moz-column-gap: @column-gap;
				-moz-column-fill: @column-fill;
				-webkit-column-count: @column-count;
				-webkit-column-gap: @column-gap;
				-webkit-column-fill: @column-fill;
				column-fill: @column-fill;
				.list-item, .empty {
					font-weight: 700;
					padding-left: @width-cent * 1.5;
					-webkit-column-break-inside: avoid;
					text-align: left;
				}
				.empty {
					text-align: center
				}
				.general-list {
					padding-left:10px;

					/*display:table;
                    cellpadding:0;*/
					-webkit-column-break-inside: avoid;
					left: @left;
					/*width: @width;*/			
					.general-name {
						vertical-align: top;
						font-weight: 700;
						font-size: 125%;
						padding-left: @width-cent * 1.5;
						
						.pixel-ratio-2 & {
							max-width: @width-cent * 25;
						}
						
						
						/*white-space: nowrap;
						max-width: @width-cent * 12.5;
						overflow: hidden;
						text-overflow: ellipsis;*/
						
						/*text-align: justify;*/						
						.small-font {
							margin-top: -5px;
							margin-bottom: 5px;
							font-size: 60%;
						}
					}
					
					.general-name:after {
                      content: "";
                      display: inline-block;
                      width: 100%;
                    }

					.general-value {
						overflow: hidden;
						font-weight: 700;
						font-size: 125%;
						/*padding-left: @width-cent;
						min-width: @window-width / 100 * 8;*/
						color: @first-color;
						text-align: right;
					}			
					> div {
						display: inline-block;
					}
				}			
			}

			
			.no-columns {
				
			}
		}
	}
}
.vertical-general-list(@padding-bottom, @heading-margin: .83em, @heading-size: 1.5em, @font-size: 16px) {
	.sc-general-list {
		h2 {
			margin: @heading-margin 0;
			font-size: @heading-size;
		}
		.general-list {
			display: block;
			-webkit-column-break-inside: avoid;
			> div {
				display: inline-block;
				font-size: @font-size;
			}
			.general-name {
				min-width: 150px;
			}
			.general-value {
				font-weight: bolder;
				padding-bottom: @padding-bottom;
			}			
		}		
	}
}


/* full screen size */

.section-size-x-4.section-size-y-2 {
	[class $= widget]:not(.davening-widget) {
		height: 100%;
	}

	.listing {
			-webkit-column-count: @column-count + 1 ;
			-moz-column-count: @column-count + 1 ;
				column-count: @column-count + 1 ;
	}
}

.cal-info {
	position: absolute;
	top:0;
	background: white;
}


.relative-date,.details {
	color: @first-color;
}

.carousel {
	h3 {
		margin: 0;
		font-size: @width-cent * 2.5;
	}
	@height: 70px;
	/*.gradient(@panel-rgba, darken(@panel-rgba, 20%), 40%, 50%);*/
	/*.gradient(rgba(80, 80, 80, .8), rgba(25, 25, 25, .8), 40%, 50%);*/
	text-align: center;
	padding: @height-cent  @width-cent * 10;
	color: @second-color;
	text-shadow: 0px 3px 3px rgba(150, 150, 150, 1);
	/*height: @height;*/
	/*line-height: @height;*/
	border-radius: 10px;	
	font-size: 200%;
	.small-font {
		font-size: 60%;
		margin-top: -5px;
		margin-bottom: -5px;
	}
}

.carousel.photo {
	background: initial;
	height: 100%;
	> div {
		max-width: 100%;
		max-height: 100%;
		vertical-align: middle;
		/*display: none;*/
	}
	
}

.parsha-widget {
	> span {
		display: block;
	}
	color: @second-color;
	.section-size-x-1 & > span {
		/*padding: 0 10px;*/
	}
	.section-size-x-4.section-size-y-2 &, .section-size-x-4section-size-y-3 & {
		font-size: 300%;
		> span {
			display: block;
		}
	}
}

.birthday-widget {
	color: @second-color;
}

.anniversary-widget {
	color: @second-color;
}

.announcements-widget {
	color: @second-color;
}

.candlelight-widget {
	color: @second-color;
	div {
		text-align: center; 
		position:relative; top: 50%;
		font-size: 250%;
	}
}

.havdalah-widget {
	color: @second-color;
	div {
		text-align: center; 
		position:relative; top: 50%;
		font-size: 250%;
	}
}

div.image {
	height: 100%;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.daf-widget {
	h3 {
		display: inline-block;
		font-size: min(50px, @width-cent * 2.5);
		font-weight: 700;
		/*margin-top: @height-cent * 1.5;*/
		margin-top: 0;
		margin-bottom: @height-cent * 1.5;
	}
	div {
		text-align: center;
        font-size: min(50px, @width-cent * 4);
		font-weight: 700;		
	}	
	h4 {
		display: inline-block;
		padding-left: @width-cent * 1;
        font-size: min(50px, @width-cent * 1.5);
		font-weight: 700;
		margin-top: @height-cent * 2;
		margin-bottom: @height-cent * 2;
	}
}

.clock-widget {
	> div {
		text-align: center;
		font-size: 150%;
		font-weight: 700;
	}
}

.omer-widget {
	> div {
		text-align: center;
		font-size: @width-cent * 2.0;
		font-weight: 700;
		position: relative;
		top: 30%;
		transform: translateY(-20%); 
	}
	
	h1 {
		font-size: @width-cent * 2.5;		
	}
}

.next-holiday {
	font-size: 200%;
	text-align: center;
}

.parsha-widget {
	font-size: 200%;
	text-align: center;
}

.davening-widget {
	font-size: 200%;
	text-align: center;
	line-height: 1.1;
	.section-size-x-4.section-size-y-2 & {
		font-size: 300%;
		/*line-height: @height-cent * 15;*/
		div {
			
		}
		h1 {
/*			margin-top: @height-cent * 5;
			margin-bottom: @height-cent * 5;*/
		}
	}
	h1 {
		font-size: @width-cent * 2.5;		
	}
	.section-size-x-1 & {
		font-size: 125%;
	}
}

.sc-frame {
  height: 100%;
  width: 100%;
  background-color: @iframe-background;
  color: @iframe-color;
  border: none;
  iframe {
    height: 100%;
    width: 100%;
    border: none;
  }
}

.gradient(@to, @from, @start, @end, @angle: 90deg) {
	background: @to;
	background: -moz-linear-gradient(@angle, @to @start, @from @end);
	background: -webkit-linear-gradient(@angle, @to @start, @from @end);
	background: -o-linear-gradient(@angle, @to @start, @from @end);
	background: -ms-linear-gradient(@angle, @to @start, @from @end);
	background: linear-gradient(mod(@angle + 90, 360), @to @start, @from @end);
}

.clearfix() {
	zoom: 1;
	&:before { content: ''; display: block; }
	&:after { content: ''; display: table; clear: both; border-spacing: initial; }
}

.date-sep {
	clear: both;
	background: rgba(255, 255, 255, .1);
	padding-left: 15px;
	break-after: avoid-column;
	-webkit-column-break-after: avoid;
}

.one-column-override {

}

.formatting-options {
	/*display:none;*/
}