p {margin:3px;}
body {background-color: #C63D0F;}
#title{
	margin:10px auto;
	text-align:center;

}

h1#title a {text-decoration:none;
	font-family:'Permanent Marker';
        font-size:300%;
        color:#FDF3E7;
        -webkit-text-stroke: 1px black;}


.header p {font-family:'Montserrat', sans-serif;}

p.body {margin-bottom:20px;}
.tags {	font-size:80%;}
.date {font-style:italic;
	font-weight:200;}

.header {display:block;
                margin: 0px 5%  10px 2%;
                background-color: #FDF3E7;
                border: 2px solid #FDF3E7;
                border-radius: 15px;
                box-shadow: 5px 5px 5px #9E310C;
                text-align:left;
                padding:15px 20px;
		width: -webkit-calc(90% - 200px);
		width: -moz-calc(90% - 200px);
		width: calc(90% - 200px);
		float:right;}


.header h1{font-family:'Montserrat',sans-serif;
                font-weight:600;
                -webkit-text-stroke: 1px black;}
#nav {
	width:100px;
	float:left;
	margin-top:0px;
	font-family:'Montserrat',sans-serif;	
	display:block;}

#nav .header{
	margin:0px 10px 10px 5px;
	padding:15px;
	float:left;
	width:100%;
}
#password {
	margin-bottom:3px;
}
ul {margin:0px;
	padding:0px;
	list-style:none;
}
ul li ul.dropdown{
	display:none;
    opacity: 0;
    visibility: hidden;
}
ul li:hover ul.dropdown{
	display:block;
    visibility: visible;
    opacity: 1;
    animation: fade .5s;
}
ul li ul.dropdown li{
	display:block;
}
@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.year a{
text-decoration:none;
font-size:200%;
color:black;
}
.month a{
text-decoration:none;
font-size:90%;
color:black;
}
.dropdown {
	visibility:none;
}
.dropdown:hover{
display:block;
}
.images img{height:45vw;
	max-height:530px;
	border-radius:5px;
}

.beer {padding-bottom:5px;}
.beer p{margin:0px;}
.flash-message{background-color: #7E8F7C;
                        font-size:120%;
                        padding:10px;
                        margin-bottom:10px;
                        text-align: center;
                        color:#FDF3E7;}
.beer_value {color:#3B3738;}
.beer_title {font-weight:normal;}
h1.loading-title {color:#DDDDDD;
                                        text-align: center;
                                        position: absolute;
                                        top: 20%;
                                        left: 35%;
                                        }
.beer a{text-decoration: none;
                color:#7E8F7C;}
.beer h3{margin-top:15px;
                margin-bottom:0px;
                font-weight:normal;}
.other_reviews {border-top:1px solid #CCCCCC;}
#other_rating {font-size:120%;
                                color:#d83636;
                                margin:4px 0px;}
#other_rating_info {font-size:80%;}
.review {clear:both;}
.review input {display:block;
                                margin:3px 0px 10px 0px;
                                }
#pagination ul {list-style-type: none;
                        text-align:center;}
#pagination ul li{display:inline;}
#pagination ul li a{text-decoration:none;
                                        color:#AAAAAA;
                                        padding:0px 3px;}



.content {overflow:hidden;
                padding-top:10px;
                padding-bottom:10px;
                background-color: #FDF3E7;
                margin-top:15px;
                border: 2px solid #FDF3E7;
                border-radius: 15px;
                box-shadow: 5px 5px 5px #9E310C;
}
.content h2{font-weight:normal;
                font-size:1.8em;
                margin-bottom:5px;
                border-bottom: 1px solid #CCCCCC;
                }

#top5 {float:left;
        max-width:400px;
        overflow:hidden;
                }

#my5 {float:right;
        max-width:400px;
        overflow: hidden;}

.rating {
    float:left;
}
	


.search_login {display:inline;
        float:left;
        margin:5px 0px 0px 5px;}
.search_login a {font-size:80%;
                                float:left;
                                margin-right:15px;
                                }
.search_login input {width:150px;
                                        font-size:80%;}
.search_login input#search{width:60px;
                                                        float:left;}
#header_links {clear:left;}


.mobilenav {display:none;
	text-decoration:none;
	  position: absolute;
  right: 5px;
  top: 5px;}

@media only screen and (min-width: 901px) {
#nav {display:block;}
}

@media only screen and (max-width: 900px) {
	  
body {
	margin:0px;
  }
.mobilenav{
display:block;
font-size:2.5em;
}
.mobilenav a {
	color:black;
}
#nav {display:none;
	float:right;
width: -webkit-calc(91% - 25px);
    width: -moz-calc(91% - 25px);
    width: calc(91% - 25px);
        margin-right:2%;	}
#nav .header {margin:0px;
	float:right;
	padding:15px 20px;
	}
#nav .login {border-radius:15px 15px 0px 0px;
	padding-bottom:0px;}
#nav .dates {border-radius:0px 0px 15px 15px;
	padding-top:0px;
	margin-bottom:10px;}
.year a {
    font-size: 250%;
}
.month a {
	margin-right:5px;
	font-size:100%;
}
ul li ul.dropdown {
    display: block;
    opacity: 100;
    visibility: visible;
}

.dates ul li ul li {
	display:inline;
}
ul li:hover ul.dropdown{
    animation: none;
}

.header {width: -webkit-calc(91% - 25px);
    width: -moz-calc(91% - 25px);
    width: calc(91% - 25px);
	margin-right:2%;}
h1#title a {
	font-size:250%;
	}
#title {
line-height:40px;
margin:10px 40px;
}



}

@media only screen and (max-width: 450px) {
.images img{height:auto;
        max-height:none;
	width:100%;
}
	

}