/*--------------------------------------------------
version: screen.css - 1.6
created: 13-04-2012
author: Al-Amin, Michael Eccleston ~ GlobalGraphics Associates Ltd.
email: webmaster@globalgraphics.co.uk
website: http://www.globalgraphics.co.uk/
--------------------------------------------------*/

@import url("base.css");
/* @import url("generic.css"); */
@import url("enrichment.css");

/* 2 Cols */
/*@import url("wireframes/2a.css");*/

#banner, #wrap, #footer { clear: both; }

/*-------------------------------------------------------------------*/
/* CUSTOM FONTS */
/*-------------------------------------------------------------------*/

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

}

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

}

@font-face {
    font-family: 'NunitoBold';
    src: url('../fnt/Nunito-Bold-webfont.eot');
    src: url('../fnt/Nunito-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fnt/Nunito-Bold-webfont.woff') format('woff'),
         url('../fnt/Nunito-Bold-webfont.ttf') format('truetype'),
         url('../fnt/Nunito-Bold-webfont.svg#NunitoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*-------------------------------------------------------------------*/
/* BASE CSS OVERRIDES  /  BASIC STYLES */
/*-------------------------------------------------------------------*/

body { background: #fff url('../img/ui/background.png') repeat-x 0 0; }
body, input, textarea { font-family: Arial, Helvetica, sans-serif; }
.container { background: #fff; margin: 0 auto; position: relative; text-align: left; width: 940px; }
a { color: #09f; text-decoration: none; }
a:active, a:focus, a:hover { color: #f00; text-decoration: underline; }

/* basic button - overrides in */
/* see also enrichment.css */
a.button { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
a.button { background: #c00 url('../img/ui/button.png') repeat-x 0 0; color: #fff; cursor: pointer; display: inline-block !important; font-size: 12px; font-weight: bold; height: 28px; line-height: 28px;; padding: 0 20px; text-align: left; text-decoration: none; width: auto; }
a.button:hover { color: #fc9; text-decoration: none; }

p, ul, ol, dl, label { color: #333; }
ul, ol { font-size: 1em; }
li p { font-size: 1.2em; }
h1, h2, h3, h4, h5, h6 { color: #dd0000; font-family: 'NunitoRegular', Arial, Helvetica, sans-serif; font-weight: normal; line-height: 1.2em;  }
h1 { font-size: 3em; }
h2 { font-size: 2.4em; }
h3 { font-size: 2.1em; }
h4 { font-size: 1.8em; }
h5 { font-size: 1.5em; }
h6 { font-size: 1.2em; }

.error, .alert { color: #f00; }

/* content - bullets */
ul.bull { list-style-type: disc; font-size: 1.2em; }
ol.num { list-style-type: decimal; font-size: 1.2em; }
ul.bull, ol.num { list-style-position: outside; margin-left: 30px; }
ul.bull ul, ol.num ol, ul.bull ol, ol.num ul { margin-bottom: 0px !important; font-size: 1em !important; }

/* content - bullets in edit area text fields */
.client-text ul { list-style-type: disc; font-size: 1.2em; }
.client-text ol { list-style-type: decimal; font-size: 1.2em; }
.client-text ul, .client-text ol { list-style-position: outside; margin-left: 30px; }
.client-text ul ul, .client-text ol ol, .client-text ul ol, .client-text ol ul { margin-bottom: 0px !important; font-size: 1em !important; }

/* basic contact form - overrided by #enquiry  */
/* see also enrichment.css */
.basic ul { margin-bottom: 0; }
.basic li { position: relative; padding: 2px 0; }
.basic li p { font-size: 1.1em; line-height: 1.2em; margin-bottom: 5px; }
.basic input, .basic textarea, .basic select { border: 1px solid #999; color: #000; display: block; margin: 0; padding: 3px; width: 185px; }
.basic .validation input { width: 60px; }
.basic select { width: auto; }
.basic label { color: #333; float: left; margin-right: 5px; }
.basic label.over { color: #000; position: absolute; top: 7px; left: 5px; line-height: 1em; margin: 0; }
.basic input[type="submit"], .basic input.button { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.basic input[type="submit"], .basic input.button { background: #c00 url('../img/ui/button.png') repeat-x 0 0; border: none; color: #fff; cursor: pointer; font-size: 12px; font-weight: bold; height: 28px; line-height: 28px; padding: 0 20px; text-align: center; width: auto; }
.basic input[type="submit"]:hover { color: #fc9; }

#enquiry .basic li { position: relative; padding: 5px 0; }
#enquiry .basic li p { font-size: 1.2em; margin-bottom: 10px; }
#enquiry .basic input, #enquiry .basic textarea, #enquiry .basic select  { padding: 5px; width: 288px; }
#enquiry .basic label { margin-top: 2px; margin-right: 10px; }
#enquiry .basic label.over { top: 9px; left: 7px; }
#enquiry .basic .validation input { width: 60px; }
#enquiry .basic input[type="submit"], #enquiry .basic input.button { padding: 0 20px; width: auto; }

/*-------------------------------------------------------------------*/
/* HEADER */
/*-------------------------------------------------------------------*/

#header { height: 90px; padding: 0 30px; width: 880px; }
#logo { background: url('../img/ui/logo.png') no-repeat 0 0; display: block; float: left; height: 34px; margin-top: 28px; text-indent: -9999px; width:143px;}
#header .welcome, #header .helpdesk { color: #666; font: 17px/34px 'NunitoLight', Arial, Helvetica, sans-serif; float: left; margin: 28px 0 0 20px; }
#header .welcome strong, #header .helpdesk strong { font-family: 'NunitoRegular', Arial, Helvetica, sans-serif; font-weight: normal; }
#header .helpdesk { clear: right; float: right;  margin: 4px 0 0 20px; }
#header .login { color: #666; float: right; font-size: 12px; line-height: 14px; margin-top: 10px; }
#header .login a { color: #666; font-weight: bold; }
#header .login a:hover { color: #f00; }

/*-------------------------------------------------------------------*/
/* MAIN NAVIGATION */
/*-------------------------------------------------------------------*/

#nav { clear: both; }
#nav ul { background-color: rgb(0,0,0); }
#nav ul { background-color: rgba(0,0,0,0.6); border-bottom: 1px dotted #fff; height: 39px; margin: 0; overflow: hidden; padding: 0; position: relative; z-index: 203; /* must be above #banner */ }
#nav ul li{ float: left; margin-left: 30px; }
#nav ul li a { color: #fff; font-family: 'NunitoRegular', Arial, Helvetica, sans-serif; display: block; font-size: 14px; line-height: 1.3em; padding: 10px 0 16px; text-decoration: none; }
#nav ul li a:hover { color: #f00; text-decoration: none; }
#nav ul li a.active { color: #ccc; text-decoration: none; }

/*-------------------------------------------------------------------*/
/* BANNER */
/*-------------------------------------------------------------------*/

/* see also enrichment.css */
#banner { background-color: #e5e5e5; height: 426px; margin-top: -40px; position: relative; width: 940px; z-index: 200; /* must be below #nav */ }
#banner .textbox { left: 30px; position: absolute; top: 60px; z-index: 201; /* must be above #banner */ }
#banner .textbox p { color: #fff; font-family: 'NunitoBold', Arial, Helvetica, sans-serif; font-size: 24px; text-shadow: 0 0 5px rgba(51,51,51,0.4); }
#banner .textbox strong { display: block; font-size: 30px; }
#banner ul { margin-bottom: 0; }
#fader { height: 426px; width: 940px; position: relative; z-index: 200; /* must be below #banner span */ }
#fader ul { margin-bottom: 0; }
#banner span { background: transparent url('../img/ui/banner-curve.png') no-repeat 0 0; bottom: 0; height: 59px; left: 0; position: absolute; width: 940px; z-index: 202; /* must be above #banner */ }

/*-------------------------------------------------------------------*/
/* CONTENT */
/*-------------------------------------------------------------------*/

/* CONTENT WRAPPER */
#wrap { background: #fff url('../img/ui/wrap.png') repeat-x 0 0; min-height: 300px; padding: 30px; width: 880px; }
#page-home #wrap { padding: 20px; width: 900px; }

/* HOMEPAGE BOXES */
.box { overflow: hidden; margin-bottom: 20px; }
.box:first-child { margin-bottom: 40px; }
.box > li { border-left: 1px dotted #999; float: left; margin-left: 20px; padding-left: 19px; width: 195px; }
.box > li:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
#content .box h3 { font-size: 2.4em; }
.box a { font-size: 1.2em; }
.box p a { display: block; font-size: 1em; }
#news-snippits, #case-study-snippits, #gallery-snippits { margin-bottom: 0; overflow: hidden; }
#news-snippits li, #case-study-snippits li  { margin-bottom: 15px; overflow: hidden; }
#gallery-snippits li { float: left; margin-bottom: 15px; width: 90px; /* IE7 + selectivizr.js needs width declaration for nth-child */  }
#gallery-snippits li:nth-child(old) { clear: both; }
#gallery-snippits li:nth-child(even) { margin-left: 15px; }
#news-snippits li div, #case-study-snippits li div { float: left; width: 95px; }
#news-snippits li img, #case-study-snippits li img, #gallery-snippits li img { display: block; float: right; }
#news-snippits li p, #case-study-snippits li p, #gallery-snippits li p { margin-bottom: 0; }

/* BREADCRUMBS */
#breadcrumbs { color: #666; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 1.1em; overflow: hidden; }
#breadcrumbs li { float: left; margin-right: 4px; }

/* CASE STUDIES AND NEWS LIST - see also ol.entries */
ul.entries li { border-bottom: 1px dotted #999; margin-bottom: 30px; overflow: hidden; padding-bottom: 30px; }
ul.entries img { float: right; }
ul.entries div { float: left; width: 70%; }
ul.entries h4 {  }
ul.entries .more { font-size: 1.2em; }
#page-news-article .primary, #page-case-study-article .primary { float: left; width: 560px; }
#page-news-article .secondary, #page-case-study-article .secondary { float: right; padding-top: 80px; width: 300px; }
a.back { border-top: 1px dotted #999; border-bottom: 1px dotted #999; display: block; line-height: 40px; }

/* PAGINATION */
.pagination { overflow: hidden; }
.pagination ol { float: right; margin-bottom: 0; }
.pagination ol li { font-size: 1.2em; float: left; }
.pagination ol li a { background-color: #e5e5e5;  color: #f00; display: block; padding: 4px 9px; margin-left: 4px; }
.pagination ol li a.active { background-color: #ccc; color: #647B82; }
.pagination ol li a:hover { color: #f00;  }

/* GALLERY */
#gallery { font-size: 1.2em; overflow: hidden; margin-bottom: 0; }
#gallery li { float: left; width: 200px; }
#gallery a { display: block; }
#gallery a img { border: 1px solid #999; }
#gallery a:hover img { border: 1px solid #f00; }
#gallery a span { color: #333; display: block; line-height: 1.2em; margin-top: 7px; text-align: center; }
#gallery a:hover span { color: #f00; }

/* LINKS */
#pages_summaries { overflow: hidden; margin-bottom: 0; }
#pages_summaries li { float: left; width: 200px; }
#pages_summaries a { display: block; }
#pages_summaries a:hover { text-decoration: none; }
#pages_summaries a img { border: 1px solid #999; }
#pages_summaries a:hover img { border: 1px solid #f00; }
#pages_summaries a h3 { font-size: 1.7em; margin-bottom: 0; text-decoration: none; }
#pages_summaries a p { margin-bottom: 5px; text-decoration: none; }
#pages_summaries a span { display: block; font-size: 1.2em; line-height: 1.2em; }
#pages_summaries a:hover span { color: #f00; text-decoration: underline; }

.row4 li { margin-bottom: 30px; margin-right: 20px; }
.row4 li:nth-child(4n+4) { margin-right: 0; }
.row4 li:nth-child(4n+5) { clear: both;}

/* LOGIN */
#login { margin-bottom: 30px; }

/* DOWNLOADS */
ol.entries { border-top: 1px dotted #999; border-bottom: 1px dotted #999; font-size: 1.2em; list-style-position: outside; list-style-type: decimal; padding: 10px 0 0 30px; }
ol.entries li { margin-bottom: 10px; }

/* NETWORK */
#network { margin: 20px 0;}
#map_canvas { float: left; width: 448px; height: 558px; border: 1px solid #ccc; }
#map_canvas div.map-wrapper {font-size: 1.2em; line-height: 1.2em; display:block;}
#map_canvas div.map-wrapper b {color: #0099FF; padding-bottom: 0.6em; font-size: 1.4em; }
#map_canvas div.type-1 b {color: #8EC8D9;}
#map_canvas div.type-2 b {color: #F2AA75;}
#map_canvas div.type-3 b {color: #FF766A;}
#locations { float: left; width: 420px; margin-left: 10px}
#locations li {float:left; clear:left;}
#locations>li { margin-bottom: 20px;}
#locations ul li { padding:5px 10px; width: 380px}
#locations ul li:hover, #locations ul li.open { background-color: #f5f5f5;}
#locations>li>strong { padding-left: 30px;}
#locations>li>ul {padding-left: 20px;}
#locations>li>strong { display: block; min-height: 35px; padding-top: 5px; background:url('../img/ui/icons.png') 0 -2px no-repeat; color: #8EC8D9; font-size: 2.2em; font-weight: normal; font-family: 'NunitoRegular', Arial, Helvetica, sans-serif;}
#locations>#sales-and-service-points>strong { background-position: 0 -232px; color: #F2AA75;}
#locations>#service-points>strong { background-position: 0 -462px; color: #FF766A; }
#main, #sales-and-service-points, #service-points {}
#locations ul li span.title { width: 100%; display: block; font-size: 1.2em; margin-bottom: 0;}
#locations ul li.open span.title { margin-bottom: .5em;}
#locations ul li span.title span { float: right; width: 100px; text-align: right;}
#locations ul li span.title a { text-decoration: none; color: #0099FF; border-bottom: 1px solid #0099FF;}
#locations ul li span.title a:hover {color: #f00; border-bottom-color:#f00;}
#locations>li>ul p {margin-bottom:0;}

/* CONTACT */
.address, #enquiry { float: left; width: 400px; }
#map { float: right; width: 450px; }


/*-------------------------------------------------------------------*/
/* FOOTER */
/*-------------------------------------------------------------------*/

#footer { background: url('../img/ui/curve.png') no-repeat 20px 0; overflow: hidden; padding: 35px 20px 0 20px; width: 900px;  }
#footer p.tagline { color: #666; font-family: 'NunitoRegular', Arial, Helvetica, sans-serif; font-size: 18px; margin-bottom: 35px; text-align: center; }
/* additional css for 50th anniversary logo */
#footer { background: url('../img/ui/curve.png') no-repeat 20px 100px; }
#footer p.tagline { background: url('../img/ui/fassi-50-anniversary.png') no-repeat top center; text-indent: -5000px; padding-top: 100px; }
/* / */
#footer ul { overflow: hidden; margin-bottom: 40px; }
#footer li { font-size: 15px; font-weight: bold; float: left; margin-left: 20px; }
#footer li:first-child { margin-left: 0; }
#footer p.copyright { color: #666; float: left; }
#footer p.smallprint { color: #666; font-size: 11px; font-family: Tahoma, Arial, Helvetica, sans-serif; float: right; }
#footer p a { color: #666; }
#footer p a:hover { color: #f00; }

/* COOKIE NOTIFICATION */
#cookieNotification { background: #fff; }
#cookieNotification .container,
#cookieNotification .container-mm { padding-bottom: 10px; padding-top: 10px; position: relative; }
#cookieNotification .message,
#cookieNotification .close { font-size: 12px; line-height: 16px; }
#cookieNotification .message { color: #333; padding-right: 70px; }
#cookieNotification .close { color: #c00; cursor: pointer; left: auto; position: absolute; right: 15px; }