/*
===============================================================================================================================================
																																MAIN SITE STYLE
===============================================================================================================================================
*/

html, body { 
	display:			block;	
	margin:				0 auto;
	padding:			0;
	height:				100%;

}

html{
	color:				#585858;
	font-size:			14px;
	font-family: 		'Raleway' , seans-serif;
	font-weight:			400;
	min-width:			990px;
	
	background: 		#fbfbfb; /* Old browsers */
	background: 		-moz-radial-gradient(center, ellipse cover,  #fbfbfb 1%, #f1f1f1 100%); /* FF3.6+ */
	background: 		-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#fbfbfb), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
	background: 		-webkit-radial-gradient(center, ellipse cover,  #fbfbfb 1%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
	background: 		-o-radial-gradient(center, ellipse cover,  #fbfbfb 1%,#f1f1f1 100%); /* Opera 12+ */
	background: 		-ms-radial-gradient(center, ellipse cover,  #fbfbfb 1%,#f1f1f1 100%); /* IE10+ */
	background: 		radial-gradient(ellipse at center,  #fbfbfb 1%,#f1f1f1 100%); /* W3C */
	filter: 			progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f1f1f1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

body{
	overflow-x:			hidden
}


.mainContainer{
	margin: 			0 auto;
	width: 				100%;
	min-height: 		100%;
	position: 			relative;
	
}

.pageContent{
	width:				100%;
	margin: 			0 auto;
	padding-bottom:		230px;
	position: 			relative;	
}

.container-960{
	width:				960px;
	margin:				0 auto;
	position:			relative;
}



.upperContainer{
	padding:			20px 0px;
	width:				100%;
	
	background: 		#f3f3f3; /* Old browsers */
	background: 		-moz-linear-gradient(top,  #f3f3f3 0%, #f1f1f1 80%, #e7e7e7 100%); /* FF3.6+ */
	background: 		-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(80%,#f1f1f1), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
	background: 		-webkit-linear-gradient(top,  #f3f3f3 0%,#f1f1f1 80%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
	background: 		-o-linear-gradient(top,  #f3f3f3 0%,#f1f1f1 80%,#e7e7e7 100%); /* Opera 11.10+ */
	background: 		-ms-linear-gradient(top,  #f3f3f3 0%,#f1f1f1 80%,#e7e7e7 100%); /* IE10+ */
	background: 		linear-gradient(to bottom,  #f3f3f3 0%,#f1f1f1 80%,#e7e7e7 100%); /* W3C */
	filter: 			progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */

}

.lowerContainer{
	min-height:			230px;
}

.separator{
	height:				15px;
	background-image:	url(/img/separator.png);
	background-repeat:	no-repeat;
	background-position:bottom;
	margin-bottom:		5px;
}

/*
===============================================================================================================================================
																																		 HEADER
===============================================================================================================================================
*/


/************************************/
/*	LOGGED OUT USER					*/
/************************************/

header.loggedOut .btnContainer{
	display:			inline-block;
	vertical-align:		middle;
	width:				290px
}

header.loggedOut .btnContainer a{
	display:			inline-block;
	padding:			2px 15px 5px 15px;
	border-radius:		20px;
	border:				dashed 1px rgba(255,255,255,0);
}

header.loggedOut .btnContainer a:hover{
	background-color:	#FFFFFF;
	border:				dashed 1px #c6c6c6
}

header.loggedOut .btnContainer a:hover h5{
	color:				#585858
}

header.loggedOut .btnContainer a.margin{
	margin-bottom:		15px
}

header.loggedOut .smallLoginForm{
	position:			relative;
	margin-left:		30px;
	display:			inline-block;
	vertical-align:		middle;
	text-align:			left;
	width:				440px
}

header.loggedOut .smallLoginForm .fieldArea{
	background-color:	#ffffff;
	border:				dashed 1px #c6c6c6;
	border-radius: 		12px;
	padding: 			5px 10px;
	margin:				6px 0px;
	display:			inline-block;
	vertical-align:		top
}

header.loggedOut .smallLoginForm .fieldArea.error{
	border:				dashed 1px #e30075;
	-webkit-box-shadow: 0px 0px 7px 0px rgba(222,0,122,1), inset 0px 0px 7px 0px rgba(222,0,122,1);
	-moz-box-shadow: 	0px 0px 7px 0px rgba(222,0,122,1), inset 0px 0px 7px 0px rgba(222,0,122,1);
	box-shadow: 		0px 0px 7px 0px rgba(222,0,122,1), inset 0px 0px 7px 0px rgba(222,0,122,1);
}

header.loggedOut .smallLoginForm .fieldArea input{
	vertical-align:		middle;
	background-color:	transparent;
	border:				0px;
	color:				#585858;
	font-family: 		'Raleway' , seans-serif;
	font-weight:		400;
	padding:			3px;
	border-radius:		10px;
}

header.loggedOut .smallLoginForm .fieldArea input[name="email"]{
	width:				180px;
}

header.loggedOut .smallLoginForm .fieldArea input[name="password"]{
	width:				90px;
}

header.loggedOut .smallLoginForm .fieldArea img{
	vertical-align:		middle;
	margin:				0px 10px;
}

header.loggedOut .smallLoginForm h5.error{
	margin:				10px 0px;
	color:				#e30075;	
}


/************************************/
/*	PAGE TITLE SECTION				*/
/************************************/
.pageTitle{
	display:			inline-block;
	vertical-align:		middle;
	width:				600px
}

.pageTitle img{
	display:			inline-block;
	vertical-align:		middle;
	margin-right:		10px
}

.pageTitle div{
	display:			inline-block;
	vertical-align:		middle
}


.pageTitle.invert h1{
	font-size:			32px;
	margin-bottom:		0px
}

.pageButtons{
	width:					360px;
	text-align:				right
}

.pageButtons a{
	text-align:				left;
	position:				relative;
	margin-left:			10px
}

.pageButtons a img{
	display:				inline-block;
	margin-right:			10px
}

.pageButtons a img.hover{
	top:					10px;
	left:					15px
}

.pageButtons a span{
	display:				inline-block;
	vertical-align:			top;
	line-height: 			16px
}


/************************************/
/*	CUSTOM SMALL CHECKBOX 			*/
/************************************/

.checkbox.small input[type="checkbox"]{
	display:			none;
}

.checkbox.small {
	position: 			relative;
	vertical-align:		top
}

.checkbox.small label {
	display: 			block;
	height: 			28px;
	text-align:			left;
	font-size:			14px;
	color:				#585858;
	cursor: 			pointer;
	position:			relative;
	opacity:			1;
}


.checkbox.small label span.field{
	background-color:	#ffffff;
	position:			absolute;
	width:				20px;
	height:				20px;
	border:				dashed 1px #c6c6c6;
	border-radius:		8px;
	font-weight: 		400;
	font-size:			16px;
	moz-transition: 	all 0.4s ease-out;
	-webkit-transition: all 0.4s ease-out;
	-o-transition: 		all 0.4s ease-out;
	-ms-transition: 	all 0.4s ease-out;
	transition: 		all 0.4s ease-out;
}

.checkbox.small label span.field.error{
	border:				dashed 1px #e30075;
	-webkit-box-shadow: 0px 0px 7px 0px rgba(222,0,122,1), inset 0px 0px 7px 0px rgba(222,0,122,1);
	-moz-box-shadow: 	0px 0px 7px 0px rgba(222,0,122,1), inset 0px 0px 7px 0px rgba(222,0,122,1);
	box-shadow: 		0px 0px 7px 0px rgba(222,0,122,1), inset 0px 0px 7px 0px rgba(222,0,122,1);
}

.checkbox.small label span{
	display:			inline-block;
	vertical-align:		middle;
	font-weight:		300;
}

.checkbox.small label a{
	display:			inline-block;
	vertical-align:		middle;
	font-weight:		300;
	text-decoration:	underline;
}

.checkbox.small label img{
	display:			inline-block;
	position:			relative;
	vertical-align:		middle;
	margin-right:		5px;
	opacity:			0;
	moz-transition: 	all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: 		all 0.2s ease-out;
	-ms-transition: 	all 0.2s ease-out;
	transition: 		all 0.2s ease-out;
}


.checkbox.small input[type=checkbox]:checked + label img{
	opacity:			1;		
}


.smallLoginForm input[type="submit"]{
	background-color:	#2f2f2f;
	color: 				#ffffff;
	border-radius: 		10px;
	width:				30px;
	height:				30px;
	line-height: 		24px;
	background-image: 	url(/img/form/rightArrowNoMargin.png);
	background-repeat: 	no-repeat;
	background-position:center;
	border: 			0px;
	moz-transition: 	all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: 		all 0.2s ease-out;
	-ms-transition: 	all 0.2s ease-out;
	transition: 		all 0.2s ease-out;
	margin-top:			7px;
	display:			inline-block;
	vertical-align:		top;
	margin-left:		5px;
	padding:			3px;
	font-size:			0px
}

.smallLoginForm input[type="submit"]:hover{
	cursor:				pointer;
	background-color:	#e30074
}

.smallLoginForm .facebookLogin{
	background-color:	#375794;
	color: 				#ffffff;
	border-radius: 		10px;
	width:				30px;
	height:				30px;
	line-height: 		24px;
	background-image:	url(/img/form/facebookNoMargin.png);
	background-repeat: 	no-repeat;
	background-position:center;
	border: 			0px;
	moz-transition: 	all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: 		all 0.2s ease-out;
	-ms-transition: 	all 0.2s ease-out;
	transition: 		all 0.2s ease-out;
	margin-top:			7px;
	display:			inline-block;
	vertical-align:		top;
	margin-left:		5px
}

.smallLoginForm .facebookLogin:hover{
	background-color:	#1f3e7a
}
/*
===============================================================================================================================================
																														   HOSTESS GO WORK LOGO
===============================================================================================================================================
*/



/*
===============================================================================================================================================
																																		 FOOTER
===============================================================================================================================================
*/
footer{
	display: 			block;
	margin: 			0 auto;
	width: 				100%;
	height: 			205px;
	bottom: 			0;
	position: 			absolute;	
}

footer div.pre{
	height:				45px;
}

footer div.pre a{
	font-size:			18px;
	display:			inline-block;
	margin-top:			12px;	
	font-weight:		400;
}

footer div.pre span{
	font-weight:		400;
}

footer div.pink{
	background-color:	#e30075;
	width:				100%;
	height:				160px;
}

footer div.pink .letter{
	background-image:	url(/img/logo/letter-big.png);
	background-repeat:	no-repeat;
	width:				149px;
	height:				317px;
	position:			absolute;
	right:				-160px;
	top:				-308px;
}


/* SOCIAL */

footer .social{
	display:			inline-block;
	vertical-align:		top;
	position:			relative;
	width:				200px;
	height:				81px;
	margin-top:			10px;
	font-size:			0px;
}


footer .social div{
	width:				70px;
	height:				70px;
	display: 			inline-block;
	overflow: 			hidden;
	margin:				0px;
	padding:			0px;
	position:			relative;
	margin-right:		15px;
}

footer .social a{
	position:			static;
	display:			block;
	border-radius:		50px;
	background-color:	#FFF;
	width:				40px;
	height:				40px;
	padding:			10px;
	margin:				5px;
}

footer .social a img{
	position:			absolute;
	left:				15px;
	top:				15px;
}

footer .social a img.instagram{
	width:				33px;
	height:				33px;
	top:				18.5px;
	left:				18.5px
}

footer .social a:hover{
	margin:				0px;
	padding:			15px
}

/* FOOTER MENU */

footer ul.menu{
	display:			inline-block;
	float:				right;
	text-align:			right;
	list-style:			none;
	margin-top:			34px;
}

footer ul.menu li{
	display:			inline-block;
	margin-left:		10px;
}

footer ul.menu li a{
	font-size:			18px;
	font-weight:		300;
}

/* ADDITIONAL DATA */
footer .additional{
	font-size:			0px;
	display:			block;
	width:				100%;
	margin-top:			10px;
}

footer .description{
	display:			inline-block;
	width:				600px;
	font-size:			14px;
	font-weight:		400;
}

footer .copyright{
	display:			inline-block;
	width:				360px;
	font-size:			14px;
	font-weight:		400;
	text-align:			right;
}



/*
===============================================================================================================================================
																																		BUTTONS
===============================================================================================================================================
*/

/************************************/
/*	ROUND BUTTON WITH HOVER ENLARGE	*/
/************************************/

.roundButtonResize{
	display:			inline-block;
}

.roundButtonResize .outerBox{
	width: 				130px;
	height: 			130px;
	display: 			inline-block;
	vertical-align: 	middle;
	overflow: 			hidden;
	position: 			relative;
}

.roundButtonResize .outerBox .circle{
	margin:				5px;
	display: 			inline-block;
	width: 				80px;
	height: 			80px;
	padding: 			20px;
	background-color: 	#e30074; 
	border-radius: 		100%;
	moz-transition: 	all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: 		all 0.2s ease-out;
	-ms-transition: 	all 0.2s ease-out;
	transition: 		all 0.2s ease-out;	
}

.roundButtonResize:hover .outerBox .circle{
	margin:				0px;
	padding:			25px
}

.roundButtonResize .outerBox .circle img{
	position:			absolute;
	left:				25px;
	top:				25px
}

.roundButtonResize .content{
	margin-left: 		30px;
	display:			inline-block;
	vertical-align:		middle
}

/* ENORMOUS BUTTON */
.roundButtonResize.enormous .outerBox{
	width:				255px;
	height:				255px
}


.roundButtonResize.enormous .outerBox .circle{
	width: 				215px;
	height: 			215px;
	padding: 			15px;
}

.roundButtonResize.enormous:hover .outerBox .circle{
	padding:			20px
}
	
.roundButtonResize.enormous .outerBox .circle img{
	left:				20px;
	top:				20px
}

/* LARGE BUTTON */
.roundButtonResize.large .outerBox{
	width:				190px;
	height:				190px
}


.roundButtonResize.large .outerBox .circle{
	width: 				150px;
	height: 			150px;
	padding: 			15px;
}

.roundButtonResize.large:hover .outerBox .circle{
	padding:			20px
}
	
.roundButtonResize.large .outerBox .circle img{
	left:				20px;
	top:				20px
}


/* MIDDLE BUTTON */
.roundButtonResize.middle .outerBox{
	width:				190px;
	height:				190px
}


.roundButtonResize.middle .outerBox .circle{
	width: 				140px;
	height: 			140px;
	padding: 			15px;
}

.roundButtonResize.middle:hover .outerBox .circle{
	padding:			20px
}
	
.roundButtonResize.middle .outerBox .circle img{
	left:				20px;
	top:				20px
}

/************************************/
/*	FADED LINK ICON								*/
/************************************/
a .fadeIco{
	position:			relative;
	display:			inline-block;
	vertical-align:		middle;
	margin-left:			5px
}

a .fadeIco img{
	vertical-align:		top;
}

a .fadeIco img.hover{
	position:			absolute;
	top:				0px;
	left:				0px;
	opacity:			0;
	moz-transition: 	all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-o-transition: 		all 0.3s ease-out;
	-ms-transition: 	all 0.3s ease-out;
	transition: 		all 0.3s ease-out
}

a:hover .fadeIco img.hover{
	opacity:			1
}



a > img.hover{
	position:			absolute;
	top:				0px;
	left:				0px;
	moz-transition: 	all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-o-transition: 		all 0.3s ease-out;
	-ms-transition: 	all 0.3s ease-out;
	transition:			all 0.3s ease-out;
	opacity:			0
}

a:hover > img.hover{
	opacity:			1
}

/*
===============================================================================================================================================
																																  NOTIFICATIONS
===============================================================================================================================================
*/

.noticeBox{
	display:			block;
	margin:				0 auto;
	border-radius:		15px;
	background-color:	#2f2f2f;
	color:				#ffffff;
	max-width:			700px;
	min-height:			32px;
	padding:			7px 10px 7px 30px;
	margin-bottom:		25px;
	font-weight:		300;
	text-align:			left;
	background-image:	url(/img/ico/interjection.png);
	background-position:left;
	background-repeat:	no-repeat
}

.noticeBox a{
	color:				#ffffff
}

.noticeBox a:hover{
	text-decoration:	underline	
}


/*
===============================================================================================================================================
																																  		 IMAGES
===============================================================================================================================================
*/

.radius5{
	border-radius:		5px
}

.radius10{
	border-radius:		10px
}

.radius20{
	border-radius:		20px
}


/*
===============================================================================================================================================
																																 OTHER ELEMENTS
===============================================================================================================================================
*/

/************************************/
/*	MARGIN							*/
/************************************/

.noMarginRight{
	margin-right:		0px!important
}

/************************************/
/*	NUMBER IN MEDIUM WHITE CIRCLE	*/
/************************************/

.mediumWhiteCircle{
	font-family: 		'Poiret One';
	display:			inline-block;
	vertical-align:		middle;
	background-color:	#FFFFFF;
	border:				dashed 1px #c6c6c6;
	width:				30px;
	height:				30px;
	border-radius:		80px;
	line-height:		30px;
	text-align:			center;
}

/************************************/
/*	BOXES							*/
/************************************/

.whiteDashedBox{
	background-color:	#FFFFFF;
	border:				dashed 1px #c6c6c6;
	border-radius:		20px;
	padding:			10px 15px;
	
}

a.whiteDashedBox{
	display:			inline-block;
	moz-transition: 	all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-o-transition: 		all 0.3s ease-out;
	-ms-transition: 	all 0.3s ease-out;
	transition: 		all 0.3s ease-out;	
}

a.whiteDashedBox:hover{
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 	0px 0px 15px 0px rgba(0,0,0,0.15);
	box-shadow: 		0px 0px 15px 0px rgba(0,0,0,0.15);
}

.transition{
	moz-transition: 	all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-o-transition: 		all 0.3s ease-out;
	-ms-transition: 	all 0.3s ease-out;
	transition: 		all 0.3s ease-out;
}

/************************************/
/*	BOXES	 - ALERT								    */
/************************************/

.whiteDashedBox.redAlert, .redAlert .whiteDashedBox{
	background-image: 		url(/img/box/redHighlightsLT.png), url(/img/box/redHighlightsLB.png), url(/img/box/redHighlightsSide.png), url(/img/box/redHighlightsRT.png), url(/img/box/redHighlightsRB.png), url(/img/box/redHighlightsSide.png);
    background-repeat: 		no-repeat, no-repeat, repeat-y, no-repeat, no-repeat, repeat-y;
	background-position:	top left, bottom left, left, top right, bottom right, right;
}

.whiteDashedBox.greenAlert, .greenAlert .whiteDashedBox{
	background-image: 		url(/img/box/greenHighlightsLT.png), url(/img/box/greenHighlightsLB.png), url(/img/box/greenHighlightsSide.png), url(/img/box/greenHighlightsRT.png), url(/img/box/greenHighlightsRB.png), url(/img/box/greenHighlightsSide.png);
    background-repeat: 		no-repeat, no-repeat, repeat-y, no-repeat, no-repeat, repeat-y;
	background-position:	top left, bottom left, left, top right, bottom right, right;
}

.whiteDashedBox.yellowAlert, .yellowAlert .whiteDashedBox{
	background-image: 		url(/img/box/yellowHighlightsLT.png), url(/img/box/yellowHighlightsLB.png), url(/img/box/yellowHighlightsSide.png), url(/img/box/yellowHighlightsRT.png), url(/img/box/yellowHighlightsRB.png), url(/img/box/yellowHighlightsSide.png);
    background-repeat: 		no-repeat, no-repeat, repeat-y, no-repeat, no-repeat, repeat-y;
	background-position:	top left, bottom left, left, top right, bottom right, right;
}


/************************************/
/*	MARGINS							*/
/************************************/

.top20{
	margin-top:			20px
}

/************************************
 *	DIVIDERS						*
 ************************************/
.divider{
	background-image:	url(/img/dividers/960.png);
	width:				960px;
	height:				22px;
	margin:				0px 0px 10px 0px	
}


/************************************
 *	COVER BACKGROUND				*
 ************************************/
.coverBg{
	background-repeat:		no-repeat;
	background-position:	center center;
	/*background-attachment:	fixed;*/
	-webkit-background-size:cover;
	-moz-background-size: 	cover;
	-o-background-size:		cover;
	background-size: 		cover;
}

/*
===============================================================================================================================================
																																		COLUMNS
===============================================================================================================================================
*/


/************************************/
/*	COLUMNS							*/
/************************************/

.columns{
	font-size:			0px;	
}

.columns > *{
	display:			inline-block;
	vertical-align:		top;	
	font-size:			14px;
}

.columns > *.wide{
	width:				580px;
}

.columns > *.multi{
	font-size:			0px;	
}

.columns > div.thin{
	width:				350px
}


.columns > div.left{
	margin-right:		30px;
}

.columns > div.center{
	margin-left:		20px;
	margin-right:		20px;
}


.columns > div h1{
	font-weight:		300;
	line-height:			28px
}




/*
=============================================================================================
															 MAIN PAGE CONTAINER WITH COLUMNS
=============================================================================================
*/


/************************************/
/*	PAGE TITLE AND INFO 			*/
/************************************/

header .pageInfo{
	width:				500px;
	display:				inline-block;
	vertical-align:		middle;
	margin-left:			20px
}


header .pageInfo h1{
	display:			inline-block;
	vertical-align:		top;
	font-weight:		100;
	line-height:		46px;
	font-size:			46px;
	color:				#e30075
}

header .pageInfo h3{
	margin-top:			15px;
	width:				350px;
	display:			inline-block	
}



/*
=============================================================================================
																		   	  BOX-BUTTONS BAR
=============================================================================================
*/

.boxBar{
	width:				100%;
	display:			block;
	margin:				20px 0px;
	clear:				both;
	font-size:			0px;
}

/* TRIPLE COLUMN LAYOUT */
.boxBar.cols-3{
	
}

.boxBar.cols-3 .box{
	display:			inline-block;
	vertical-align:		middle;
	background-color:	#FFFFFF;
	border-radius:		20px;
	width:				250px;
	padding:			20px;
	margin:				0px 13px;
	border:				dashed 1px #c6c6c6;	
}

.boxBar.cols-3 .box:hover{
	/*border:				dashed 1px #e30075;	*/
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 	0px 0px 15px 0px rgba(0,0,0,0.2);
	box-shadow: 		0px 0px 15px 0px rgba(0,0,0,0.2);
}

.boxBar.cols-3 .box img{
	display:			inline-block;
	vertical-align:		middle;
	margin-right:		10px;
}

.boxBar.cols-3 .box h2{
	display:			inline-block;
	vertical-align:		middle;
	width:				186px;
	font-size:			23px;
	font-weight:		400
}

.boxBar.cols-3 .box h5{
	margin-top:			10px;
	color:				#555555;
}

/*
===============================================================================================================================================
																																		HEADER
===============================================================================================================================================
*/





/************************************/
/*	BASIC USER DATA IN HEADER		*/
/************************************/

.userBasicData{
	display:			inline-block;
	vertical-align:		middle
}

.userBasicData > a{
	display:			inline-block;
	vertical-align:		middle;
	position:			relative
}

.userBasicData img{
	border-radius:		100px;
	display:			inline-block;
	vertical-align:		middle
}

.userBasicData div{
	margin-left:		15px;
	display:			inline-block;
	vertical-align:		middle
}

.userBasicData div > *{
	display:			block
}

.userBasicData .logout{
	margin-top:			7px;
	color:				#b2b2b2;
}

.userBasicData .logout:hover{
	color:				#e30075;
}

/* A - OVERLAY */
.userBasicData > a .overlay{
	position:			absolute;
	width:				75px;
	height:				75px;
	display:				block;
	border-radius:		100%;
	margin-left:			0;
	background-color:	rgba(0,0,0,0.7);
	opacity:				0;
	top:					0;
	left:				0;
	-moz-transition: 	all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: 		all 0.3s ease-out;
    -ms-transition: 		all 0.3s ease-out;
    transition: 			all 0.3s ease-out
}

.userBasicData > a:hover .overlay{
	opacity:				1
}

.userBasicData > a .overlay > img{
	position:			absolute;
	width:				30px;
	height:				30px;
	opacity:				0;
	top:					calc(50% - 15px);
	left:				calc(50% - 15px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: 			opacity 0.35s, transform 0.35s;
    -webkit-transform: 	scale(2.0);
    transform: 			scale(2.0)
}

.userBasicData > a:hover .overlay > img{
	opacity:				1;
	-webkit-transform: 	scale(1.0);
    transform: 			scale(1.0)
}




/************************************/
/*	NAVIGATION BAR								   */
/************************************/

nav{
	position:			absolute;
	top:				0px;
	right:				0px
}

nav ul{
	padding:			0px;
	margin:				0px
}

nav.main{
	top:				10px
}

nav.main ul li{
	margin-left:		10px
}

nav ul li{
	display:			inline-block
}

nav.main ul li a{
	display:			inline-block
}


nav .notifyAlert{
	position:			absolute;
	top:					0px;
	left:				0px;
	display:				block;
	background-color:	#e30074;
	color:				#ffffff;
	text-align:			center;
	font-family: 		'Roboto', sans-serif;
	border-radius:		100%;
	padding:				5px;
	font-size:			14px;
	line-height:			15px;
	min-width:			14px;
	height:				14px;	
	font-weight:			400
}

/************************************/
/*	USER NAVIGATION BAR				*/
/************************************/

nav.user{
	position:			relative;
	display:			inline-block;
	vertical-align:		middle;
	margin-left:		20px
}

nav.user li{
	margin-right:		20px
}

nav.user li a{
	display:			inline-block;
	position:			relative;
	color:				#b7b7b7
}

nav.user a:hover{
	color:				#6e6e6e
}

nav.user a .ico{
	display:			inline-block;
	vertical-align:		middle;
	position:			relative;
	width:				50px;
	height:				50px;
	margin-right:		7px
}

nav.user a .ico img.hover{
	position:			absolute;
	top:				0px;
	left:				0px;
	opacity:			0;
	moz-transition: 	all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-o-transition: 		all 0.3s ease-out;
	-ms-transition: 	all 0.3s ease-out;
	transition: 		all 0.3s ease-out;
}

nav.user a:hover .ico img.hover{
	opacity:			1
}

nav.user a .description{
	display:			inline-block;
	vertical-align:		middle
}

/*
===============================================================================================================================================
																															 CALENDAR DAY POPUP
===============================================================================================================================================
*/

#dayDetails{
	background-color:	#FFFFFF;
	padding:			5px 7px;
	border-radius:		5px;
	z-index:			1000;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 	0px 0px 15px 0px rgba(0,0,0,0.25);
	box-shadow:			0px 0px 15px 0px rgba(0,0,0,0.25);
}

#dayDetails h5{
}

#dayDetails h5.margin{
	margin-top:			8px
}

#dayDetails a{
	padding-left:		15px;
	display:			block;
	background-image:	url(/img/list/circle.png);
	background-position:left;
	background-repeat:	no-repeat;
	margin-top:			3px
}

/************************************/
/*	LOADER							*/
/************************************/

img.loading{
	display:			block;
	margin:				0 auto;
	margin-top:			10px;
	margin-bottom:		10px
}

/*
===============================================================================================================================================
																															 DEFAULT ICO SIZES
===============================================================================================================================================
*/

.smallIco{
		width:			15px;
		height:			15px
}

.mediumIco{
		width:			29px;
		height:			29px
}


.largeIco{
		width:			68px;
		height:			68px
}