﻿/* =======================================================
	AUTHOR: 		Sumac UK
	DESCRIPTION:	Screen styles for Lift
	DATE:			17/04/08
	LAST EDITED:	--/--/--
======================================================= */
.hide
{
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute; /* for the benefit of IE5 Mac */	
}
body
{
	background: #182f5b url(../images/body-bg-blue.jpg) repeat-x left top;
	/*background: #000 url(../images/body-bg.jpg) repeat-x left top;*/
	text-align: center;
}
#pageview
{
	background-position: 0px 30px;	
}
/* ==========================================================
	JUMP-TO
========================================================== */
#jump-to
{
	position: absolute;
	top: 0;
	left: -9999px;
}
#jump-to a:hover
{
	background-color: #008eaf;	
	color: #FFF;
	border: solid 2px #FFF;
}
#jump-to a:focus
{
	display: block; 
	position: absolute; 
	top: 20px; 
	left: 10020px; 
	font-size: 1.5em; 
	background-color: #FFF; 
	border: solid 2px #008eaf;
	color: #008eaf;
	padding: 10px; 
	width: 15em; 
	z-index: 1;
}
/* =======================================================
	KISS
======================================================= */
#kiss
{
	width: 946px;
	overflow: auto;
	position: relative;
	margin: 0 auto;
	/*background: #443b41 url(../images/kiss-bg.jpg) repeat-x left top;*/
	text-align: left;
}
/* =======================================================
	HEADER
======================================================= */
#header
{
	width:945px;
	background: transparent url(../images/header-bg-blue.jpg) no-repeat 28px top;
	height: 153px;
	position: relative;
	margin: 0;
}
#header #logo
{
	position: absolute;
	top: 30px;
	left: 386px;
}
#header #kiss-confidential
{
	position: absolute;
	top: 12px;
	left: 29px;
	font-size: 170%;
	width: 250px;
	margin: 0;
	color: #FFF;
}
#header #by-line
{
	position: absolute;
	top: 1.9em;
	left: 29px;
	font-size: 150%;
	width: 130px;
	margin: 0;
	color: #FFF;
}
#header ul
{
	margin: 0;
	padding: 0;
	position: absolute;
	top: 5px;
	right:11px;
	float: left;
	width: 100px;
}
#header li
{
	list-style: none;	
	margin: 0 0 4px 0;
	padding: 0;
	line-height: 0px;
	float: left;
}
#header li a
{
	line-height: 0px;
	float: left;
	height: 23px;
	width: 100px;
}
#header li a img
{
	float: left;
	margin: 0;	
}
#manage-articles
{
	position: absolute; 
	padding: 0.4em; 
	 
	color: #FFF; 
	font-weight: bold; 
	bottom: 0px; 
	left: 10px; 
	border: 2px solid #FFF;	
}
#manage-articles:link, #manage-articles:visited
{
	text-decoration: none;
	background-color: #2970A6;
}
#manage-articles:hover
{
	text-decoration: none;
	background-color: #666;
}
/* =======================================================
	SEARCH
======================================================= */
#search
{
	background-color: Aqua;
	position: absolute;
	top: 113px;
	right: 11px;
	border: 1px solid #FFF;
	background-color: #7b7b7b;
}
#search fieldset
{
	float: left;
	display: inline;
	margin: 0;
}
#search legend, #search label
{
	display: none;	
}
#search fieldset input
{
	width: 212px;
	border: 1px solid #CCC;
	margin: 4px;
	padding: 0.2em 0.2em;
}
#search input.button
{
	margin: 0.4em 5px 0 0;	
}
/* =======================================================
	MAIN-NAVIGATION
======================================================= */
#main-navigation
{
	margin: 12px 0 0 0;	
	width: 100%;
	overflow: hidden;
}
#main-navigation ul
{
	margin: 0;
	padding: 0;
	font-size: 100%;
}
#main-navigation li
{
	margin: 0;
	list-style: none;
	float: left;
}
#main-navigation a
{
	display: block;
	text-decoration: none;
	height: 30px;
	background-repeat: no-repeat;
	margin: 0 1px 0 0;
	width:133px;
}

