@CHARSET "UTF-8";

/*
 * Page layout
 *
 *   - Centered vertically-stretched 936px wide column
 *     - Left-aligned 200px wide column
 *     - Right-aligned rest column
 */

html,
body {
    /* stretch viewport to accomodate full-length main column */
    height              : 100%;
}

body {
	/* always show scrollbar to prevent horizontal 'jumping' on overflow */
	overflow			: -moz-scrollbars-vertical;
	
    /* full-width top gradient */
    background-image    : url(../images/top-gradient.png);
    background-repeat   : repeat-x;
}

#container {
    /* full-length main column */
    width               : 936px;
	height              : expression( document.documentElement.offsetHeight ) !ie;
    min-height          : 100%;
    margin              : auto;
    
    /* full-length left gradient, hides part of top gradient */
	background-color	: white;
    background-image    : url(../images/left-gradient.png);
    background-repeat   : repeat-y;
    background-position : 32px 0;
}

#root {
    /* offset top gradient */
    padding-top         : 78px;
    
    /* top gradient to fix left gradient overlapping body top gradient */
    background-image    : url(../images/top-gradient.png);
    background-repeat   : repeat-x;
}



/*
 * Left column
 *   - TransIP logo
 *   - Menu
 *   - Cart
 */

.left {
    width               : 200px;
	
	/* act as offsetParent for child nodes */
    position            : relative;
	
	/* position on left side */
    float               : left;
}

/* white left/right-separator through top gradient */
.left-top {
    height              : 78px;
    border-right        : 1px solid white;
	
    position            : absolute;
    top                 : -78px;
    right               : 0;
}

/* TransIP logo */
.left-webpakketten img {
    position            : absolute;
    left                : 32px;
}

/* Menu */
.left-menu ul {
    margin              : 0;
    padding             : 0;
	
    text-align          : right;
	
    list-style-type     : none;
}

.left-menu ul li {
	padding-bottom		: 1px;
	
    background-image    : url(../images/left-menu.png);
    background-repeat   : repeat-y;
	
	font-size			: 11px;
}

* html .left-menu ul li {
	/* needed for ie6, breaks ie7 (iirc) */
	height				: 32px !ie;
}

.left-menu ul li.first-child {
    padding-top         : 102px;
}

.left-menu ul a.active {
	font-weight			: bold;
}

.left-menu ul li a,
.left-menu ul li a:hover {
    text-decoration     : none;
}

.left-menu ul li a {
    display             : block;
	
    padding-right       : 16px;
	
    background-image    : url(../images/left-gradient.png);
    background-repeat   : repeat-y;
    background-position : right;
	
    line-height         : 32px;
	
    color               : #4C4C4C;
	
	zoom				: 1 !ie;
}

.left-menu ul li a:hover,
.left-menu ul li a.active {
    border-right        : 4px solid #0072A8;
    padding-right       : 12px;
	
	background-image	: url(../images/left-gradient-active.png);
}

.left-menu ul ul {
	margin-top			: 1px;
}

.left-menu ul ul li {
	height				: auto;
	
	padding-top			: 1px;
	padding-bottom		: 0;
	
	background-image	: url(../images/left-menu-sub-background.png);
	background-repeat	: repeat-y;
	
	font-size			: 10px;
	font-weight			: normal;
}

.left-menu ul ul li.first-child {
	padding-top			: 0;
}

.left-menu ul ul li a {
	background-image	: url(/img/base/left-menu-sub.png);
	
	line-height			: 18px;
}

.left-menu ul ul li a:hover {
	background-image	: url(/img/base/left-menu-sub-active.png);
}

/* Cart */
.left-cart,
.left-cart:hover {
	color				: #4C4C4C;
	
	text-align			: right;
	text-decoration		: none;
	
	zoom				: 1 !ie;
	cursor				: hand !ie;

	font-size			: 1.2em;
	font-weight			: bold;
}

.cartWrapper {
	background-image	: url(/img/fff/icons/cart_32.png);
	background-repeat	: no-repeat;
	background-position	: 50px 2px;

	width				: 140px;
	display				: block;
	float				: right;
	margin-top			: 32px;
	padding				: 10px;
	padding-left		: 50px;
	text-align			: right;
}

/*
 * Right column
 *   - Domain check
 *   - Content
 */

.right {
    margin-left         : 200px;
	padding-bottom		: 2em;
    padding-left        : 24px;
	padding-right		: 64px;
}

.right .domain-check {
    margin-top          : 14px;

    position            : absolute;
    top                 : 0;
}