/*
## layout.css - Contains style for page layout
*/

/* Normalizes margin and padding */
* { 
  margin: 0px;
  padding: 0px;
}

/* Normalizes article content elements */
#content .article p,
#content dl.fileObject,
#content .article h1,
#content .article h2,
#content .article h3,
#content .article h4,
#content .article h5,
#content .image-box,
#content ol,
#content ul,
#content .flashContent,
#content .mediaPlayer,
#content .user-table,
#content .bordered-user-table,
#content .outlined-user-table,
#content .outlined-horizontal-user-table,
#content .horizontal-user-table,
#content .outlined-vertical-user-table,
#content .vertical-user-table,
#content .user-box,
#content form {
  margin-bottom: 5px;
}

img, fieldset {
  border: 0px;
}

a {
  text-decoration: underline;
  color: blue;
  display: block;
  line-height: 130%;
}

a:hover {
  text-decoration: none;
}

#content .article a,
#breadcrumbs a {
  display: inline;
  line-height: 100%;
}

ul, ol {
  padding-left: 20px;
}

/** 75% sets medium size to 12px in standard browsers **/
body {
  font: 0.75em Arial, Verdana, sans-serif;
}

h1, h2, h3, h4, h5 {
  font-weight: normal;
  margin-bottom: 5px;
}

h1 a, h2 a, h3 a, h4 a, h5 a {
  color: #000;
  display: inline;
  line-height: 100%;
  text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
  text-decoration: underline;
}

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 120%; }
h4 { font-size: 115%; }
h5 { font-size: 110%; }

#content .article h2,
h2.sectionTitle {
  color: #345078;
  font-size: 117%;
  margin-bottom: 10px;
  border-bottom: 1px solid #ededed;
}

img {
  display: block;
}

/********************
## Framework style ##
********************/
#wrapper {
  margin: 0px auto;
  width: 960px;
  background: #fff;
  margin-top: 3px;
}

#header {
  margin: 0px auto;
  width: 960px;
}

#breadcrumbs {
  color: #000;
  padding: 10px;
  padding-left: 0px;
}

#breadcrumbs a.active {
  color: #000;
  font-weight: bold;
}

#leftColumn {
  float: left;
  width: 180px;
  padding: 20px 0px;
}

#rightColumn {
  float: right;
  width: 180px;
  padding: 20px 0px;
}

#rightColumn .summary {
  padding-bottom: 20px;
}

#rightColumn a.readmore {
  text-decoration: underline;
}

#rightColumn h4 a {
  color: #000;
  font-weight: bold;
}

#mainColumnFront {
  float: left;
  width: 760px;
  padding: 20px 0px;
}

#mainColumn {
  float: right;
  width: 760px;
  padding: 20px 0px;
}

#content .article {
  text-align: justify;
}

/***************
## IDIUM LOGO ##
***************/

#idium {
  text-align: center;
  padding: 15px 0px 5px 15px;
  margin: 0px auto;
  width: 960px;
}

#idium div.idium {
  margin: 0px auto;
  width: 140px;
}

#idium a {
  font-family: 'Century Gothic', verdana, geneva, arial, helvetica, sans-serif;
  font-size: 9px;
  color: #898989;
  text-decoration: none;
  text-transform: uppercase;
}

#idium a:hover {
  font-family: 'Century Gothic', verdana, geneva, arial, helvetica, sans-serif;
  font-size: 9px;
  color: #898989;
  text-decoration: none;
  text-transform: uppercase;
}

#idium span {
  font-family: 'Century Gothic', Verdana, Arial, helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #323232;
  word-spacing: 3px;
  text-transform: lowercase;
  padding-left: 5px;
  line-height: 24px;
}

#idium img {
  border: 0px;
  width: 25px;
  height: 25px;
  float: left;
}

/***********
## FOOTER ##
***********/

#footer {
  background: #345078;
}

.footerContent {
  margin: 0px auto;
  width: 960px;
  color: #fff;
  padding: 10px;
}

.footerContent a {
  color: #fff;
  text-decoration: none;
}

.footerContent a:hover {
  text-decoration: underline;
}

.footerContent .user-box {
  float: left;
  margin-right: 50px;
  line-height: 120%;
}

/******************
## COMMON STYLES ##
******************/
h4.boxTitle {
  color: #fff;
  background: #a1a1a1;
  padding: 5px 20px;
  margin-bottom: 0;
}

div.box {
  border-bottom: 1px solid #f0f0f0;
}

div.box .content {
  padding: 15px 10px;
}

select#suppliers {
  width: 180px;
}

/*************************
## SUMMARY|ARTICLE LIST ##
*************************/

