/*
 * 
 * File:main.css
 * Author:IQuality
 * Author URI:http://www.iquality.nl
 *
 * Description:Default styling for modules and other elements in this project.
 *
 */

/*
*
* Coding conventions
*
*   - No space between attribute/properties
*   - Indent parents/children using tabs
*   - place selectors, opening and closing brackets and
*     property-value pairs on their own, separate lines
*   - order the properties alphabetically
*   - use shorthand for border, padding, margin and background where possible
*   - use rgb(a) colors where possible for easy rgba-implementations
*   - avoid use of !important
*
*/
/* basic struct elements
---------------------------------------*/
html, body{
    height: 100%;
    margin-bottom: 1px; 
}

body {
      background: url("../../Images/HendrixGenetics/bg_body.gif")top left repeat-x;
      font: normal 12px/16px Arial, Helvetica, sans-serif;
}

#container {
    position: relative;
    width: 100%;
}

.block-link{
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    
    text-indent: -9999em;  
}

/* Syntax font
---------------------------------------*/
@font-face {
    font-family: 'SyntaxLTStdBold';
    src: url('../../Include/f/syntaxltstd-bold.eot');
    src: url('../../Include/f/syntaxltstd-bold.eot') format('embedded-opentype'),
         url('../../Include/f/syntaxltstd-bold.woff') format('woff'),
         url('../../Include/f/syntaxltstd-bold.ttf') format('truetype'),
         url('../../Include/f/syntaxltstd-bold.svg#SyntaxLTStdBold') format('svg');
}

/* page
---------------------------------------*/
#page-shadow {
    background-image: none;    
}

#entire-page {
    background-color: #FFF;
}

