/* ==========================================
   STYLESHEET FOR MAIL.BE
   Main styles (screen). All rights reserved.
   ========================================== */


/* TABLE OF CONTENTS:

   Common files:
   - base.css (basic styles for HTML elements, can be used both for screen
     and for print styles).

   This file (global.css, for screen media):
   1. Header and top navigation
   2. Top content (container and shared styles)
   3. Middle content (container and shared styles)
   4. Footer
   5. Other shared styles

   Other screen stylesheets:
   - home.css (home page)
   - product.css (product description)
   - plans.css (available plans)
*/


/* --- HEADER AND TOP NAVIGATION --- */

/* Main container */
#top {
	min-height: 375px;
	padding: 0 10px;
	background: url(../images/main-bg-in.png) no-repeat center bottom;
}
* html .ISIE67 #top {
	height: 375px;
}
#header {
	position: relative;
	width: 970px;
	height: 52px;
	margin: 0 auto;
	padding: 25px 0 0 0;
}

/* Logo */
#name {
	position: absolute;
	top: 11px;
	left: -21px;
	width: 245px;
	height: 60px;
	margin: 0;
	font-size: 36px;
	font-weight: bold;
}
#name a {
	display: block;
	padding: 10px 20px 5px 0;
	text-decoration: none;
}
#name img {
	vertical-align: middle;
}

/* Language links */
#languages {
	float: right;
	width: 190px;
	margin: 0 0 0 11px;
	padding: 10px 0;
	list-style: none;
	text-align: right;
	font-size: .9em;
	color: #555;
}
#languages li {
	display: inline;
	margin-left: 4px;
}
#languages a {
	padding: 2px 1px;
	color: #555;
	text-decoration: underline;
}
#languages .current a {
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

/* Navigation */
#topnav {
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
}
#topnav li {
	float: left;
	margin: 4px 4px 0 0;
}
#topnav a {
	display: block;
	float: left;
	height: 25px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
	background: #f2f2f2 url(../images/topnav-item-bg.png) no-repeat left bottom;
	cursor: pointer;
}
#topnav span {
	position: relative;
	right: -1px;
	display: block;
	float: left;
	height: 15px;
	padding: 5px 11px 5px 10px;
	background: url(../images/topnav-item-bg.png) no-repeat right bottom;
}
* html .ISIE67 #topnav a, * html .ISIE67 #topnav span {
	float: left; /* IE6 bug: display:block forces the floating parent to take
	100% of the container width. Overriding with float works, but is
	cumbersome and might create other problems. */
}
#topnav .current a,
#topnav a:hover, #topnav a:focus, #topnav a:active {
	color: white;
	background-color: #595959;
	background-position: left top;
}
#topnav .current a span,
#topnav a:hover span, #topnav a:focus span, #topnav a:active span {
	background-position: right top;
}


/* --- TOP CONTENT (container and shared styles) --- */

/* Container */
#topcontent {
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding: 10px 0;
}


/* --- MIDDLE CONTENT (container and shared styles) --- */

/* Container */
#middle {
	display: table;
	width: 960px;
	/*overflow: hidden;*/
	margin: 0 auto;
	padding: 0;
}

/* Standard left column */
#midcontent {
	float: left;
	width: 758px;
}

/* Right column (who are we) */
#midend {
	float: right;
	width: 152px;
	padding: 1px 0 16px 0;
}
#midend .part {
	padding: 30px 0 0 0;
}

#midend .part p{
	font-size: 0.9em;
}

#midend h1 {
	margin: 0 0 30px 0;
	color: #A3A3A3;
	background: url(../images/sep-grey-horz.png) repeat-x right .6em;
}
#midend h1 span {
	padding-right: 5px;
	background: white;
}
#midend h3 {
	margin: 26px 0 5px 0;
}
#midend p {
	margin: 5px 0;
	line-height: 1.3;
}
/* Compact variation */
#midend.compact {}
#midend.compact .part {
	padding-top: 24px;
}
#midend.compact h2 {
	margin-bottom: 14px;
}
#midend.compact h3 {
	margin-top: 12px;
}
/* Home variation */
#home #midend .part {
	padding-top: 47px;
}
#home #midend .first-part {
	padding-top: 40px;
}
#home #midend h2 {
	margin-bottom: 3px;
}

/* --- FOOTER --- */

/* Container */
#bottom {
	padding: 0 10px;
	background: url(../images/main-bg-in.png) no-repeat center 10px;
}
#footer {
	position: relative;
	width: 840px;
	overflow: hidden;
	margin: 0 auto;
	padding: 70px 120px 40px 0;
	color: #555;
}
#bottomdeco {
	position: absolute;
	right: 50px;
	top: 73px;
	width: 93px;
	height: 17px;
	background: url(../images/main-sprites.png) -298px -19px;
}

/* Address */
#addr1 {
	margin: 0;
	line-height: 1.35;
}
#addr1 br {
	display: none;
}
#addr1 strong {
	display: block;
	margin-bottom: 1px;
	color: #444;
}
#addr1 span {
	display: block;
}
#addr2 p {
	margin: 2px 0 4px 0;
	line-height: 1;
}
.ISIE67 #addr2 p {
	margin: 0 0 1px 0;
}
#addr2 strong {
	display: inline-block;
	width: 25px;
	padding: 0 5px 0 0;
	border-right: 1px solid #CCC;
	text-align: left;
	font-weight: normal;
	color: #333;
}
#addr2 span {
	padding: 0 0 0 5px;
	color: #777;
}

/* Navigation */
#bottomnav {
	margin: 0;
	list-style: none;
	line-height: 1.4;
}
#bottomnav li {
	float: left;
	margin: 0 6px 0 0;
	padding: 3px 0 3px 10px;
	background: url(../images/symbol-bullet1.png) no-repeat left center;
}
#bottomnav li.newline {
	clear: left;
}
#bottomnav a {
	padding: 2px 4px;
}
#bottomnav li.main a {
	font-size: 1.1em;
	color: #555;
}
#bottomnav li.normal a {
	font-size: 1em;
	color: #777;
}
#bottomnav li.current a {
	font-weight: bold;
	color: #222;
}
#bottomnav li.linestart, #bottomnav li.linestart a {
	margin-left: 0;
	padding-left: 0;
	background: none;
}


/* --- OTHER SHARED STYLES --- */

/* Clearing away floats */
.clearleft {clear: left;}
.clearright {clear: right;}
.clearboth {clear: both;}
i.clear {
	display: block;
	height: 0;
	overflow: hidden;
	line-height: 0;
}

/* Small columns */
.scol {
	float: left;
	width: 152px;
	padding: 0 0 0 40px;
}
.scol-double {
	width: 354px;
}
.scol-first {
	padding-left: 0;
}

/* Big title */
#bigtitle {
	margin: -1px 0 22px 0;
	text-align: center;
}
#bigtitle h1 {
	margin: 0;
	font-size: 2.2em;
	/*font-weight: normal;*/
	color: black;
}
#bigtitle p {
	margin: -4px 0 0 0;
	font-size: 1.65em;
}

/* Big green button */
a.big-button {
	display: block;
	width: 280px;
	height: 70px;
	text-align: center;
	line-height: 1.1;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0 1px 2px gray;
	color: white;
	background: url(../images/button-green-bg.png) no-repeat;
}
a.big-button span {
	display: block;
	padding: 26px 12px 0 12px;
	font-size: 1.4em;
}

/* Illustrations */
.illus-large {
	display: block;
	padding: 10px;
	border: 5px solid #EEE;
	background: white;
}