/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* Modified & Customised by kevin@associate.ie 
*/

header nav ul li a.current, header ul.subnav li a.current, p strong, section.menu article h3 { font-family: "Avenir Next LT W01 Demi", "AvenirNextLTW01-Regular", "Avenir", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }

p em, li em { font-family: "AvenirNextLTW01-Italic", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }

#thirty { width: 113px; height: 108px; display: block; background: url(../images/30.png) top left no-repeat; text-indent: -999px; position: absolute; top: 0; right: 0; }

/* #Catch All Styles
================================================== */
#signature { position: absolute; bottom: 0px; left: 40px; z-index: 1000; width: 240px; height: 45px; text-indent: -999em; display: block; background: url( ../images/signature.png) top left no-repeat }
a.underline { padding-bottom: 1px; border-bottom: 1px solid #333333; }
a.underline:hover { padding-bottom: 1px; border-bottom: 1px solid #cccccc; }
div.map { float: left; width: 396px; height: 420px; }

/* #Header Styles
================================================== */
header { width: 286px; margin: 0 20px 0 40px; float: left; text-align: left; padding: 56px 0 0 0; position:relative; z-index: 100; }
header nav { width: 286px; font-weight: 400; text-transform: uppercase; padding-top: 18px; border-top: 2px solid #000000;  }
header h1 a { background: url(../images/guilbaud-logo.png) top left no-repeat;display: block; width: 286px; height: 56px; text-indent: -999em; margin: 0 0 0 0; } 
header nav ul { width: 138px; font-size: 12px; float: left; margin: 0 10px 0 0; display: inline; }
header nav ul:last-child { margin-right: 0;}
header nav ul li a { width: 138px; padding: 6px 0 4px 0; border-bottom: 1px solid #cccccc; display: block; } 
header nav ul li a.current { color: #000; border-bottom: 2px solid #000000; padding-bottom: 3px; }
header nav ul li span { color: #808285; width: 138px; padding: 6px 0 4px 0; border-bottom: 1px solid #cccccc; display: block; line-height: 16px; } 
header .intro { width: 286px; text-align: left; padding: 16px 0 0 0; position:relative; z-index: 100; float: left; border-bottom: 2px solid #000000; }
header .intro p { margin: 0 0 16px 0; }

header ul.subnav { width: 138px; font-size: 12px; float: left; margin: 0 10px 26px 0; display: inline; text-transform: uppercase; }
header ul.subnav:last-child { margin-right: 0;}
header ul.subnav li a { width: 138px; padding: 6px 0 4px 0; border-bottom: 1px solid #cccccc; display: block; } 
header ul.subnav li a.current { color: #000; border-bottom: 2px solid #000000; padding-bottom: 3px; }
header ul.subnav li span { color: #808285; width: 138px; padding: 6px 0 4px 0; border-bottom: 1px solid #cccccc; display: block; line-height: 16px; } 

/* Subnav Menu*/
header ul.subnav.menu { background: #4f5052; width: 138px; font-size: 12px; float: left; margin: 0 10px 26px 0; padding: 12px 0; display: inline; text-transform: uppercase; }
header ul.subnav.menu li { margin-left: 6px; margin-right: 6px; }
header ul.subnav.menu li:first-child a { border-top: 1px solid #fff; }
header ul.subnav.menu li a { background: #4f5052; color: white; width: 126px; padding: 6px 0 4px 0; border-bottom: 1px solid #fff; display: block; } 
header ul.subnav.menu li a:hover { color: #eaeaea; border-bottom: 2px solid #fff; padding-bottom: 3px; } 
header ul.subnav.menu li a.current { color: #eaeaea; border-bottom: 2px solid #fff; padding-bottom: 3px; }
header ul.subnav.menu li span { color: #fff; width: 126px; padding: 6px 0 4px 0; border-bottom: 1px solid #cccccc; display: block; line-height: 16px; } 

a#twitter { position: absolute; right: -590px; top: 9px; text-indent: -99999px; background: url(../images/twitter.gif) 0 50% no-repeat; padding: 0; width: 29px; height: 20px; text-transform: uppercase; font-size: 10px;  }
a#instagram { position: absolute; right: -620px; top: 9px; text-indent: -99999px; background: url(../images/Instagram2.png) 0 50% no-repeat; padding: 0; width: 20px; height: 20px; text-transform: uppercase; font-size: 10px;  }


.ie header nav ul { width: 138px; font-size: 12px; float: left; margin: 0 5px 0 0; display: inline; }

/* Shop Form Styles 
================================================== */
.main article select { width: 192px; margin: 0 0 16px 0; }

/* Reservations Form Styles 
================================================== */
div.booking { float: left; width: 396px; min-height:420px; height:auto !important; height:420px; background: #D8D6D6; padding: 16px 0; }
div.booking h2 { font-size: 12px; margin: 0 16px 16px 16px;  text-transform: uppercase; }
div.booking p { margin: 0 16px 16px 16px;  }
div.booking .row { position: relative; margin: 0 16px 16px 16px; }
div.booking input, div.booking select { font-family: "AvenirNextLTW01-Regular", "Avenir", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; } 
div.booking input.input-medium  { font-family: "AvenirNextLTW01-Regular", "Avenir", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; background: #D8D6D6; border-bottom: 1px solid black; border-left: 0; border-right: 0; border-top: 0; padding: 2px; width: 360px; margin: 0; } 
div.booking select.select-medium  { width: 180px; margin: 0; }
div.booking input.input-medium:focus {background: white; border-bottom: 1px solid white;}
div.booking .captcha { margin: 0 16px; }
div.booking div.captcha label { display: block; margin: 16px 0; }
div.booking div.captcha img { margin-bottom: 8px; }
div.booking input.send-button { background: white; border: none; text-transform: uppercase;  margin: 0 16px; padding: 4px; width: 120px; }

/* #Validation
================================================== */

.LV_validation_message{
	margin: 0; color:#CC0000;
	position: absolute; right: 0px; top: 0; line-height: 16px;
	padding: 2px;
}
    
div.booking input.input-medium.LV_invalid_field, 
div.booking input.input-medium.LV_invalid_field:hover, 
div.booking input.input-medium.LV_invalid_field:active,{
	background: #CC0000;
    border-bottom: 1px solid #CC0000;
}

/* Gallery Styles 
================================================== */
section.gallery { position: absolute; left: 0; top: 0; width: 100%; height: 620px; }
section.single img { float: right; }
section.gallery.cropped{ position: absolute; left: 360px; top: 0; width: 600px; height: 620px; }

/* #Article Styles
================================================== */
section.main { float: left; width: 600px; margin: 140px 0 0 0; padding-top: 19px; border-top: 1px solid #000000; min-height:460px; height:auto !important; height:460px; }
section.main img.portrait { float: left; }
section.main .multiple-image { display: block; width: 396px; float: left; position: relative; }
section.main .multiple-image img { width: 100%; float: none; position: absolute; left: 0; top: 0; opacity: 0; transition: 1s opacity; }
section.main .multiple-image img.selected { opacity: 1; }
section.main article.col { width: 192px; margin-left: 408px; min-height:418px; height:auto !important; height:418px; }
section.main article.col p { text-align: justify; }
section.main article.col h2 { font-size: 12px; width: 100%; margin: 0 0 36px 0; text-transform: uppercase; text-align: center; padding-bottom: 18px; margin-bottom: 16px; background: url(../images/mini-hr.gif) bottom center no-repeat; } 

/* Alt Gallery Styles 
================================================== */
section.main .gallery { position: static; width: 600px; height: 420px; }

/* #News Styles
================================================== */
section.news { float: left; width: 600px; margin: 140px 0 0 0; min-height:460px; height:auto !important; height:460px; }
section.news article { width: 192px; float: left; margin: 0 12px 12px 0; padding-top: 19px; border-top: 1px solid #000000; border-bottom: 2px solid #000000; min-height:232px; height:auto !important; height:232px; text-align: center; }
section.news article p { text-align: center; }
section.news article:nth-child(3n) { margin-right: 0px;  }
section.news article p.date, section.main article.col p.date { font-size: 11px; text-align: center; margin: 0 auto; width: 100%; }
section.news article h2 { text-transform: uppercase; font-size: 12px; line-height: 16px; margin-bottom: 16px; text-align: center; }
section.news article img { margin-bottom: 10px; }
section.news div.pagination { width: 100%; float: left; }
 
/* #Menu Styles
================================================== 
section.menu { float: left; width: 600px; margin: 140px 0 0 0; }
section.menu article { width: 192px; float: left; margin: 0 12px 0 0; padding-top: 25px; border-top: 1px solid #000000; }
section.menu article:last-child { margin-right: 0px;  }
section.menu article h2 { text-transform: uppercase; font-size: 12px; }
section.menu article h3 { text-align: center; font-size: 12px; line-height: 16px; margin-bottom: 16px; }
section.menu article h2, .menu article ul li { text-align: center; padding-bottom: 18px; margin-bottom: 16px; background: url(../images/mini-hr.gif) bottom center no-repeat; } 
.menu article ul li:last-child { background: transparent; margin: 0; padding: 0; }
section.menu ul {margin: 0 8px 16px 8px;}*/

/* #New Menu Styles
================================================== */
section.menu { float: left; width: 600px; margin: 140px 0 0 0; }
section.menu article.wide { width: 396px; float: left; margin: 0 0 0 0; border-top: 0; padding-top: 25px; border-top: 1px solid #000000;  }
section.menu h2.subtitle { text-transform: uppercase; text-align: center; font-size: 12px; width: 192px; float: left; margin: 0 12px 0 0; padding-top: 25px; border-top: 1px solid #000000; }
section.menu article.wide h3 { text-align: center; font-size: 12px; line-height: 16px; margin-bottom: 16px; }
section.menu article.wide h2, .menu article.wide ul li { text-align: center; padding-bottom: 18px; margin-bottom: 16px; background: url(../images/mini-hr.gif) bottom center no-repeat; } 
.menu article ul li:last-child { background: transparent; margin: 0; padding: 0; }
section.menu ul {margin: 0 8px 16px 8px;}


/* #Shop Styles
================================================== */
section.shop-menu { float: left; width: 600px; margin: 140px 0 0 0; }
section.shop-menu article { width: 192px; float: left; margin: 0 12px 0 0; padding-top: 25px; border-top: 1px solid #000000; }
section.shop-menu article:last-child { margin-right: 0px;  }
section.shop-menu article h2 { text-align: center; text-transform: uppercase; font-size: 12px; margin: 0 8px 16px 8px; }
section.shop-menu article h3 { text-align: center; font-size: 12px; line-height: 16px; margin-bottom: 16px; }
section.shop-menu article img { margin-bottom: 16px; }
section.shop-menu article p {margin: 0 8px 16px 0px;}

section.shop-menu.twocol article { width: 294px; }
section.shop-menu.twocol article:nth-child(even) { margin-right: 0px; }



/* #Footer Styles
================================================== */
footer hr{ margin: 0 16px 16px 40px;  }

footer p { margin: 0 40px; color: #939598; }
footer p span a { color: #939598; } footer p span a:visited { color: #939598; }
footer p span { margin-right: 9px;  }
footer p span.smaller { font-size: 10px; }
footer img.soon { position: absolute; right: -2px; top: 4px; width: 300px; }


/* #IE Bug Fixes:
/* #News Styles
================================================== */
.ie section.news { float: left; width: 612px; margin: 140px 0 0 0; min-height:460px; height:auto !important; height:460px; }
.ie section.menu { float: left; width: 612px; margin: 140px 0 0 0; }
.ie section.shop-menu { float: left; width: 612px; margin: 140px 0 0 0; }


/* #Media Queries
/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
body { background: #414042 url(../images/med-bg.gif) 50% 0 repeat-y; }
.container  { width: 768px; }
footer { width: 768px; } 
	     
header { width: 286px; margin: 0 10px 0 10px; float: left; text-align: left; padding: 56px 0 0 0; position:relative; z-index: 100; }
section.main { width: 450px; }
section.main img.portrait { width: 248px; height: auto; }
section.main article.col { width: 192px; margin-left: 258px; }
section.main .gallery { position: static; width: 450px; height: 315px; }
section.gallery.cropped{ position: absolute; left: 307px; top: 0; width: 450px; }

section.menu { float: left; width: 450px; margin: 140px 0 0 0; }
section.menu article { width: 143px; float: left; margin: 0 10px 0 0; padding-top: 25px; border-top: 1px solid #000000;   }
section.menu article:last-child { margin-right: 0px;  }
section.menu article.wide { width: 256px; float: left; margin: 0 0 0 0; padding-top: 25px; border-top: 1px solid #000000;   }
section.menu h2.subtitle { width: 143px; float: left; margin: 0 10px 0 0; padding-top: 25px; border-top: 1px solid #000000; }

section.news { float: left; width: 450px; margin: 140px 0 0 0; }
section.news article { width: 143px; float: left; margin: 0 10px 10px 0; padding-top: 19px; border-top: 1px solid #000000; border-bottom: 2px solid #000000;  }
section.shop-menu { float: left; width: 450px; margin: 140px 0 0 0; }
section.shop-menu article { width: 143px; float: left; margin: 0 10px 10px 0; padding-top: 19px; border-top: 1px solid #000000; }
section.shop-menu article:last-child { margin-right: 0px;  }

div.booking { float: left; width: 450px; min-height:420px; height:auto !important; height:420px; background: #D8D6D6; padding: 16px 0; margin-bottom: 20px; }
div.booking h2 { font-size: 12px; margin: 0 16px 16px 16px;  text-transform: uppercase; }
div.booking p { margin: 0 16px 16px 16px;  }
div.booking .row { position: relative; margin: 0 16px 16px 16px; }
section.main.reservations article.col, section.main.contact article.col { width: 450px; margin: 20px 0 0 0; }

div.map { float: left; width: 450px; margin: 0 0 20px 0; height: 420px; text-align: center; }
div.map iframe { margin: 0 auto; }
		
#signature { position: absolute; bottom: 0px; left: 20px; }		
footer hr{ margin: 0 0 16px 20px;  }
footer p { margin: 0 20px; color: #939598; }		
		
.gallery img, section.main img, section.news article img, section.shop-menu article img { max-width: 100%; height: auto; }  

a#twitter { right: -430px;}
a#instagram { right: -460px; }

footer img.soon {
	width: 160px;
	right: -8px;
	top: 6px;
}

		
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
.container { width: 300px; margin: 0 auto; }
body { background: #414042 url(../images/340-bg.gif) 50% 0 repeat-y; }
footer { width: 300px; } 

#signature { display: none; }	     
header { width: 300px; margin: 0 0 20px 0; float: none; text-align: left; padding: 56px 0 0 0; position:relative; z-index: 100;  }
header .intro { width: 300px; text-align: left; padding: 16px 0 0 0; position:relative; z-index: 100; float: left; border-bottom: 2px solid #000000; }
header nav { width: 300px;}
header h1 a { background: url(../images/guilbaud-logo.png) top center no-repeat;display: block; width: 300px; height: 56px; text-indent: -999em; margin: 0 0 0 0; } 
header nav ul li span { color: #808285; width: 138px; padding: 6px 0 4px 0; border-bottom: 1px solid #cccccc; display: block; line-height: 16px; } 
header nav ul li span a { color: #808285; width: 138px; padding: 0 0 0 0; border-bottom: 0; display: inline; line-height: 16px; } 

section.main { width: 300px; margin: 0 0 0 0; float: none; border-top: 0; min-height:220px; height:auto !important; height:220px;  }
section.main img.portrait { width: 286px; height: auto; margin-bottom: 20px; }
section.main article.col { width: 286px;  margin: 0 auto; }
article.col form { margin-bottom: 16px; }
section.gallery { position: static; width: 286px; height: 200px; float: left; }
section.main .multiple-image { display: block; width: 100%; height: 360px; overflow: hidden; float: none; position: relative; }

section.main .gallery { position: static; margin: 0 auto; float: left; width: 300px; height: 200px; }
section.gallery.cropped{ position: static; margin: 0 auto; float: left; width: 300px; height: 310px; }
section.menu { width: 300px; margin: 0 0 0 0; float: none;  }
section.menu article { width: 300px; float: left; margin: 0 0 0 0; padding-top: 25px; border-top: 0;   }
section.menu article:last-child { margin-right: 0px;  }
section.menu article.wide { width: 300px; float: left;  margin: 0 0 16px 0; padding-top: 25px; border-bottom: 1px solid #000000;   }
section.menu h2.subtitle { width: 300px; float: left; margin: 0 0 16px 0; padding-top: 0; border-top: 0;  }

section.news { float: left; width: 300px; margin: 0 0 0 0; }
section.news article { width: 300px; float: left; margin: 0 0 10px 0; padding-top: 19px; border-top: 0; border-bottom: 1px solid #000000;  }
section.news article { text-align: center; } 
section.news article:last-child { border-bottom: 0; } 

section.shop-menu { padding-top: 19px float: left; width: 300px; margin: 0 0 0 0;  }
section.shop-menu article { width: 300px; float: left; margin: 0 0 10px 0; padding-top: 19px; border-bottom: 1px solid #000000; border-top: 0; text-align: center; }
section.shop-menu article:last-child { border-bottom: 0; }

div.booking { float: left; width: 300px; min-height:220px; height:auto !important; height:220px; background: #D8D6D6; padding: 16px 0; margin-bottom: 20px; }
div.booking h2 { font-size: 12px; margin: 0 16px 16px 16px;  text-transform: uppercase; }
div.booking p { margin: 0 16px 16px 16px;  }
div.booking .row { position: relative; margin: 0 16px 16px 16px; }
div.booking .row .input-medium { width: 258px; }
section.main.reservations article.col, section.main.contact article.col { width: 300px; margin: 20px 0 0 0; }

div.map { float: left; width: 300px; margin: 0 0 16px 0; height: 420px; text-align: center; }
div.map iframe { margin: 0 auto; width: 100%; }
		
#signature { position: absolute; bottom: 0px; left: 20px; }		
footer hr{ margin: 0 0 16px 0;  }
footer p { margin: 0 34px 16px 0; color: #939598; font-size: 10px; }
footer p span { margin-right: 3px; }
footer a#twitter { position: static; background: url(../images/twitter.gif) 0 50% no-repeat; padding: 10px 15px 10px 35px; text-transform: uppercase; font-size: 10px;  }		
.gallery img, section.main img, section.news article img, section.shop-menu article img { max-width: 100%; height: auto; margin-bottom: 20px;}        

footer img.soon {
	position: static;
	display: block;
}

a#twitter { right: 30px;}
a#instagram { right: 0; }

}


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
body { background: #414042 url(../images/340-bg.gif) 50% 0 repeat-y; }
         /* .container { width: 420px; }*/
    }