#nav-digital a { margin: 0px; width:142px; }
#nav-home a:link, #nav-home a:visited {  background-image: url(../images/nav-home.gif);}
#nav-news a:link, #nav-news a:visited {  background-image: url(../images/nav-news.gif);}
#nav-insight a:link, #nav-insight a:visited {  background-image: url(../images/nav-insight.gif);}
#nav-audience a:link, #nav-audience a:visited {  background-image: url(../images/nav-audience.gif);}
#nav-tell a:link, #nav-tell a:visited {  background-image: url(../images/nav-tell.gif);}
#nav-history a:link, #nav-history a:visited {  background-image: url(../images/nav-history.gif); }
#nav-digital a:link, #nav-digital a:visited {  background-image: url(../images/nav-digital.gif); }
/* Off */
#nav-home a:link, #nav-home a:visited { background-position: left -31px; }
#nav-news a:link, #nav-news a:visited { background-position: left -31px; }
#nav-insight a:link, #nav-insight a:visited { background-position: left -31px; }
#nav-audience a:link, #nav-audience a:visited { background-position: left -31px; }
#nav-tell a:link, #nav-tell a:visited { background-position: left -31px; }
#nav-history a:link, #nav-history a:visited { background-position: left -31px; }
#nav-digital a:link, #nav-digital a:visited { background-position: left -31px; }
/* On / current */
#nav-home a:hover, #nav-home a.current:link, #nav-home a.current:visited { background-position: left top; }
#nav-news a:hover, #nav-news a.current:link, #nav-news a.current:visited { background-position: left top;}
#nav-insight a:hover, #nav-insight a.current:link, #nav-insight a.current:visited { background-position: left top;}
#nav-audience a:hover, #nav-audience a.current:link, #nav-audience a.current:visited {background-position: left top; }
#nav-tell a:hover, #nav-tell a.current:link, #nav-tell a.current:visited { background-position: left top;}
#nav-history a:hover, #nav-history a.current:link, #nav-history a.current:visited {background-position: left top; }
#nav-digital a:hover, #nav-digital a.current:link, #nav-digital a.current:visited {background-position: left top; }
/* =======================================================
	BODY
======================================================= */
#body
{
	float: left;
	display: inline;
}
/* =======================================================
	CONTENT AREAS
======================================================= */
#content
{
	background-color: #f6f6f6;
	float: left;
	padding: 0 5px 4px 10px;
}
#home-content
{
	float: left;
	width:100%;
	padding: 0 0 4px 0;
	background: transparent url(../images/footer-bg.gif) no-repeat left bottom;
}
#content div.inner
{
	overflow: auto;
	clear: both;
	float: left;
	width: 930px;
	padding: 15px 0 5px 0;
}
#home-content div.inner
{
	overflow: auto;
	clear: both;
	float: left;
	width:100%;
	padding: 15px 0 5px 0;
	background-color: #f6f6f6;
}
/* =======================================================
	EXTRAS
======================================================= */
#extras
{
	float: right;
	width: 296px;
	margin: 0 2px 0 0;
}
/* =======================================================
	ARTICLE
======================================================= */
#article
{
	width: 626px;
	float: left;
	overflow: hidden;
}
#article #gallery-image, 
#article #flash-video,
#article #youtube,
#article div.image
{
	float: left;
	width: 	360px;
	min-height: 286px;
	overflow: hidden;
	background-color: #EEE;
	margin-right: 10px;
	margin-bottom: 10px;
}
#article div.content-thumbnails 
{
	float: right;
	margin: 0 0 10px 0;
	width: 256px;
	clear: right;
	overflow: hidden;
}
#article h2
{
	margin-bottom: 5px;
}
#article h2 span.date
{
	font-weight: normal;
	text-transform: none;	
}
#article p
{
	margin-right: 10px;
}
p.more
{
	text-align: right;
}
/* =======================================================
	PANEL
======================================================= */
div.panel
{
	background: #FFF url(../images/panel-bg.gif) repeat-y left top;
	margin: 0 0 12px 0;
}
div.panel-one
{
	background: transparent url(../images/panel-one-bg.gif) repeat-y right top;
}
div.panel-two
{
	background: transparent url(../images/panel-two-bg.gif) no-repeat left bottom;	
}
div.panel-three
{
	background: transparent url(../images/panel-three-bg.gif) no-repeat right bottom;	
	padding: 0 0 5px 0;
	width: 100%;
	overflow: auto;
}
div.panel-heading
{
	background: transparent url(../images/panel-heading-bg.gif) no-repeat left top;	
}
div.panel-heading-wrap
{
	background: transparent url(../images/panel-heading-wrap-bg.gif) no-repeat right top;	
	min-height: 32px;
}
div.panel-heading h3
{
	margin: 0;	
	padding: 0.4em 0 0 18px;
	font-size: 123.1%;
	text-transform: uppercase;
}
div.panel div.more
{
	text-align: right;
	padding: 0 10px 8px 0;	
}
div.panel div.image
{
	margin: 0 3px;
	width: 290px;
	height: 100px;
	overflow: hidden;
}
div.panel div.video
{
	margin: 0 3px;
	width: 290px;
	overflow: hidden;
}
div.panel div.video p
{
	margin: 2em 10px 1em 10px;	
}
/* =======================================================
	ARTICLE PANELS
======================================================= */
#article div.panel
{
	float: left;
	width: 626px;
}
div.article-list
{
	padding: 0 0 1em 0;	
	float: left;
	width: 100%;
	display: inline;
}
div.article-list div.item
{
	float: left;
	width: 270px;
	padding: 10px 17px 0 18px;
	display: inline;
}
div.article-list div.item h4
{
	background: transparent url(../images/bullet-arrow.gif) no-repeat left 1px;
	padding: 0 0 0 13px;
	text-transform: uppercase;
	margin:0;	
	font-weight: bold;
}
div.article-list div.item h4 a:link, div.article-list div.item h4 a:visited
{
	text-decoration: none;	
}
div.article-list div.item h4 a:hover
{
	text-decoration: underline;	
}
#article div.article-list div.item div.content
{
	padding: 0 0 0 13px;
	margin:0;	
}
#article div.article-list div.item div.content p
{
	margin-top: 0.2em;	
}
p.author
{
	text-transform: uppercase;
}
/* =======================================================
	ARTICLE TOOLS
======================================================= */
#article-tools
{
	clear: both;
	width: 100%;
	overflow: auto;	
}
#article-tools a.print
{
	float: right;
	background: transparent url(../images/print.gif) no-repeat left center;
	margin: 0.6em 70px 0 0;	
	padding: 1em 0 1em 30px;
}
#network-links
{
	margin: 1em 0 0 15px;
	float: left;
	display: inline;
	width: 475px;
	padding: 0 0 20px 0;
}
#network-links a
{
	float: left;
	background: transparent url(../images/bullet-arrow.gif) no-repeat left 1px;
	padding: 0 0 0 13px;
	width: 100px;
	display: inline;
	margin: 0 0 10px 0;
}
#article-tools a
{
	
}
#article-tools a:link, #article-tools a:visited
{
	text-decoration: none;	
}
#article-tools a:hover
{
	text-decoration: underline;
}
/* =======================================================
	FEATURE
======================================================= */
#feature
{
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	display: inline;
}
#feature #article
{
	width: 640px;
}
#feature #article h1
{
	float: right;
	width: 270px;
	display: inline;
	font-size: 175%;
	margin-top: 0px;
	margin-bottom: 0.3em;
	margin-top: -0.2em;
}
#feature #article h2
{
	width: 100%;
}
#feature #article p
{
	margin-right: 0px;	
}
#feature div.content
{
	float: right;
	width: 260px;
	display: inline;
	margin-right: 10px;
}
#feature #article div.image
{
	background-color: Transparent;
	min-height: 0px;	
}
#feature div.more
{
	text-align: right;	
}
#feature div.latest-articles
{
	width: 266px;
	float: right;
	display: inline;
	background: #FFF url(../images/latest-articles-bg.gif) repeat-y left top;
}
#feature div.latest-articles div.panel-one
{
	background: transparent url(../images/latest-articles-panel-one-bg.gif) repeat-y right top;
}
#feature div.latest-articles div.panel-two
{
	background: transparent url(../images/latest-articles-panel-two-bg.gif) no-repeat left bottom;	
}
#feature div.latest-articles div.panel-three
{
	background: transparent url(../images/latest-articles-panel-three-bg.gif) no-repeat right bottom;	
	padding: 0 0 6px 0;
	width: 100%;
	overflow: auto;
}
#feature div.latest-articles h3
{
	text-transform: uppercase;	
}
#feature div.latest-articles div.article,
#feature div.latest-articles div.article-odd
{
	
}
#feature div.latest-articles div.article div.wrap
{
	background-color: #f6f6f6;	
}
#feature div.latest-articles div.wrap
{
	margin: 0 4px;
	padding: 0.5em 4px 1px 4px;
}
#feature div.latest-articles div.first
{
	background: transparent url(../images/latest-articles-first-bg.gif) no-repeat left top;	
}
#feature div.latest-articles div.first div.wrap
{
	padding-top: 0.8em;
}
#feature div.latest-articles a:link, #feature div.latest-articles a:visited
{
	text-decoration: none;	
	color: #2970A6;
}
#feature div.latest-articles a:hover
{
	text-decoration: underline;
	color: #000;
}
/* =======================================================
	EQUAL COLUMNS
======================================================= */
div.equal-col {
	width: 455px;
	float:left;
	margin-top: 10px;
	display:inline;
	margin-bottom: 50px;
	background: url(../images/equal-col-mid.gif) 0 0 repeat-y;
}
div.equal-col h2 {
	padding: 10px 23px 0;
	background: url(../images/equal-col-top.gif) 0 0 no-repeat;
}
div.equal-col .wrap {
	padding: 0 23px;
	background: url(../images/equal-col-bottom.gif) 0 bottom no-repeat;
	overflow:hidden;
}
div.equal-col p {
	margin-top: 0;
	font-size:1em;
	color: #002b5c;	
}
div.equal-col object,			
div.equal-col embed,		
div.equal-col img {
	margin-bottom: 1em;
}
div.equal-col.first {
	margin-right: 15px;	
}
div.large h1 {
	font-size:175%;
}
div.block-link { 
	text-align: right;
	clear:left;
}
div.block-link a { 
	outline: none;
}
/* =======================================================
	HOME EXTRAS
======================================================= */
#home-extras
{
	background: transparent url(../images/home-extras-bg.gif) no-repeat left top;
	float: left;
	width:945px;
	margin-top: 10px;
	padding-top: 4px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	display: inline;
}
#home-extras div.inner
{
	overflow: auto;
	clear: both;
	background-color: #f6f6f6;
	float: left;
	width:100%;
	padding: 0 0 10px 0;
	display: inline;
}
#home-extras div.panel
{
	width: 296px;
	float: left;
	margin: 10px 0px 0px 12px;
	display: inline;
}
#home-extras div.panel-three
{
	min-height: 360px;
}
#audience div.panel-three
{
	min-height: 340px;
}
/* =======================================================
	CATEGORY
======================================================= */
div.category div.description,
div.category div.summary
{
	margin: 0.8em 15px 0.8em 20px;
}
ul.sub-categories
{
	margin: 1em 0 0 18px;
	padding: 0 0 0.8em 0;
	float: left;
	display: inline;
}
ul.sub-categories li
{
	display: inline;
}
ul.sub-categories li a
{
	display: inline;
	float: left;
	background: transparent url(../images/bullet-arrow.gif) no-repeat left 1px;
	padding: 0 0 0 13px;
	width: 100px;
	margin: 0 0 1em 0;
}
ul.sub-categories li a.odd
{
	margin-right: 15px;
}
ul.sub-categories li a.last
{
	width: 50px;
}
ul.sub-categories li a:link, ul.sub-categories li a:visited
{
	text-decoration: none;	
}
ul.sub-categories li a:hover
{
	text-decoration: underline;
}
/* =======================================================
	FOOTER
======================================================= */
#footer
{
	margin: 0 0 0 0;
	clear: both;
	background: transparent url(../images/footer-bg.gif) no-repeat left top;
	height:50px;
	width:945px;
}
#footer #logo {
	float:right;
	margin-top:1em;	
}
#footer p
{
	display: inline;
	margin: 0 0 0 10px;
	line-height: 108%;
	color: #2970A6;
	float:left;
	margin: 2em 0;
}
#footer ul.hygiene-nav
{
	display: inline;
	margin: 2em 0 2em 5px;
	line-height: 108%;
	float:left;
}
#footer ul.hygiene-nav li
{
	display: inline;
	margin-right: 3px;
}
#footer ul.hygiene-nav li a
{
	border-left: 1px solid #2970A6;
	padding-left: 5px;	
}
#footer a:link, #footer a:visited
{
	text-decoration: none;
	color: #2970A6;
}
#footer a:hover
{
	text-decoration: underline;
	color: #FFF;
}
/* =======================================================
	MANAGE CATEGORY
======================================================= */
div.manage-article-category
{
	float: left;
	width: 300px;
	margin: 0 10px 10px 0;
}
div.manage-article-category h3
{
	background-color: #666;
	color: #FFF;
	padding: 0.4em;
	margin-bottom: 0.7em;
}
div.manage-article-category ul
{
	margin: 0 0 1em 0;
}
div.manage-article-category ul li
{
	list-style: none;
	margin: 0 0 0.5em 0;
}
div.manage-article-category div.edit-item
{
	display: inline;
}
/* =======================================================
	AUDIENCE-LATEST
======================================================= */
#audience h1
{
	margin-bottom: 0px;	
}
#audience div.category
{
	width: 296px;
	float: left;
	display: inline;
	margin: 15px 13px 0 0;	
}
#audience-latest
{
	float: left;
	display: inline;
	width: 605px;
	margin: 0 0 13px 0;	
}
#audience-latest div.first
{
	margin-right: 19px;	
	margin-left: 3px;
}
#audience-latest div.panel-three
{
	overflow: hidden;	
}
#audience-latest div.article
{
	float: left;
	width: 290px;
	display: inline;	
}
#audience-latest div.description,
#audience-latest div.summary
{
	margin: 0 15px 0.8em 20px;
	clear: both;
}
#audience-latest div.image
{
	margin: 0 0 0.8em 0;	
	width: 100%;
	text-align: center;
	min-height: 1px;
	background-color: transparent;
}
#audience-articles div.article
{
	margin: 1em 10px 1.8em 20px;	
}
#audience-articles div.article h4
{
	margin: 0;	
	text-transform: uppercase;
}
#audience-articles div.article h4 a
{
	background:	transparent url(../images/bullet-arrow.gif) no-repeat left center;
	padding: 0 0 0 15px
}
#audience-articles div.article h4 a:link,
#audience-articles div.article h4 a:visited
{
	text-decoration: none;
}
#audience-articles div.article h4 a:hover
{
	text-decoration: underline;
}
#audience-articles div.article h4+p
{
	margin-top: 0.5em;	
}
/* ==========================================================
	GALLERY
========================================================== */
#thumbnails 
{
	overflow: hidden;
	width: 100%;	
	margin: 0;
	padding: 0;
}
#thumbnails li
{
	float: left;
	margin-right: 1px;	
	margin-bottom: 1px;
	list-style: none;
}
#thumbnails li a
{
	float: left;
}
#thumbnails li a img
{
	float: left;
	
}
#thumbnails li a:link img, #thumbnails li a:visited img
{
	border: 1px solid #FFF;
}
#thumbnails li a:hover img, 
#thumbnails li a.current img,
#thumbnails li a.current:link img,
#thumbnails li a.current:visited img,
#thumbnails li a.current:hover img
{
	border: 1px solid #2970A6;
}
#image-navigation
{
	width: 215px;
	overflow: hidden;
}
#image-navigation #next-image
{
	width: 50%;	
	text-align: right;
	float: left;
}