#content .summary img {
  float: right;
  padding: 0px 0px 5px 5px;
}

#content .summary p {
  margin-bottom: 5px;
}

#content .summary a.readmore {
  text-decoration: underline;
}

#content .summary h1,
#content .summary h2 {
  border-bottom: 0px;
  color: #000;
}

#content .summary h1 a,
#content .summary h2 a {
  color: #000;
}

#content .summary.odd {
  float: left;
  width: 360px;
}

#content .summary.even {
  float: right;
  width: 360px;
}

#content .summary,
#content .article {
  padding: 0px 0px 30px 0px;
}

#content .article {
  clear:both;
}

#content .article .text,
#content .detailed .text {
  font-size: 120%;
  color: #333;
  margin-bottom: 10px;
}

/*************
## CLEARFIX ##
*************/
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1px;
}
.clearfix {
  display: block;
 }
/* End hide from IE-mac */


#navContainer {
  background: #e5e6e6;
  border-bottom: 3px solid #345078;
  padding-top: 5px;
}

#navBar {
  margin: 0px auto;
  width: 960px;
}

#language {
  text-align: right;
  padding-bottom: 10px;
}

#language a {
  background: url(../GFX/flag-english.gif) no-repeat center right;
  padding-right: 25px;
  display: inline;
}

#articleImage,
#articleProductImage {
  float: right;
  padding: 0px 0px 20px 20px;
}

#articleProductImage {
  background: #ededed;
  padding: 5px;
  margin: 0px 0px 20px 20px;
}

.clearline {
    float: left;
    width: 100%;
    font-size: 0%;
}

/* FRONT PAGE */

#sectionContainer {
  background: #f8f8f8;
  padding: 10px;
  margin: 20px 0px;
}

.sectionBox {
  float: left;
  margin-right: 20px;
  width: 170px;
  background: #ededed;
}

.sectionBox h2 {
  position: relative;
  font-size: 135%;
}

.sectionBox h2 a {
  color: #fff;
  display: block;
  padding: 5px;
  height: 45px;
}

.sectionBox .sectionText {
  position: relative;
}

.sectionBox .sectionText a {
  color: #fff;
  display: block;
  padding: 0px 5px 5px 5px;
  height: 48px;
  text-decoration: none;
}

.sectionBox .sectionText .hoverText {
 visibility: hidden;
}

.sectionBox a:hover {
  text-decoration: none;
}

.sectionBox.last {
  margin-right: 0px;
}

.sectionBoxImage {
  height: 113px;
  position: relative;
}

.sectionBox a {
  display: block;
}

.opacityFilter { 
  color: #FFFFFF;
  line-height: 30px;
  width: 170px;
  height: 55px;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #000;
  filter:alpha(opacity=60);
  -moz-opacity:.60;
  opacity:.60;
}

.opacityHoverFilter { 
  visibility: hidden;
  color: #FFFFFF;
  line-height: 30px;
  width: 170px;
  height: 58px;
  position: absolute;
  left: 0px;
  top: 55px;
  background: #000;
  filter:alpha(opacity=60);
  -moz-opacity:.60;
  opacity:.60;
}

.sectionLinks {
  padding: 5px;
  min-height: 103px;
}

*html .sectionLinks {
  height: 103px;
}

.sectionLinks a {
  padding: 3px 0px;
  text-decoration: underline;
}

#productCategoryPreview {
  padding-bottom: 30px;
}

.subGroup {
  float: left;
  width: 175px;
  margin-right: 20px;
  margin-bottom: 30px;
}

hr {
  clear: both;
  border: 0px;
  color: #fff;
}

.special {
    margin: 0px;
}

#links {
  margin-top: 50px;
}

#links a {
  display: block;
  line-height: 150%;
}

/***************************
## Related articles style ##
***************************/

.relations {
  margin-bottom: 30px;
}

.relatedProduct a {
  display: inline;
  padding-right: 20px;
}

#content .relations .standard a,
#content .article .relations .standard a {
  display: block;
  float: left;
  width: 45%;
  line-height: 150%;
  text-decoration: underline;
}

.relations a:hover {
  text-decoration: none;
}

.relations a:visited {
  color: purple;
}

.relations h2 a {
  display: block;
  float: none;
  width: 99%;
  margin-right: 0px;
  line-height: 100%;
  text-decoration: none;
}

.relations h2 a:visited {
  color: #000;
}

.relations h2 a:hover {
  text-decoration: underline;
}

.relatedProduct {
  padding: 5px;
  width: 100%;
}

#content .relations .oddProduct {
  background: #ededed;
}

.relations .subGroup {
  margin-top: 10px;
  margin-bottom: 20px;
}

.submit {
  float: right;
  padding-top: 0px;
}