/*
Contents
--------

1) Default page elements
2) Media Queries
  2.1) Large desktop screen: 1201+ px
  2.2) Small desktop screens: 992-1200 px
  2.3) Tablets: 769-992 px
  2.4) Phablets: 540-769 px
  2.5) Mobile: 540- px
3) Own CSS Classes



  --- from the Wordpress site ---
  2.1) Mobile Large
  2.2) Tablet Small
  2.3) Tablet Large
  2.4) Desktop Small
  2.5) Desktop Medium
  2.6) Desktop Large
  2.7) Desktop X-Large
  2.8) Print

-- Bootstrap sizes:
xs - 0-768 px
sm - 769-992 px
md - 992-1200 px
lg - 1200+ px

*/


 /* 1) Default page elements*/

body {
  padding-top: 50px;
  font-family: Helvetica, sans-serif;
  color: #535353;
  text-align: left;
}

a {
	color: #555555 ;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #fe8402;
}

h1 {
  font-size: 2em;
  color: #555555;
  text-shadow:1px 1px 1px rgba(153,153,153,1);
  margin-top: 3px;
}
h1 a {color: #555555;}

h2 {
  font-size: 1.6em;
  color: #555555;
}
h2 a {color: #555555;}

h3 {
  font-size: 1.4em; color: #535353; line-height: 1.2em;
}
h3 a {color: #555555;}

h3 {
  font-size: 1.2em; color: #535353; line-height: 1.1em;
}
h3 a {color: #555555;}

ul#id_diet_type_choices { list-style-type: none; }
#id_diet_type_choices li { width:50%; float:left; display:inline; }
#diet-types-panel-body.panel-body { padding: 15 0px; }

/* Element IDs */
#header-row { background-color: #8eb848;}
#user-login { padding-top: 14px; text-align: right;}
#navbar-brand {
  color: #ffbb99;
  text-shadow:1px 1px 1px rgba(84,84,84,1);
  float: left;
  font-variant: small-caps;
  letter-spacing: 0pt;
  word-spacing: -4pt;
}
#recipe-bread-crumb {padding: 10 0px; font-size: 13;}
#recipe-img {max-height: 480px;}
#recipe-img .img-responsive {display: block; width: auto; max-height: 480px;}
#thumb-gall {max-height: 60px; float:left; display: inline; padding: 0 0 5 0px;}
#thumb-gall img {
 height:50px;
 margin-top:2px;
 margin-right:1px;
 margin-left:1px;
}
#thumb-gall .img-responsive {display: block; width: auto; max-height: 50px;}
#footer-note a {color: #666666;}
#footer-note a:hover {color: #fe8402; text-decoration: none;}
#recipe-desc {font-size: 0.9em; max-height:150px; overflow: scroll; overflow-x: hidden; margin-bottom: 10px; overflow-y: auto;}
#recipe-desc::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}
#recipe-desc::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}
#recipe-desc::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #cccccc;
}
#recipe-owner{text-align: right;}
#recipe-rating {clear: both;}

 /*Overriding Bootstrap*/
.navbar-default {background-color: #d4d7d8; border-color: #8a8b8c;}
.navbar-default .navbar-brand {color: #555555; text-shadow:1px 1px 1px rgba(84,84,84,1); font-variant: small-caps; letter-spacing: 0pt; word-spacing: -4pt; font-size: 36px;}
.navbar-default .navbar-brand:hover {color: #fe8402; text-decoration: none;}
.navbar-default .navbar-nav > li > a {color: #555555;}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {color:  #fe8402;}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus { color: #fe8402; background-color: #d4d7d8;}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus { color: #fe8402;  background-color: #d4d7d8;}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {border-top-color: #555555; border-bottom-color: #ffbb99;}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #fe8402; border-bottom-color: #d4d7d8;}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #fe8402;  border-bottom-color: #d4d7d8;}
/* Mobile version */
.navbar-default .navbar-toggle { border-color: #555555;}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fe8402;}
.navbar-default .navbar-toggle .icon-bar { background-color: #555555;}
.navbar-right {padding-right: 10px;}
.panel-default>.panel-heading {background-color: #d4d7d8; color: #535353;}
/*
.btn-primary {background-color: #8eb848; border-color: #8eb848;}
.btn-primary:hover {background-color: #a3c66c; border-color: #8eb848; color: #fe8402}
.btn-success {background-color: #41924b; border-color: #41924b;}
.btn-success:hover {background-color: #4fb05a; border-color: #41924b; color: #fe8402}
*/
.footer {position: fixed; height: 35px; bottom: 0; width: 100%; background-color: #d4d7d8; border-color: #8a8b8c; text-align: right; color: #666666; font-size:0.9em; padding: 10 10px;}
.text-smaller {font-size: 0.8em;}

 /* 3) Own CSS Classes */
.left-right {float:left;}
.main-body { padding-top: 5px;}
.btn-search-bar{
  padding: 6px 10px;
  font-size: 20px;
  line-height: normal;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  }
.header-text {color: #f2ebcf; }
.header-text a {color: #f2ebcf;}
.header-text a:hover {color: #fe8402; text-decoration: none;}
.recipe-step {padding: 15 15px}
.centre-img {margin: auto; text-align: center; display: block;}
.modal-footer a {color: #fe8402;}
.modal-backdrop.in { z-index: auto;}
.float-right {float:right;}
.list-view {
  padding :   5px;
  margin :   3px;
  border-style :   solid;
  border-width :   1px;
  border-color :   #ccc;
  -webkit-border-radius :   3px;
  -moz-border-radius :   3px;
  border-radius :   3px;
}
.edit-link { font-style: italic; font-size: 14;}
.remove-all-margin { margin:0 ! important;}
.remove-all-padding { padding:0 ! important;}
.edit-rec-sp1 {padding: 10 0px;}
.list-view-img1 {max-height: 200px; width: auto;}
.list-vw-buttons {margin: 20 0 0 0px; align-content: center; color: #fff;}
.lv-btn {border-radius: 10px;  background-color: #428bca;  padding: 10 20px; font-size: 0.8em;}
.lv-small-padding {padding: 0 5px;}

/* Gridview recipe container */
.rec-grid {
  /* border: 1px solid #ccc; */
  padding: 5 5 5 5px;
}
.rec-grid-inner {
  border: 1px solid #ccc;
  max-width: 358px;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
}
.rec-grid-img {
  border-radius: 8px;
  max-height: 190px;
  max-width: 358px;
}
.rec-grid-img-center-cropped {
  max-width: 358px;
  max-height: 190px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
}
.rec-grid-card {
  position: relative;
  background-color: #fff;
  height: 124px;
  top: -18px;
  padding: 7 10 5 10px;
}
.rec-grid-card-det {
  padding: 10 0px;
}
/* navigation */
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

textarea.expandable {
  height:70px;
  -webkit-transition: all 0.5s ease-in-out;
}

textarea.expandable:hover, textarea.expandable:focus {
  height:calc(100% - 90px);
  -webkit-transition: all 0.8s ease-in-out;
}

.panel-300:hover, .panel-300 {
  height:300px;
}

textarea.expandable + textarea.expandable:hover, textarea.expandable + textarea.expandable:focus {
  height:calc(100% - 90px)
}

/* Scaling / Responsive parts */
/* 2.1) Desktops with large screen */
@media screen and (min-width: 1201px) {
  #logo-header {
    font-size: 36px;
    padding-top: 14px;
  }
  #user-login {font-size: 1.4em;}
}
/* 2.2) Small desktops */
@media screen and (max-width: 1200px) {
  #logo-header {
    font-size: 24px;
    padding-top: 14px;
  }
  #user-login {font-size: 1em;}
}
/* 2.3) Tablet screens */
@media screen and (max-width: 992px) {
  body {
    padding-top: 60px;
  }

  #user-login {font-size: 1em;}
  #my-account-text {display: none;}
  #search-bar {display: none;}
  #recipe-owner{text-align: left;}

  h1 {font-size: 1.6em;}
  h2 {font-size: 1.3em;}
  h3 {font-size: 1.2em;}
}
/* 2.4) Phablets */
@media screen and (max-width: 768px) {
  body {padding-top: 60px;}
  h1 {font-size: 1.4em;}
  h2 {font-size: 1.2em;}
  h3 {font-size: 1.1em;}

  #user-login {font-size: 1em;}
  #my-account-text {display: none;}
  #search-bar {display: none;}

  .navbar-default .navbar-nav .open .dropdown-menu > li > a {color: #555555;}
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {color: #fe8402;}
  .container-fluid {padding: 0 5 5 5px;}
  .footer-collapse {display: none;}
  .footer {position: relative;}
  .list-view { padding: 5px; }
  .lv-btn {min-height: 55px; vertical-align: middle;}

}
/* 2.5) Mobiles */
@media screen and (max-width: 540px) {

}