/* layout */
body{
	color: black;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	min-width: 1200px;
	font-weight: 300;
}
.content_part{
	padding: 10px;
	padding-top: 90px;
	padding-bottom: 130px;
	border-bottom: 1px solid plum;
	/*background-color: AliceBlue;*/
	/*credit: http://www.colorzilla.com/gradient-editor/ */
	background: #f7fbff; /* Old browsers */
	background: -moz-linear-gradient(top, white 0%, #f0f8ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,#f0f8ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, white 0%,#f0f8ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, white 0%,#f0f8ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, white 0%,#f0f8ff 100%); /* IE10+ */
	background: linear-gradient(to bottom, white 0%,#f0f8ff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='#f0f8ff',GradientType=0 ); /* IE6-9 */
}
.lastPart{
	background: lavender; /* Old browsers */
	background: -moz-linear-gradient(top, white 0%, lavender 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,lavender)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, white 0%,lavender 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, white 0%,lavender 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, white 0%,lavender 100%); /* IE10+ */
	background: linear-gradient(to bottom, white 0%,lavender 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='lavender',GradientType=0 ); /* IE6-9 */
	border-bottom: none;
}
.zugi____deprecated{
	/*background-color: Lavender;*/
	/*credit: http://www.colorzilla.com/gradient-editor/ */
	background: #d8c5d8; /* Old browsers */
	background: -moz-linear-gradient(top,  #d8c5d8 0%, #d6bcd6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8c5d8), color-stop(100%,#d6bcd6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d8c5d8 0%,#d6bcd6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d8c5d8 0%,#d6bcd6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d8c5d8 0%,#d6bcd6 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #d8c5d8 0%,#d6bcd6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8c5d8', endColorstr='#d6bcd6',GradientType=0 ); /* IE6-9 */
}
.centeredContent{
	margin-right: auto;
	margin-left: auto;
	width: 1000px;
	background-color: none;
	text-align: center;
}
#bottomRuler{
	background-color: purple;
	color: purple;
	width: 100%;
	height: 70px;
	text-align: center;
	padding-top: 25px;
	font-size: 12px;
}
.majorHeader{
	font-size: 45px;
	margin-top: 0px;
	color: purple;
	margin-bottom: 40px;
	font-weight: 300;
	/*text-shadow: 1px 1px 3px MediumSlateBlue;*/
}
.minorHeader{
	font-size: 24px;
	margin-bottom: 10px;
	/*text-shadow: 1px 1px 1px MediumSlateBlue;*/
	color: MediumSlateBlue;
}
.iconSize{
	font-size: 30px;
	margin-bottom: 10px;
	color: purple;
}
td{
	width: 50%;
	vertical-align: top;
}
.popover-title{
	background-color: purple;
	color: white;
}
.btn-purple{
	border-color: purple;
	background-color: purple;
	color: lavender;
}
.btn-purple:hover{
	border-color: #660099;
	background-color: #660099;
	color: lavender;
}
.btn:focus{ /* override bootstrap css */
	outline: none;
	color: white;
}
.btn-purple:focus{ /* override bootstrap css */
	outline: none;
	color: lavender;
}
#posterContainer{
    position:relative;
    display: block;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
}
.poster{
	font-weight: 100 !important; /* in my 'import' (script tag) of Roboto google font I added font-weight 400 (default) and 100 */
	border-bottom: 1px solid plum;
    
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
    box-sizing: border-box;

    /*background-position: bottom right;
    background-repeat: no-repeat;*/
    display: inline-block;
    width: 100%;
    
    /*OLD:
    position: relative;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    font-size: 32px;
    width:100%;
    height:500px;*/
	/*#poster img{
	works but sticks to top: 
		min-height: 100%;
		width: 100%;
		height: auto;
	}*/
}
#posterText{
	height: 100% !important;
	padding-top: 200px !important;
	padding-bottom: 200px !important;
	/*display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    width: 800px;
    height: 130px;
    margin-left: -400px;
    margin-top: -65px;*/
}
.clickableText{
	color: purple;
	cursor: pointer;
}

