@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

@media (min-width:768px){
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
}

footer {
  margin-top: 15px;
  height: 50px;
  line-height:50px;
  background-color: #f5f5f5;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

h3, h4{
	font-weight:200;
	color: #569DCC;
}

.subTitle{
	text-align:left;
	line-height:50px;
	font-size:26px;
	font-weight:200;
	color: #569DCC;
}

/* Main CSS style
/* -------------------------------------------------- */

nav{
	position:fixed;
	z-index:1000;
	width:100%;
	background-color: white;
	color:rgb(86, 90, 92);
	font-family: Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size:15px;
}

#connexion-area{
	position:absolute;
	right: 50px;
	background-color:white !important;
	padding: 5px;
	line-height:normal;
	box-shadow: 0 8px 6px -6px #aaa;
}

#connexion-area:before{
	content: '';
    width: 0;
    height: 0;
    position: absolute;
    top:0px;
    left:-20px;
    z-index: -1;
    border: 20px solid transparent;
    border-top: 27px solid white;
}

#connexion-area:after{
	content: '';
    width: 0;
    height: 0;
    position: absolute;
    top:0px;
    right:-20px;
    z-index: -1;
    border: 20px solid transparent;
    border-top: 27px solid white;
}

nav .main-menu > li{
	line-height:50px !important;
	height:50px  !important;
}

.menu-item, #menu-shortcut > div{
	margin-right:5px;
	margin-top: 8px;
	padding-bottom: 8px;
}

#menu-shortcut li{
	margin-right:0px;
	margin-top: 8px;
	padding-bottom: 8px;
}

.menu-item a{
	color: rgb(86, 90, 92);
}

nav span[class^="icon"]{
	font-size:22px;
}

nav .main-menu > li:hover{
	background-color:rgb(250, 250, 250);
}

nav{
	min-height: 47px;
	position:fixed;
	top:0px;
	z-index:1000;
	width:100%;
	box-shadow: 0 8px 6px -6px #aaa;
}
						
#menu-link li.active{
	border-bottom:0px dashed;
}

#menu-submenu{
	display:none;
	border-top:1px solid lightgrey;
	padding-top:10px;
	padding-bottom:10px;
}			
						
.list-none{
	list-style: none;
}

.list-inline{
	margin:0px;
}

#list-alert {
	position:fixed;
	width:250px;
	bottom:30px;
	right: 40px;
	z-index:500;
}

.bnr{
	padding: 10px 0px 10px 5px;
	border-radius: 5px;
}

.bnr-info{
	background-color: rgba(5, 147, 255, 0.21);
	color: rgb(12, 124, 194);
	border: 1px solid rgb(28, 115, 194);
}

.bnr-danger{
	background-color: #f2dede;
	color: rgb(154, 3, 12);
	border: 1px solid rgb(154, 3, 12);
}

.fa{
	cursor:pointer;
}

.datepicker{
	z-index:5000 !important;
}

#container{
	padding-top: 90px;
}

#overlay-loading{
	position:absolute;
	width:100%;
	z-index:800;
	text-align:center;
	line-height:500px;
	background-color:white;
}

#menu-link ul{
	display:inline-block;
	margin-bottom:0px;
}

#menu-link li{
	display:inline-block;
	margin-bottom:0px;
}

#menu-title{
	font-family: 'Indie Flower', cursive;
	font-size: larger;
    margin-top:15px;
}

#menu-submenu ul.active{
	display:inline-block;
	margin-bottom:0px;
}

#menu-submenu ul.active li{
	display:inline-block;
	margin-right:15px;
}

.error-message{
	color:rgb(192, 0, 0);
	margin-bottom:10px;
}

.help-block{
	color:rgb(192, 0, 0);
}

/* Ratings Stars
/* ------------------------------------------------- */
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
   left: 0; 
   color: gold;
}

/* Recipe tile style
/* ------------------------------------------------- */

.recipe{
	margin-top:5px;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	position:relative;
	opacity:1;
	color:white;
	border: 1px solid #f5f5f5;
}

.recipe:hover{
	opacity:1;
}

.recipe:hover .legend{
	opacity:1;
	padding:5px;
	cursor:pointer;
}

.recipe .legend{
	position:absolute;
	bottom:0px;
	opacity:0;
	width:100%;
	background-color:rgba(60,63,64,0.9);
	box-shadow: 0px 2px 12px #aaa;
}

.recipe h4{
	margin-left:5px;
	color: inherit;
}

.recipe .action-button a{
	color: #FFFFFF;
}

