/**
 *   Util layout grid classes
 */
.col_1 {
  margin-left: 0px;
  width: 205px; }

.col_2 {
  margin-left: 40px;
  width: 450px; }

.col_3 {
  margin-left: 80px;
  width: 695px; }

.col_4 {
  margin-left: 120px;
  width: 940px; }

/**
 *   General styling
 */
p {
  margin: 10px 0; }

.logo {
  margin-left: -92px; }

/**
 *   top
 */
#top {
  margin-bottom: 0; }

.wrapper {
  margin: 0 auto;
  width: 940px; }

/**
 *   personalPage
 */
.personalPage {
  margin: 50px auto 0; }
  .personalPage article > header {
    text-transform: uppercase; }
  .personalPage article > header, .personalPage article > section, .personalPage article li {
    margin-bottom: 15px; }

/**
 * Grid Page
 */
.grid {
  margin: 50px auto 0; }
  .grid article {
    margin-right: 50px;
    width: 280px; }
    .grid article img {
      height: 158px;
      width: 280px; }
    .grid article .details {
      color: white;
      display: none;
      font-size: 16px;
      height: 158px;
      left: 0;
      padding: 20px;
      position: absolute;
      right: 0;
      top: 0; }
    .grid article:hover .details {
      background-color: #c1074b;
      display: block; }

/**
 * Item Page
 */
.genericItemPage {
  margin-top: 0; }
  .genericItemPage nav {
    margin-top: 0; }
    .genericItemPage nav a:first-child {
      margin-left: 0; }
  .genericItemPage .info {
    width: 280px; }
  .genericItemPage .images {
    margin-left: 50px;
    width: 610px; }

/**
 * contact page
 */
.contactPage {
  margin-left: 0;
  margin-top: 25px; }
  .contactPage form {
    margin-left: 0; }
    .contactPage form input[type=text] {
      width: 320px; }
    .contactPage form textarea {
      height: 160px; }
    .contactPage form label {
      display: inline-block;
      width: 75px; }
    .contactPage form .nameWrapper, .contactPage form .emailWrapper, .contactPage form .phoneWrapper {
      height: 40px;
      margin-bottom: 20px;
      margin-left: 0; }
    .contactPage form .messageWrapper .inputWrapper {
      width: 395px; }
    .contactPage form .inputWrapper {
      display: inline-block;
      vertical-align: top; }

/**
 *  JavaScript flavours menu
 */
.flavours:hover {
  max-height: 200px;
  overflow: visible; }
