﻿body
{
}

/*
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}
*/

@media screen and (min-device-width : 320px) and (max-device-width : 480px) 
{
  .form-control {
    font-size: 16px;
  }
}
     
.modal-content
{
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(28, 30, 34);
    /* RGBa with 0.9 opacity */
    background: rgba(28, 30, 34, 0.9);
    /* For IE 5.5 to 7*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E51C1E22, endColorstr=#E51C1E22);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E51C1E22, endColorstr=#E51C1E22)";
}

#shareDialog .modal-content
{
    background: rgb(53, 58, 65) !important;
}

/* .modal-body .panel */
.share-modal-body
{
    padding: 0 20px 0 20px;
}

/* .modal-body .panel */
.recipe-details-body .panel
{
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(28, 30, 34);
    /* RGBa with 0.5 opacity */
    background: rgba(28, 30, 34, 0.5);
    /* For IE 5.5 to 7*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F1C1E22, endColorstr=#7F1C1E22);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F1C1E22, endColorstr=#7F1C1E22)";
}

.recipe-details-tabs
{
    padding: 0 15px 15px 15px;
}

/*
.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
*/

.header-button 
{
    margin-left: 10px;
    width: 100px;
    float: right;
}

.hide-overflow
{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width:100%;
    display:block;
}

.transparent-input1 {
    background-color: rgba(0,0,0,0);
    color: White;
}

/********** Ribbons **********/

/* Green-Ribbon */

/*
.green-ribbon {
  position: absolute;
  left: 10px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}

.green-ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#78CC78 0%, #53BE53 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}

.green-ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #53BE53;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #53BE53;
}

.green-ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #53BE53;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #53BE53;
}
*/

.green-ribbon {
  position: absolute;
  left: 10px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.green-ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.green-ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.green-ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}

/* Dark-Green-Ribbon */

.dark-green-ribbon {
  position: absolute;
  left: 10px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.dark-green-ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#73930A 0%, #547206 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.dark-green-ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #547206;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #547206;
}
.dark-green-ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #547206;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #547206;
}

/* Gray-Ribbon */

.gray-ribbon {
  position: absolute;
  left: 10px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.gray-ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#868993 0%, #4C4C4C 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.gray-ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #4C4C4C;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #4C4C4C;
}
.gray-ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #4C4C4C;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #4C4C4C;
}

/* Blue-Ribbon */

.blue-ribbon {
  position: absolute;
  left: 10px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.blue-ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.blue-ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.blue-ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}

/* Orange-Ribbon */

.orange-ribbon {
  position: absolute;
  left: 10px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}

.orange-ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F79E05 0%, #8F5408 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}

.orange-ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F5408;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F5408;
}

.orange-ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F5408;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F5408;
}

/********************/

.panel-image .panel-heading{
    padding-left: 15px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 41px;
}

.panel-image-title 
{
    margin-top: 5px;
    float: left;
}

.panel-image-buttons {
    float: right;
}

.navbar-action-buttons {
    padding-top: 6px;
    padding-bottom: 6px;
}

.fixed-width {
    width: 79px !important;
}

.page-registration
{
    padding-top: 25px;
}

.navbar-brand img
{
    margin-top: -15px;
}

.nav-active
{
    background: #2E3338;    
}