#faded-out-box {
	height: 250px;
	position: relative;
	overflow: hidden;
}
#faded-out-box #fade-out-area { 
	position: absolute; 
	bottom: 0; 
	left: 0;
	width: 100%; 
	text-align: center; 
	margin: 0; padding: 60px 0; 
	
	/* "transparent" only works here because == rgba(0,0,0,0) */
	background-image: linear-gradient(to bottom, transparent, #f0f8ff);
}

.roundedCorners {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: rgb(75, 0, 130); /* Indigo*/
}

/* text selection */
::selection { /* WebKit/Blink Browsers */
	background-color:lavender;
}
::-moz-selection {  /* Gecko Browsers */
	background-color:lavender;
}

.modal-header{
	border-bottom: none;
}



input.inputFieldError{
	border: 1px solid red !important;
	box-shadow: none !important;
}
input.inputFieldError:focus{
	border: 1px solid red !important;
	box-shadow: none !important;
}
input.inputFieldError:active{
	border: 1px solid red !important;
	box-shadow: none !important;
}

input.inputFieldOK{
	border: 2px solid purple !important;
	box-shadow: none !important;
}
input.inputFieldOK:focus{
	border: 2px solid purple !important;
	box-shadow: none !important;
}
input.inputFieldOK:active{
	border: 2px solid purple !important;
	box-shadow: none !important;
}



/* demo */

.personLine {
	display: block;
	float: left;
	/*margin-top: 4px;*/
	margin-bottom: 4px;
	padding-left: 2px;
}
.personClass {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid DodgerBlue;
	background-color: WhiteSmoke;
	color: DodgerBlue;
	padding: 0px 3px;
	cursor: pointer;
	font-size: 16px;
	position: relative;
}
.personClass:hover {
	border: 1px solid WhiteSmoke;
	background-color: DodgerBlue;
	color: WhiteSmoke;
}
.peopleBoxElement_active {
	margin-bottom: 15px;
	height: 50px;
	border: 1px solid DodgerBlue;
	/*background-color: Chocolate;*/
	/*padding: 10px;*/
	box-shadow: 1px 1px 1px black;
}
.peopleBoxElement_inactive {
	margin-bottom: 15px;
	min-height: 40px;
	border: 1px solid gray;
	background-color: Silver;
	padding: 10px;
}
#tipBox{
	padding: 10px;
	width: 100%;
	height: 40px;
	margin-bottom: 15px;
	color: black;
	font-size: 16px;
	display: none;
	display: inline-block;
	float:left;
}
#tipBox_header{
	font-size: 16px;
	/*font-weight: bold;
	margin-right: 20px;*/
}
.personTip{
	background-color: Lime;
	border: 1px solid LimeGreen;
}
.validationTip{
	background-color: coral;
	border: 1px solid crimson;
}
.draggingTip{
	background-color: LightPink;
	border: 1px solid DeepPink;
}
.day{
	height: 100%;
	width: 14.285%;
	padding: 5px;
	background-color: PowderBlue;
	border: 1px solid DeepSkyBlue;
}
.hoverOnDayWhenDraggingClass_publicDemo{
	background-color: SkyBlue;
}




/* Q & A */


.answer{
	color: purple;
}




/* mandatory fields page */
#sidebarMenu{
	float: left;
	width: 200px;
	min-height: 100px;
	padding: 20px;
	padding-top: 40px;
}
#mainAreaCalendar {
	/*overflow: hidden;*/
	overflow: visible;
	padding-top: 40px;
	padding-right: 20px;
	min-width: 500px;
}
.calendarTable {
	position: relative;
	/*float: left;*/
	/*width: 714px;*/
	min-width: 500px;
	width: 100%;
	border-collapse: collapse;
	/*border-top: 1px solid gray;*/
	font-size: 14px;
}
.weekdays{
	text-align: left;
	font-size: 12px;
	color: gray;
}
.topMenuItem {
	float: left;
	min-width: 1px;
	height: 100%;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	margin-right:20px;
	cursor: default;
	min-width: 40px; /* for short user name in top menu */
    text-align: center;
}
#circleWithLetter_topRuler{
	float: right;
    margin-top: 10px;
	width: 40px;
	height: 40px;
	font-size: 20px;
	line-height: 40px;
	border-radius: 20px;
	color: #f2f2f2;
	text-align: center;
	background: rgb(169,172,199);
}
.roundedCornersLight {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	/*color: rgb(75, 0, 130);*/ /* Indigo*/
}