#image-navigation #previous-image
{
	width: 50%;	
	text-align: left;	
	float: left;
}
#image-navigation a.disabled,
#image-navigation a.disabled:link,
#image-navigation a.disabled:visited,
#image-navigation a.disabled:hover
{
	cursor: default;
	color: #999;
	font-weight: normal;
	text-decoration: none;	
}
/* ==========================================================
	FORM
========================================================== */
#contact
{
	margin: 0 0 0 140px;
	width: 505px;	
}
#divForm fieldset
{
	margin: 1em 0 0 0;	
}
#divForm legend
{
	display: none;
}
#divForm #required-notice
{
	display: none;	
}
div.textbox,
div.textarea,
div.select,
div.radio-buttons,
div.checkbox
{
	margin: 0.5em 0;
	float: left;
	width: 100%;
	clear: both;
}
div.textbox label,
div.textarea label,
div.select label,
div.radio-buttons span.label
{
	width: 210px;
	float: left;
	text-align: right;
	margin-right: 10px;	
	padding: 0.2em 0 0 0;
}
div.textbox input,
div.textarea textarea
{
	width: 185px;	
}
div.radio-buttons ul
{
	margin: 0 0 0 220px;
}
div.radio-buttons ul li
{
	list-style: none;
	margin: 0 0 0.7em 0;	
}
div.radio-buttons label
{
	margin: 0 0 0 5px;	
}
div.radio-buttons input
{
	margin: 0;
	padding: 0;
	float: left;	
}
div.checkbox input
{
	margin: 0 0 0 220px;	
	float: left;
}
div.checkbox label
{
	float: left;
	margin: 0 0 0 5px;	
	width: 265px;
}
#contact div.buttons
{
	margin: 1em 0 0 220px;	
}
input.button
{
	background-color: #7d7d7d;
	color: #FFF;
	font-weight: bold;
	border-width: 0px;
	padding: 0.2em 0.3em;	
}
/* errors */
#contact div.error 
{
	margin: 0 0 1em 0;
	border: 2px solid #2970A6;
	background-color: #fae8e8;
	padding: 10px;
}
#contact div.error h2
{
	color: #2970A6;	
	margin: 0 0 0.5em 0;
}
#contact div.error a
{
	color: #2970A6;	
	font-weight: bold;
}
#contact div.error ul
{
	list-style-type: decimal;
	padding: 0;	
	list-style-position: inside;
}
#contact div.element-error
{
	background-color: #EEE;
	padding: 10px;	
	border: 2px solid #666;
}
#contact div.element-error label
{
	font-weight: bold;
}
#contact div.element-error label em
{
	color: #2970A6;
}
/* ==========================================================
	SITEMAP
========================================================== */
#sitemap ul
{
	margin: 0 0 2em 20px;
}
#sitemap li
{
	list-style: none;
	margin: 0 0 0.5em 0;	
}
#sitemap li a
{
	display: block;
	background: transparent url(../images/sitemap_bullet.gif) no-repeat left 0.1em;
	padding: 0.2em 0 0.2em 20px;	
}
#sitemap li li a
{
	background: transparent url(../images/sitemap_sub_bullet.gif) no-repeat left 0.1em;
	padding-left: 40px;	
}
#sitemap ul ul
{
	margin: 0.5em 0 0 2px;
}
#sitemap a:link, #sitemap a:visited
{
	text-decoration: none;
}
#sitemap a:hover
{
	text-decoration: underline;
	color: #2970A6;
}
/* ========================================================== 
	COMMENTS
========================================================== */
#comments
{
	margin: 0 18px;	
	padding: 0 0 10px 0;
}
div.comment
{
	border-bottom: 1px solid #EEE;	
}
div.comment span.author
{
	font-weight: bold;	
	text-transform: uppercase;
}
#comments fieldset
{
	border: 1px solid #EEE;
	padding: 10px;	
}
#comments fieldset legend
{
	font-size: 85%;	
	font-weight: bold;
}
#comments fieldset div
{
	margin: 0 0 5px 0;	
}
#comments fieldset label
{
	float: left;
	width: 150px;	
}
#comments fieldset input
{
	width: 300px;	
}
#comments fieldset textarea
{
	width: 300px;
	height: 100px;
}	
#comments fieldset p.prompt
{
	margin-left: 150px;	
}
#toggle-comments 
{
	text-align: right;	
	margin: 1em 0 0 0;
}
#toggle-comments a
{
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: left center;
	padding: 0 0 0 15px;
}
#toggle-comments a:link, #toggle-comments a:visited
{
	
}
#comments a.show-comments
{
	background-image: url(../images/arrow-down.gif);
}
#comments a.hide-comments
{
	background-image: url(../images/arrow-up.gif);
}
/*  Image align */
.image-right
{
	float: right;
	margin: 0 0 10px 10px;	
}
.image-left
{
	float: left;
	margin: 0 10px 10px 0;	
}
div.category-description
{
	margin: 0.3em 0 1em 0;
	font-weight: bold;
	font-size: 116%;	
	color: #7b7b7b;
}
