/* reset styles */
html,body {
padding: 0;
margin: 0;
font-size: 100%;
}
h1, h2, h3, h4, h5, h6, p, ol, ul, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
h1 {
font-size: 2.5em;
font-weight: bold;
}
h2 {
font-size: 2em;
font-weight: bold;
}
h3 {
font-size: 1.5em;
font-weight: bold;
}
li, pre, code, address, variable {
padding: 0;
margin: 0;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { margin-left: 1.4em; list-style: decimal; }
ul { margin-left: 1em; list-style:square; }
q:before, q:after { content:''; }
/* basic styles */
html {
background-image: url(images/bg_page.png);
}
body {
background-image: url(images/banner.png);
background-repeat: repeat-x;
background-position: left top;
padding-bottom: 20px;
}
strong {
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
}
.right {
float: right;
margin-left: 15px;
}
.left {
float: left;
margin-right: 15px;
}
.portrait {
border: 1px solid rgb(102,102,102);
box-shadow: 2px 2px 3px rgb(153,153,153);
}
/* helper classes */
img.rwd {
max-width: 100%;
}
/* layout */
.wrapper {
width: 1000px;
margin: 0 auto;
}
.header {
height: 140px;
background-image: url(images/bg_banner.jpg);
margin-bottom: 20px;
position: relative;
}
.header .logo {
float: left;
margin-top: 35px;
}
.header .hours {
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style:italic;
color: rgb(10,47,2);
background-color: rgb(230,229,181);
clear: both;
width: 33%;
padding: 5px 10px;
}
.date {
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-weight:700;
color: rgb(204,0,0);
}
.nav {
margin: 85px 0px 0px;
padding: 0px;
list-style: none;
float: right;
}
.nav li {
display: inline;
}
.nav a {
text-decoration: none;
color: #525261;
font-family: pt-sans, Arial, Helvetica, sans-serif;
background-color: #F0F6F5;
display: inline-block;
padding: 3px 13px;
border-radius: 0px 7px 0px 7px;
margin-right: 5px;
-webkit-transition: background-color 0.5s ease 0s;
-moz-transition: background-color 0.5s ease 0s;
-ms-transition: background-color 0.5s ease 0s;
-o-transition: background-color 0.5s ease 0s;
transition: background-color 0.5s ease 0s;
border: 1px solid rgb(240,246,245);
box-shadow: 2px 2px 0px 0px rgb(204,204,204);
}
.nav a:hover {
background-color: rgb(153,153,153);
color: rgb(234,225,182);
border: 1px solid rgb(153,153,153);
box-shadow: 2px 2px 0px 0px rgb(225,237,235);
}
.header .reservation {
position: absolute;
right: 0px;
top: 8px;
border-right: 1px solid rgb(240,246,245);
border-left: 1px solid rgb(240,246,245);
border-bottom: 1px solid rgb(240,246,245);
}
.reservation a {
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-weight:700;
text-transform: uppercase;
text-decoration: none;
color: rgb(240,246,245);
background-color: rgb(10,47,2);
background-image: url(images/list_dingbat.png);
background-repeat: no-repeat;
background-position: 10px 5px;
padding: 3px 15px 2px 35px;
display: inline-block;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.reservation a:hover {
color: rgb(10,47,2);
background-color: rgb(201,237,149);
}
.main {
width: 64%;
float: left;
margin-bottom: 25px;
}
.main h1 {
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-weight:700;
font-size:36px;
color: #0B2E00;
text-shadow: 2px 2px 1px #CCCCCC;
margin-bottom: 20px;
}
.main p {
font-family:pt-sans, Arial, Helvetica, sans-serif;
font-size:17px/130%;
margin-bottom: 10px;
}
.aside {
width: 33%;
float: right;
border: 1px solid rgb(229,229,229);
border-radius: 5px;
/* for ie8 and below */
background: rgb(231,235,224);
/* for browsers with rgba support */
background: rgba(225,237,235,.5);
box-shadow: 2px 2px 2px rgba(0,0,0,.5);
font-family: pt-sans, Arial, Helvetica, sans-serif;
margin-bottom: 25px;
}
.aside strong {
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-weight:700;
}
.aside h2 {
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-weight:700;
font-size:18px;
color: #0B2E00;
border-top: 1px dotted rgba(153,153,153,1);
margin: 10px;
padding-top: 3px;
}
.aside ul {
margin-bottom: 25px;
}
.aside li {
list-style: none;
background-image: url(images/list_dingbat.png);
background-repeat: no-repeat;
padding-left: 20px;
margin-right: 10px;
margin-bottom: 10px;
color: #52525F;
}
.aside .figure {
margin: 0 20px 15px 20px;
font-family:pt-sans, Arial, Helvetica, sans-serif;
font-size:14px;
font-style:italic;
}
.figure img {
border: 1px solid rgba(204,204,204,1);
padding: 10px;
background-color: #E1EDEB;
display: block;
margin-left: -10px;
margin-bottom: 5px;
border-radius: 10px 0px 10px 0px;
}
.footer {
clear: both;
background-color: rgb(10,47,2);
padding: 5px 25px;
color: rgb(240,246,245);
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-size:14px;
font-style:italic;
border-radius: 25px;
margin-right: -25px;
margin-left: -25px;
}
.home-image {
background-color: rgb(240,246,245);
position: relative;
border: 1px solid rgb(229,229,229);
border-radius: 10px;
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
margin-bottom: 25px;
padding: 8px;
}
.home-image p {
text-indent: 0px;
}
.home-image .tagline {
position: absolute;
top: 34px;
right: 32px;
width: 60%;
text-align: right;
}
.home-image .tagline p {
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-size:32px;
font-weight:700;
color: white;
font-weight: normal;
background: rgb(10,47,2);
background: rgba(10,47,2,.75);
padding: 10px 20px;
display: inline-block;
margin-top: 10px;
line-height: .75;
}
.col50 {
width: 49%;
float: left;
border-left: 1px dotted rgba(153,153,153,1);
}
.main h2 {
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:700;
color: rgba(10,47,2,1);
margin: 0;
}
.col50 h2 {
text-align: center;
margin: 0 10px 10px;
}
.col50 p {
margin: 0 10px 10px;
font-size: 0.9em;
}
.tech {
background-image: url(images/tech-icon.png);
background-repeat: no-repeat;
padding-top: 50px;
background-position: center top;
}
.ingredients {
background-image: url(images/ingredient-icon.png);
background-repeat: no-repeat;
padding-top: 50px;
background-position: center top;
}
.home-image img {
display: block;
border-radius: 5px;
}
.map {
border: 1px solid rgb(229,229,229);
}
.main form p {
margin-bottom: 20px;
}
.small-print {
font-family: pt-sans, Arial, Helvetica, sans-serif;
font-size:0.8em;
font-style:italic;
!important;
color: rgba(153,153,153,1);
margin-top: 15px;
padding-top: 5px;
border-top: 1px dashed rgba(204,204,204,1);
}
.label {
color: #205b0a;
font-weight: 700;
text-align: right;
width: 30%;
float: left;
clear: left;
padding-right: 10px;
}
.submit {
margin-left: 32%;
}
.textbox {
width: 50%;
}