.recipe .action-button a:hover{
	color: #C2C2C2;
}

.recipe .action-button{
	font-size:22px;
	text-align:right;
	padding-right: 5px;
}

.recipe .action-button.reverse-color a{
	color: #97c5e7;
}

.recipe .action-button.reverse-color a:hover{
	color: #C2C2C2;
}


.recipe .action-button .fa-heart{
	color:#FFB6C1;
}

#modal-details .details{
	min-height:150px;

}

#modal-details .picture{
	text-align:center;
	line-height:150px;
}

#search-result{
	position:absolute;
	background-color:white;
	border: 1px solid #2196E4;
	border-radius:5px;
	z-index:100;
	margin-top:10px;
	margin-right:15px;
	width:90%;
}

#search-result:before{
	content: ' ';
	display: block;
	position: absolute;
	left: 15px;
	top: -8px;
	width: 14px;
	height: 14px;
	background:white;
	border-color: #73a7f0;
	border-width: 1px;
	border-style: solid none none solid;
	z-index:-10;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}

#search-result ul{
	max-height:300px;
	overflow:scroll;
	list-style:none;
	text-align:left;
	margin-top:0px;
	margin-bottom:0px;
	padding-left:0px;
}

#search-result li{
	padding-top: 5px;
	padding-left:10px;
	padding-bottom: 5px;
}

#search-result li:first-child{
	border-radius:5px 5px 0px 0px;
}

#search-result li:last-child{
	border-radius:0px 0px 5px 5px;
}

#search-result li:not(:last-child){
	border-bottom:1px solid #2196E4;
}

#search-result .result:hover{
	background-color: rgb(248, 248, 248);
	cursor:pointer;
}

div.section{
	text-align:center;
}

div.section h3{
	padding-top:5px;
	padding-bottom:4px;
	border-bottom: 2px solid #2196E4;
}

div.section h3:hover{
	border-top: 1px solid #2196E4;
	border-left: 1px solid #2196E4;
	border-right: 1px solid #2196E4;
	padding-top:4px;
	border-radius: 5px 5px 0px 0px;
}


div.section h3.active{
	color:white;
	background-color: #91C0DF;
	border-radius: 5px 5px 0px 0px;
}

div.section h3:hover{
	cursor:pointer;
}

#dashboard{
	height:550px;
	padding-top:5px;
}

#modal-planning .modal-title{
	text-align: left;
}

#recipes{
	overflow:scroll;
	height:550px;
}

.ui-state-hover{
	border:2px solid #ddd;
}

.recipe-selected{
	opacity:1;
}

/* Register page theme
/* ------------------------------------------------- */
#bloc-registration{
	height:600px;
	vertical-align:center;
}

#bloc-register{
	border-right:2px solid;
	border-color: rgb(170, 170, 170);
}

/* Planning
/*-------------------------------------------------- */
#planning table{
	display:block;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
}

#header tbody td{
	width:150px;
}

#planning thead td{
	text-align:center
}

#planning tbody td{
	width:150px;
	height:150px;
	border:1px solid;
	text-align:center
}

.menu{
	opacity:0.5;
}

#planning .action-button a:hover{
	color: #C2C2C2;
}

#planning .action-button a{
	color: rgb(86, 90, 92);
}

#planning .action-button{
	color: #80bfff;
	font-size:22px;
	text-align:right;
}

#planning .action-button{
	color: #C2C2C2;
	font-size:22px;
	text-align:right;
}


.glyphicon{
	font-size:20px;
}

.glyphicon:hover{
	font-weight:bold;
	cursor:pointer;
}

#menu-shortcut .info{
	padding-left:2px;
	-webkit-border-radius: 20px; 
	-moz-border-radius: 20px; 
	border-radius: 20px; 
	line-height:normal;
	background-color: white;
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: hand;
}

/*------Shopping List ----------*/
#shoppingList i{
	margin-top:10px;
	margin-bottom:10px;
}

.article{
	padding: 15px;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgba(108, 196, 255, 0.46);
	border-radius: 0.3em;
	color: rgb(86, 90, 92);
}

.article:hover {
	background-color: rgb(86, 90, 92);
	color: rgb(255, 255, 255);
}

.article-category{
	cursor: pointer;
	float: right;
	border: 1px solid lightgrey;
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.article-category:hover{
	color: white;
}
	
/*-------------------------*/
}

#modal-details .container-comment .date{
	font-size:10px;
}

#modal-details .container-comment ul{
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 11px
}