/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Custom Fonts
   ========================================================================== */

@font-face {
    font-family: 'allerregular';
    src: url('aller_rg.eot');
    src: url('aller_rg.eot?#iefix') format('embedded-opentype'),
         url('aller_rg.woff') format('woff'),
         url('aller_rg.ttf') format('truetype'),
         url('aller_rg.svg#allerregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'TitilliumText22LThin';
    src: url('TitilliumText22L001-webfont.eot');
    src: url('TitilliumText22L001-webfont.eot?#iefix') format('embedded-opentype'),
         url('TitilliumText22L001-webfont.woff') format('woff'),
         url('TitilliumText22L001-webfont.ttf') format('truetype'),
         url('TitilliumText22L001-webfont.svg#TitilliumText22LThin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LLight';
    src: url('TitilliumText22L002-webfont.eot');
    src: url('TitilliumText22L002-webfont.eot?#iefix') format('embedded-opentype'),
         url('TitilliumText22L002-webfont.woff') format('woff'),
         url('TitilliumText22L002-webfont.ttf') format('truetype'),
         url('TitilliumText22L002-webfont.svg#TitilliumText22LLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LRegular';
    src: url('TitilliumText22L003-webfont.eot');
    src: url('TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'),
         url('TitilliumText22L003-webfont.woff') format('woff'),
         url('TitilliumText22L003-webfont.ttf') format('truetype'),
         url('TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LMedium';
    src: url('TitilliumText22L004-webfont.eot');
    src: url('TitilliumText22L004-webfont.eot?#iefix') format('embedded-opentype'),
         url('TitilliumText22L004-webfont.woff') format('woff'),
         url('TitilliumText22L004-webfont.ttf') format('truetype'),
         url('TitilliumText22L004-webfont.svg#TitilliumText22LMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LBold';
    src: url('TitilliumText22L005-webfont.eot');
    src: url('TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),
         url('TitilliumText22L005-webfont.woff') format('woff'),
         url('TitilliumText22L005-webfont.ttf') format('truetype'),
         url('TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LXBold';
    src: url('TitilliumText22L006-webfont.eot');
    src: url('TitilliumText22L006-webfont.eot?#iefix') format('embedded-opentype'),
         url('TitilliumText22L006-webfont.woff') format('woff'),
         url('TitilliumText22L006-webfont.ttf') format('truetype'),
         url('TitilliumText22L006-webfont.svg#TitilliumText22LXBold') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* ==========================================================================
   Druff Interactive styles
   ========================================================================== */


.headerBackground { width: 100%; height: 413px ; background-color: #ed1666; margin-top: 0px; min-width: 960px}
.headerContainer {width: 960px; height: auto; margin: 0px auto; }

header {height: 413px; width: 960px}

.logo {width: 150px; height: 58px; position: relative; float: left; margin-top: 10px;}

/*=== Navigation Styles ===*/

nav {height: 20px; width: auto; float: right; position: relative; margin-top: 48px; margin-bottom: 5px; margin-left: 30px;  font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-transform: uppercase}

 nav ul {width:auto; margin:0 auto; list-style:none}
		nav ul li {width:auto; height:auto; float:left; padding:0 5px; text-align:center;}
			nav ul li a {color:#FFF; text-decoration:none}
				nav ul li a:hover {text-decoration: underline}
				
		


/*=== Dividers Styles ===*/
.whiteDivider {width: 100%; height: 5px; position: relative; float: left;background-image: url(../images/divider_dots.gif)}
.divider {width: 100%; height: 5px; position: relative; float: left; margin-top: 20px;background-image: url(../images/divider_dots-pink.gif)}


/*=== Layout & Container  Styles ===*/
.catchphraseSlider {width: 100%; height: 142px; position: relative; float: left; background-image: url(../images/quotes.png); background-repeat: no-repeat }

.photoGrid {height: 392px; width: 960px; position: absolute; top: 218px; z-index: 9}

    @media \0screen {  
        .photoGrid {position: relative; z-index: 99; top: 0px}  
    }  
	

.bodyBackground {width: 100%; height: 977px ; position: relative; float: left; background-image: url(../images/Libandeli-pinkPattern-background.gif); background-repeat: repeat-x; margin-top: 0px}
.autoHeight {height: auto} 
.current {text-decoration: underline}
section {height: 805px; width: 960px; position: relative; margin: 198px auto;  z-index: 11}

.leftColumn {height: 190px; width: 230px; position: relative;float: left; margin-top: 20px;}
.rightColumnContainer {height: 190px; width: 708px; position: relative; float: left;  margin-top: 20px;  margin-left: 20px; background-color:#ffffff; /*border: 1px solid #afacac */}
.rightColumnContent {height: 188px; width: 706px; position: relative; float: left;  /* background-color: #f8f6f6; border: 1px solid #ffffff; */}
.shadow {
-moz-box-shadow: 3px 3px 4px #b6b6b6;
-webkit-box-shadow: 3px 3px 4px #b6b6b6;
box-shadow: 3px 3px 4px #b6b6b6;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#b6b6b6')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#b6b6b6');
}
.rightColumnContainerAuto {height: auto; width: 708px; position: relative; float: left;  margin-top: 20px;  margin-left: 20px; background-color:#ffffff; /* border: 1px solid #afacac */}
.rightColumnContentAuto {height: auto; width: 706px; position: relative; float: left;  /* background-color: #f8f6f6; border: 1px solid #ffffff; */}
.shadow {
-moz-box-shadow: 3px 3px 4px #b6b6b6;
-webkit-box-shadow: 3px 3px 4px #b6b6b6;
box-shadow: 3px 3px 4px #b6b6b6;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#b6b6b6')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#b6b6b6');
}

.mapInfoContainer  {width: 345px; height:242px; float: left; position: relative; background-colour: #ffffff; /* border: 1px solid #afacac; */}
.mapInfoContent {width: auto; height:200px; /* background-color: #bdbdbd; border: 1px solid #ffffff; */ font: 14px/18px Arial, Helvetica, sans-serif; color: #383736; text-align: justify; padding: 0px }
.leftColumn2 {height: 440px; width: 230px; position: relative;float: left; margin-top: 20px; }
.rightColumn2 {height: 440px; width: 710px; position: relative; float: left;  margin-top: 20px;  margin-left: 20px; }
.mapContainer {height: 388px; width: 340px; position: relative; float: left; margin-left: 20px; background-color: #ffffff; border: 1px solid #afacac;}
.mapContent {height: 386px; width: 338px; background-color: #315ab6; border: 1px solid #ffffff;}
.pinkBlock {width: 223px;height: 418px; float: left; margin: 20px 20px 20px 0;background-color: #ffffff; border: 1px solid #afacac;}
.pinkBlockContent {width: 221px;height: 416px;background-color: #ed1666;border: 1px solid #ffffff;}
.blueBlock {width: 223px;height: 418px;float: left; margin: 20px 20px 20px 0; background-color: #ffffff; border: 1px solid #afacac;}
.blueBlockContent {width: 221px;height: 416px;background-color: #3059b6;border: 1px solid #ffffff;}




/*=== Content Styles ===*/
.headingBlue {color: #315ab6; font:22px allerregular; line-height: 1em; text-transform: uppercase; margin: 0px}
.headingPink {color: #ed1666; font:22px allerregular; line-height: 1em; text-transform: uppercase; margin: 0px}
.catchphrase {color: #315ab6; font: 16px/18px Arial, Helvetica, sans-serif}
.quote {height: 123px; width: 202px; padding: 20px 0 0 20px; color: #315ab6; font: 16px/18px Arial, Helvetica, sans-serif; background-image: url(../images/quotes-white.gif); background-repeat: no-repeat;}
.content {font: 14px/18px Arial, Helvetica, sans-serif; color: #383736; padding: 0px; text-align: justify; margin-top: 0px}
.contentAuto {font: 14px/18px Arial, Helvetica, sans-serif; color: #383736; padding: 0px; text-align: justify; margin-top: 0px}
.margRight {margin-right: 20px}
.blue {color: #31577e}
.darkblue {color: #23415b}
.mapHeading {color: #ffffff; font: 14px Arial, Helvetica, sans-serif; margin: 10px; text-transform: uppercase}

.servicesHeading {color: #315ab6; font: 20px/18px TitilliumText22LRegular;text-transform: uppercase; margin-top: 15px; letter-spacing: -1px }
.servicesParagraph {color: 35e5e5e; font: 14px/16px Arial, Helvetica, sans-serif;padding: 0 10px 0 10px }

.servicesReadmore a:link {color: #ffffff; text-decoration: none; font: 12px Arial, Helvetica, sans-serif; }
.servicesReadmore a:visited {color: #ffffff; text-decoration: none; font: 12px Arial, Helvetica, sans-serif;}
.servicesReadmore a:hover {text-decoration: underline;  }
.servicesReadmore a:active {color: #ffffff; text-decoration: none; font: 12px Arial, Helvetica, sans-serif; }

.navFooter a:link {color: #ffffff; text-decoration: none; font: 10px Arial, Helvetica, sans-serif; }
.navFooter a:visited {color: #ffffff; text-decoration: none; font: 10px Arial, Helvetica, sans-serif; }
.navFooter a:hover {text-decoration: underline; }
.navFooter a:active {color: #ffffff; text-decoration: none; font: 10px Arial, Helvetica, sans-serif; }

.thinkingMan {float: right; padding-top: 3px}
.drums {width: 119px; height: 105px; z-index: 10; position: absolute; left: 90px; bottom: 30px; background-image: url(../images/drums.png)}
.bluebutton {width: 321px; height: 17px; padding: 10px 5px 10px 15px; background-image: url(../images/blue-button-bg.jpg); font: 10px Arial, Helvetica, sans-serif; color: white; text-decoration: none}
.bluebutton a:link {text-decoration: none; color: #ffffff; font: 11px Arial, Helvetica, sans-serif; }
.bluebutton a:hover {text-decoration: underline; color: #ffffff; font: 12px Arial, Helvetica, sans-serif; }
.bluebutton a:active {color: #ffffff; text-decoration: none; font: 12px Arial, Helvetica, sans-serif; }
.bluebutton a:visited {color: #ffffff; text-decoration: none; font: 12px Arial, Helvetica, sans-serif; }

.servicesThumb {float: left; margin: 5px 10px 5px 10px;}
.pinkLink {font: 14px Arial, Helvetica, sans-serif; font-weight: bold; color: #ed1666; text-decoration: none}

.pinkBlockContent {font:14px Arial, Helvetica, sans-serif; color: #ffffff; }
.pinkBlockContent ul {width:183px;  list-style:none; padding: 0 20px}
.pinkBlockContent ul li {padding: 10px 0px 10px 0px; border-bottom: 1px solid #810734}

.blueBlockContent {font:14px Arial, Helvetica, sans-serif; color: #ffffff; }
.blueBlockContent ul {width:183px;  list-style:none; padding: 0 20px}
.blueBlockContent ul li {padding: 10px 0px 10px 0px; border-bottom: 1px solid #1b4095}
.last {border-bottom: none!important}

.backUpTop {display:none}

/*=== Form Styles ===*/
.formWrapContacting { width:auto; height:auto; margin: 20px;}
	.formInlineRow { width:623px; height:auto; background-color:#990000!important; margin:0 0 0 10px;}
		.formInlineRow .formLabel {width: 110px;float: left;text-align: right;margin-right: 5px;margin-top: 2px;}
		.formInlineRow .formLabel label {font-weight: normal;font:12px/17px 'Verdana', Geneva, sans-serif; color:#666;}
		.formInlineRow .formLabel {text-align: left;}
		.formInput input { width: 303px; height:24px; float: left; padding-left:10px; margin:5px 10px 5px 10px; font:14px/18px  Arial, Helvetica, sans-serif; background-color:#f2f2f2; float:left; border:none; color:#666;}
		.formInput2 input { width: 303px; height:24px; padding-left:10px; margin:5px 10px 5px 10px; font:14px/18px  Arial, Helvetica, sans-serif; background-color:#ffffff; float:left; border:none; color:#666;}
		
		.formInput textarea {width: 634px; height:77px; font:14px/18px  Arial, Helvetica, sans-serif; color: #666; background-color:#f2f2f2; border:none; margin:5px 0 0 10px;padding-left:10px; }
		.formInput2 textarea {width: 400px; height:77px; font:14px/18px  Arial, Helvetica, sans-serif; color: #666; background-color:#ffffff; border:none; margin:5px 0 0 10px;padding-left:10px; }
		.formInlineRow {clear: both;margin-bottom: 5px;}
			.formSubmit { width:150px; height:30px; float:right;font:bold 12px/30px  Arial, Helvetica, sans-serif;color:#fff; text-align:left; text-transform:uppercase; background:url(../images/libandeli-send-btns.png) 0 0 no-repeat; border:none; cursor:pointer; margin:10px;-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}
			.formSubmit:hover {background-position: -150px 0;}
			.required {color: rgb(255, 0, 0);margin-right: 3px;}
			.loginSubmitbtn { width:120px; height:30px; float:left; background-color:#fe6d16; margin:5px 0 0 0; padding:0 0 0 10px; font:14px/30px "Arial Black", Gadget, sans-serif; color:#FFF; text-transform:uppercase;}
			.inputfield {width: 303px; height: auto; padding-top: 10px; padding-left:10px; padding-bottom: 10px;display:block; margin-left: 10px;  float:left; font:14px/18px Arial, Helvetica, sans-serif; color:#666;   background-color:#f2f2f2; }
            .formcontent {font:14px/18px  Arial, Helvetica, sans-serif; color:#666;}


/*=== Footer Styles ===*/
footer {height: auto; width: 100%; position: relative; float: left;}
.servicesBackground {height: 200px;width: 100%;background-image: url(../images/Libandeli-caramelPattern-background.gif); min-width: 960px}
.servicesContent {height: 250px;width: 960px; margin: 0 auto}
.servicesBlock {height: auto; width: 220px; position: relative; float: left; margin: 40px 24px 12px 0; background-color: #ffffff; border: 1px solid #e23982}
.servicesReadmore {height: 51px; width: 220px;float: left; background-color: #ed1666; margin-right: 24px; margin-top: -12px; border: 1px solid #e23982}
.blueBar {height: 7px; width: 100%; position: relative; float: left; background-color: #315ab5;}
.footerBackground {height: 60px; width: 100%; float: left; position: relative; background-color: #ed1666}
.footerContent {width: 960px; height: 60px; margin: 0 auto}
.navFooter  {height: 20px; width: 490px; position: relative; float: left; margin-top: 20px; color: #ffffff; font: 10px Arial, Helvetica, sans-serif}
.copyRight  {height: 20px; width: 160px; position: relative; float: right; margin-top: 20px; color: #ffffff; font: 10px Arial, Helvetica, sans-serif}



.druff {height:20px; width:160px; position:relative; float:right; color: #ffffff; font:10px Arial, Helvetica, sans-serif}
.druff a {color: #ffffff; font:10px Arial, Helvetica, sans-serif; text-decoration:none}
.druff a:hover { text-decoration:underline}