/* site header
---------------------------------------*/
.header {background-color: #FFFFFF;}        
.branding { background-color: #FFF; }

.branding .container{
	height: 112px;
}

.branding .logo {
  	display: block;
  	width: 183px;
  	height: 66px;
  	/*float: left;*/ 
  	margin-top: 22px;
  	position: relative;
  	z-index: 1000;
}

.branding .logo > img {
    display: block;
  	width: auto;
    max-height: 100%;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
    margin: 0;
}

body {
  background-color: #f2f2f2;
  color: gray; 
  margin: 0;
}

/*-------------------------------------------------------------------
main
-------------------------------------------------------------------*/
.body {
  background-color: #FFF;
  margin-bottom: 30px; 

}

.body .container { 
	-webkit-box-shadow: 0px 1px 1px 0px #e1e1e1;
	box-shadow: 0px 1px 1px 0px #e1e1e1;
	position: relative;
}

.main .container { 
	padding-bottom: 30px;
}
/*-------------------------------------------------------------------
Sitemap
-------------------------------------------------------------------*/
.footer {
    background-color: #f2f2f2;
}

.sitemap ul { list-style-type: none; margin: 0; padding: 0;}

.sitemap .title a { 
	margin-bottom: 15px;
	font-size: 14px;
	font-weight: bold; 
	color:#00427a;	
}

.sitemap a { 
    padding:3px 0;
	display: block;
	/*font-size: 0.81em;*/
	text-decoration: none;
	color: #666;	
}

.sitemap a:hover { 
	color: #000;
}

.copyright {
	/*font-size: 0.75em;*/
	font-size: 12px;
}

.copyright ul {
	margin: 0;
	padding:20px 0 30px 0;
    list-style-type:none;
    color:#808080;	
}
	
.copyright li {
	display:inline;
	list-style-position:outside;
	list-style-type:none;
}
	
.copyright li a,
.copyright li a:link,
.copyright li a:visited {
	 color:#808080;
}

.copyright .divider {
	padding: 0 5px;
}

.bottom_shadow { display: none;}

/*.content { font-size: 0.812em;	}*/

/*-------------------------------------------------------------------
Intro
-------------------------------------------------------------------*/
.intro-page-header { 
	padding: 19px 0 0 0;
	margin: 0 0 20px 0;
	/*font-size: 2.5em;*/
	/*font-family: 'SyntaxLTStdBold', Arial;*/
	font-size: 40px;
	text-align: center;
	line-height: 100%;
	color: #00427a;
}
.intro { 
    width: 100% 
}

.intro .content { 
	padding: 0 5.5em 1.875em 5.5em;
	/*font-size: 1.125em;*/
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 1.312em;
	color: #4c7aa2;	
}

/*-------------------------------------------------------------------
Sub header
-------------------------------------------------------------------*/
.page-header { 
	padding: 19px 0 0 0;
	margin: 0 0 20px 0;
	/*font-size: 2.5em;*/
	/*font-family: 'SyntaxLTStdBold', Arial;*/
	font-size: 30px;
	text-align: center;
	line-height: 100%;
	color: #00427a;
	border-top: 1px solid #e0e0e0;
}

/*-------------------------------------------------------------------
Intro-footer
-------------------------------------------------------------------*/
.call-to-action { 
	width: 100%; 
	padding-bottom: 20px;
	border-top: 1px solid #e3e3e3;
	text-align: center;
}

.call-to-action .content {
	padding: 0 5.5em 0em 5.5em;
	margin-bottom: 1.5em;
	/*font-size: 1.125em;*/
	font-size: 18px;
	font-weight: bold;
	color: #00427a;
	line-height: 1.312em;
}

call-to-action__footer {
    text-align: center;
}

/*-------------------------------------------------------------------
Media
-------------------------------------------------------------------*/
.media {
	width: 100%;
	margin-bottom: 20px;
	padding-top: 20px;
	border-top: 1px solid #e3e3e3;
	
	overflow: hidden;
	
	list-style-type: none;
}

.media__content { color: #4c4c4c; }
.media__content .content { 
    /*font-size: 0.81em;*/
    font-size: 12px;
}

.media__header {
    margin-top: 0;
	/*font-size: 1.25em;*/
	font-size: 20px;
	line-height: 27px;
	font-weight: normal;
}

.media__image { 
    margin-bottom: 10px;
}

.media__image--left {
	margin-right: 20px;
	float: left;
}
.media__image--right {
	margin-left: 20px;
	float: right;
}

/*-------------------------------------------------------------------
News-Snippet
-------------------------------------------------------------------*/
.news-snippet {
    width: 100%; 
    margin-bottom: 20px; 
}

.news-snippet .image {
    width: 220px;
    height: 130px;
    overflow: hidden;
    margin-bottom: 10px;
}

.news-snippet:hover .teaser-link {
    color: #bed600;
}

.news-snippet .image img {
    width: 100%;
    height: auto;
}

.news-snippet .entry-meta {
    color: #c2c2c2;
    font-size: 12px;
    height: 18px;
}

.news-snippet .hd {
    font-size: 14px;
    line-height: 18px;
    color: #00427a;
    font-weight: bold;
    margin-top: 0;
}

.news-snippet .description { 
    /*font-size: 0.81em; */
    font-size: 12px;
    color: #4c4c4c;
}
.news-snippet .ft { 
    padding: 10px 0 0 0;  
}
/*-------------------------------------------------------------------
Multi-link-list
-------------------------------------------------------------------*/
.multi-link-snippet {
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #e3e3e3;
}

.multi-link-snippet .header {
    font-size: 18px;
    color: #00427a;
    font-weight: normal;
}

.link-list {
    list-style-type: none;
    margin: 0;
    padding: 0;   
    clear: both;
}

.link-list__item {
   display: block;
   padding: 5px 0;
   border-top: 1px solid #e3e3e3;
}

.link-list__item a,
.link-list__item a:visited {
   text-decoration:none;
   color:#77b800;
   font-size: 12px;
}

.link-list__item a:hover {
    color: #BED600;
}

/*-------------------------------------------------------------------
adverts
-------------------------------------------------------------------*/
.advert-snippet {  
    padding: 2em; 
    border-top: 1px solid #e3e3e3;
    position: relative;
    margin-bottom: 30px;
    text-align: center;
}

/*.advert-snippet a{ 
	display: block;
	text-decoration: none;
}*/

.advert-snippet a:link, .advert-snippet a:visited  {
                display:block;
                text-decoration:none;  
color: #77B800;
                
}


.advert-snippet:hover .teaser-link {  
    color: #bed600;
}

.advert-snippet .hd { 
    /*font-size: 1.25em;*/ 
    font-size: 20px;
    text-align: center;
    line-height: 1.375em;
    color: #00427a;
}

.advert-snippet .description { 
    /*font-size: 0.81em; */
    font-size: 12px;
    text-align: center;
    color: #4c4c4c;
    margin: 0;
    }
.advert-snippet .ft { 
    text-align: center;
    padding: 15px 0 0 0;
}

.advert-snippet__line { 
    display: none;
}

.panel-link {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: white;
    /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  /* IE 5-7 */
  filter: alpha(opacity=0);

  /* Netscape */
  -moz-opacity: 0;

  /* Safari 1.x */
  -khtml-opacity: 0;

  /* Good browsers */
  opacity: 0;
}

/*-------------------------------------------------------------------
body--footer conversion bar
-------------------------------------------------------------------*/
.body--footer .advert-snippet { 
	min-height: 180px;
	padding: 1.25em 1.25em 0 1.25em;
	border-top: 0;
	margin: 0;
}

.body--footer .advert-snippet .hd {
	/*font-size: 1.125em;*/
	font-size: 18px;
	font-weight: normal;
	color: #77b800;
}

.body--footer .advert-snippet .description p {
	margin: 0;
}

.body--footer .advert-snippet__line
{ 
    height: 100%;
    display: block;
    
    border-left: 1px solid #e3e3e3;
    
    position: absolute;
    top: 0;
    left: -0.625em;    
}

.grid__item:first-child .advert-snippet__line {
	display: none;
}

	
/* ==========================================================================
   slideshow
========================================================================== */
.slideshow { 
	width: 1000px;
    /*margin: 0 auto;*/
    position: relative;
    background-color: #000;
}

.cycle {
    padding: 0;
	margin: 0;
	list-style-type: none; 
}

.slideshow__cycle { 
	height: 279px;
	width: 1000px;
	overflow: hidden;
}

.slideshow__cycle .slide { 
    height: 279px;
	width: 1000px;
	padding: 0; 
	margin: 0;
	overflow: hidden;
	position: relative;
}

.slideshow__cycle .slide > a { 
	display: block;
	text-decoration: none;
}

.slideshow__cycle img { 
	display: block;
	width: 100%; 
	height: auto;
	border: 0;
	margin:0;
	padding: 0;
}

.slideshow__overlay {   
	position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 200;
    /*background-color: #00427a; 
    background-color: rgba(34, 70, 145, 0.8);*/
    
    color: #FFF;
    height: 82px;
    font-size: 24px;
    line-height: 26px;
}

.blue-css {
    background: url("/images/HendrixGenetics/bg_overlay.png") top left repeat;
}

.green-css {
    background: url("/images/HendrixGenetics/bg_overlay_green.png") top left repeat;
}

.lightblue-css {
    background: url("/images/HendrixGenetics/bg_overlay_lightblue.png") top left repeat;
}

.red-css {
    background: url("/images/HendrixGenetics/bg_overlay_red.png") top left repeat;
}

.grey-css {
    background: url("/images/HendrixGenetics/bg_overlay_grey.png") top left repeat;
}

.slideshow__overlay .animate { 
    position: absolute;
}

.slideshow__overlay .content {
    display: table;   
    height: 82px;
    overflow: hidden;
    width: 350px;
}

.slideshow__overlay .inner { 
	z-index: 300;	
	display: table-cell;
	vertical-align: middle;
	padding-left: 30px; 	
}

.slideshow__overlay .inner p { 
	margin: 0;
}

/*.slideshow__control{
	width: 30px;
	height: 82px;
	margin-top: -62px;
	display: block;
	
	position: absolute;
	bottom: 33px;
	z-index: 500;
	
	text-indent: -999em;
    
    background: url("../../Images/HendrixGenetics/vert-sprite.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    outline: none;
    display: none;
}

.next{
	right: 30px;
	background-position: 1px -230px;
	
}

.prev{
	right: 60px;
	background-position: 0 -145px;
}

.slideshow__control:focus{
	outline: 0;
    outline-style:none;
    outline-width:0;
}*/

.slideshow__pager {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
	bottom: 33px;
	right: 30px;
	z-index: 500;
}

.slideshow__pager > li {
    display: inline-block;
    zoom:1;
    *display: inline;
    margin-right: 8px;
}

.slideshow__pager a {
    display: block;
    width: 15px;
    height: 15px;
    background: url("../../Images/HendrixGenetics/pager-icon.png");
    background-position: -0 -25px;
    background-repeat: none;
    text-decoration: none;
    text-indent: -999em;
}

.slideshow__pager .activeSlide a {
    background-position: 0 0;
}

/* ==========================================================================
   slideshow__page-editor
========================================================================== */
.slideshow__page-editor { 
	width: 1000px;
	height: auto;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.slideshow__page-editor .slide { 
	width: 1000px;
	height: 279px;
	position: relative;
	margin-left: -16px;
	overflow: hidden;
}

/* ==========================================================================
   Banner
   ========================================================================== */
.banner { 
    max-width: 1000px;
	height: 279px;
	
	position: relative;
}

#banner { margin-top: 0;}

.banner__lead-text {
	width: 100%;
	height: 82px;
	padding: 15px 30px;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url("../js/boxsizing.htc");/*polyfill for ie7*/
	
	position: absolute;
	right: 0;
	bottom: 0; 
	
	/*background-color: rgba(76, 122, 162, 0.8);*/
	background: url("/images/HendrixGenetics/bg_overlay.png") top left repeat;
	
	color: white; 
	
	text-align: right;
}

#banner-image {
    border-right: 0;
    display: block;
}

.lead-line { 
	margin: 0;
	/*font-size: 1.5em;*/
	font-size: 24px;
	color: #FFF;
}

.lead-summary { 
	/*font-size: 0.81em;*/
	font-size: 12px; 
}

.lead-summary > p { 
	margin: 0;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.group:before,
.group:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.group:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.group {
    *zoom: 1;
}

/* Teaser links
------------------------------------------------------------------------------*/

.teaser-link,
.teaser-link:visited { 
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    color: #77b800; 
}

.teaser-link:hover {
    text-decoration: none;
    color: #bed600; /*needed for cascading a:link hendrix.css*/
}

.teaser-link:active {
    position: relative;
    top: 1px;
}

/* Buttons
------------------------------------------------------------------------------*/
.btn {
    border:0;
    padding:0;
    margin:0;
    display:inline-block;
    text-decoration:none;
    padding: 4px 10px 4px;
    display: inline-block;
    line-height: 18px;
    color: #FFF!important;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: #77b800;
    position: relative;
    -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
    -webkit-transition-property: background;
       -moz-transition-property: background;
         -o-transition-property: background;
            transition-property: background;
    -webkit-transition-duration: 0.2s;
       -moz-transition-duration: 0.2s;
         -o-transition-duration: 0.2s;
            transition-duration: 0.2s;
    -webkit-transition-timing-function: linear;
       -moz-transition-timing-function: linear;
         -o-transition-timing-function: linear;
            transition-timing-function: linear;
}

.lt-ie8 .btn { 
    display: inline; 
    zoom: 1; 
    border: 0; 
    line-height: 20px; 
    outline: none; 
}

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  background-color: #bed600;
  text-decoration: none;
}

.btn:first-child {
  *margin-left: 0;
}

.btn:focus {
  /*outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;*/
}

.btn.active,
.btn:active {
  background-color: #bed600;
  background-image: none;
  outline: 0;
}

.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-color: #e6e6e6;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.btn-group { 
    
}

.btn--big {
    padding: 10px;
}

/* Icons
------------------------------------------------------------------------------*/

.icon {
    text-indent: -9999em;
    background-image: url("/Images/HendrixGenetics/vert-sprite.png");
    background-repeat:no-repeat; 
    background-position: top left;
    display: inline-block;
    vertical-align: text-top;
}

.icon-teaser-link {
    background-position: -8px -335px;
	width: 8px;
	height: 9px;
	line-height: 8px;
	margin-left: 5px;
	margin-top: 4px;
}

.icon-arrow-down {
	background-position: -8px -8px;
	width: 10px;
	height: 5px;
	position: absolute;
	right: 8px;
	top: 9px;
	line-height: 5px;
}

.icon-breadcrumb {
    background-position: -9px -385px;
    width: 7px;
    height: 7px;
}

.icon-arrow-submenu {
	background-position: -8px -8px;
	width: 10px;
	height: 5px;
	position: absolute;
	right: 8px;
	top: 9px;
	line-height: 5px;
}


.teaser-link:hover .icon-teaser-link,
.news-snippet:hover .icon-teaser-link,
.advert-snippet:hover .icon-teaser-link{
    background-position: -8px -355px;
}