/**
 * webstekker.nl 
 *
 * Must be used within a #left container to keep (legacy) styles defined
 * elsewhere intact.
 * Legacy note: #left should be named after function instead of structure.
 *
 * @colors
 *            | red        | dark gray
 * ------------------------------------
 * Pantone    | 1665       | 
 * RGB 8-bits | 255 100 20 | 
 * RGB hex    | ff6414     | 5d636b
 * @author miesjel@rhdl.nl
 */

/* /style.css overrides */

#page {
	width: 1250px;
}

#left {
	width: 960px;
	background-color: white;
	font-family: arial, helvetica, sans-serif;
	font-size: 120%; /* reset, size set in external common stylesheet */
/*	line-height: 180%;*/
	line-height: 1.5;
	margin: 0;
	width: 910px;
	padding: 25px;
}
#left, #left table {
	color: #666;
}

#left.standalone {
	font-size: 80%; /* revert size again :S */
	line-height: 130%;
}


/* Generics */

#left a {
	color: #444;
	text-decoration: underline;
}
#left a.pointer {
	background: transparent url(/img/pointer_right_mini.gif) no-repeat right .2em;
	padding-right: 10px;
}

#left h1 {
	font-size: 200%;
	margin-bottom: 10px;
}
#left h1, #left h1 a {
	color: #ff6414;
	text-decoration: none;
}
#left h2 {
	font-size: 160%;
	margin-bottom: 10px;
}
#left h2, #left h2 a {
	color: #ff6414;
	text-decoration: none;
}
#left h3 {
	font-size: 140%;
	margin-bottom: 10px;
}
#left h3, #left h3 a {
	color: #ff6414;
	text-decoration: none;
}
#left h4 {
	font-size: 110%;
	margin: 0;
}
#left h4, #left h4 a {
	color: black;
	text-decoration: none;
}
#left h4.alt {
	color: #ff6414;
}
#left h2.top, #left h3.top, #left h4.top {
	margin-top: 0;
}

#left p {
	margin-top: 0;
}

#left img {
	border: none;
}

#left table {
	border-collapse: collapse;
	empty-cells: show;
	font-size: 100%;
}
/* override /style.css :S */
#left td {
	font-size: 100%;
/*	line-height: 180%;*/
	line-height: 1.5;
	vertical-align: top;
}
#left caption {
	text-align: left;
	font-weight: bold;
}
#left th, #left td {
	padding: .3em .5em;
}

dfn {
	font-style: normal;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
}

.small {
	font-size: 90%;
}
.strike {
	text-decoration: line-through;
}
.alert {
	color: #ff6414;
}
.message {
	background-color: #ffffb2;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.clear {
	clear: both;
}
.hidden {
	visibility: hidden;
}
.clear.hidden {
	overflow: hidden;
	width: 0;
	height: 0;
}
.inline {
	display: inline;
}
.inset-right {
	float: right;
}
.inset-left {
	float: left;
}
.js-required {
/*	display: none;*/
}

#left ul, #left ol {
	margin-top: 0;
	margin-left: 0;
	padding-left: 1em; /* gecko */
}
#left ol {
	margin-left: .5em;
}
#left ul {
	margin-top: 0;
}
#left li {
	padding-top: .3em;
	padding-bottom: .3em;
	border-bottom: 1px solid #e5e5e5;
}
#left ul, #left li ul {
	list-style-type: square;
}
#left li.first {
	padding-top: 0;
}
#left li li.last {
	border-bottom: none;
}

#left dt {
	font-weight: bold;
}
#left dd {
	border-bottom: 1px solid #e5e5e5;
}


#left .with-tools {
	position: relative;
}
#left .with-tools .tools {
	position: absolute;
	right: 0px;
	bottom: 0px;
	font-size: 100%;
}

#left ul.summary, #left ul.tweets {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#left ul.summary li {
	padding-left: 0;
}
#left ul.summary .date {
	color: gray;
	font-size: 11px;
}

#left input.button {
	color: white;
	background-color: #F42941;
	border-width: 2px;
	border-color: #ef9da7 #700b16 #700b16 #ef9da7;
	font-weight: bold;
}
#left input.textfield, #left select, #left textarea {
	color: #666;
	background-color: white;
	border: 1px solid #fe640c;
	font-family: arial, helvetica, sans-serif;
	font-size: 100%;
}
#left form label.name {
	font-weight: bold;
	display: block;
}
#left form .row {
	margin-bottom: .3em;
}
#left .buttons {
	text-align: right;
}
#left fieldset {
	border: 1px solid #f3f3f4;
	background-color: #f3f3f4;
}
#left form .row {
	margin-top: 1em;
}
#left input.textfield.alert {
	background-color: #ffffb2;
}
#left table.overview td.alert {
	color: #666;
	background-color: #ffffb2;
}

/* Layout */

#left .column {
	float: left;
	margin-right: 25px;
}
#left .column.span1 {
	width: 209px;
}
#left .column.span1.last {
	width: 208px;
}
#left .column.span2 { /* IE and multiple classes */
	width: 442px;
}
#left .column.span3 {
	width: 677px;
}
#left .column.last {
	margin-right: 0;
}

/* Specifics */

/*#nav {
	height: 96px;
	background: url(../img/nav_bg_x.gif) repeat-x left bottom;
}
#nav td {
	font-size: 10px;
}*/

#content {
	padding: 25px;
}
#sidebar {
	background: #e7e7e8 url(../img/sidebar_bg.gif) no-repeat left top;
	padding: 15px;
	padding-top: 5px;
	width: 178px;
}
#left #sidebar.column.span1.last {
	width: 181px;
}
#left .links {
	width: 100%;
	text-align: center;
}
#left .links a {
	margin-right: 3em;
}

/* #lead-in forced to be used outside #left,
existing JS-nav positioning issues if within #left) */
#lead-in {
	position: relative;
	padding: 15px;
	height: 73px;
	overflow: hidden; /* ie<7 */
	background: transparent url(../img/lead_in_4col_bg.png) no-repeat left top;
	/* reset exising styles (again...) */
	font-family: arial, helvetica, sans-serif;
	font-size: 120%;
	line-height: 180%;
}
#lead-in, #lead-in a {
	color: #bbbcc0;
}
#left .column.span3 #lead-in {
	background-image: url(../img/lead_in_3col_bg.jpg);
	background-color: #3a424c;
	height: auto;
}
#lead-in #head {
	padding: 10px;
	padding-top: 5px;
}
#lead-in #head ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#lead-in p {
	font-size: 110%;
	margin-bottom: 0;
}
#lead-in p.column {
	margin-top: 0;
	float: left;
	margin-right: 25px;
}
#lead-in h3, #lead-in h4 {
	color: white;
	margin-top: 0;
	margin-bottom: .4em;
}
#lead-in h3 {
	font-size: 230%;
}
#lead-in h3 a, #lead-in h4 a {
	color: white;
	text-decoration: none;
}
#lead-in h4 {
	font-weight: normal;
	font-size: 190%;
}
#lead-in ul#groups {
	list-style-type: none;
	margin: 0;
	padding: 0;
	height: 90px; /* ie, force height for floating children */
	font-size: 80%;
}
#lead-in ul#groups li {
	float: left;
	margin-right: 15px;
	border-bottom: none;
	width: 205px;
}
#lead-in ul#groups li.last {
	margin-right: 0;
}
#lead-in ul#groups h3 {
	margin-top: 0;
	margin-bottom: .1em;
}
#lead-in ul#groups h4 {
	margin-top: 0;
}
#lead-in .button {
	float: right;
}
#lead-in .price {
	float: left;
	width: 90px;
	line-height: 120%;
	padding-top: .7em;
	padding-left: 10px;
}
#lead-in .campaign.price {
	padding-top: 0;
	margin-top: -8px;
}
#lead-in .price .amount {
	font-size: 130%;
	font-weight: bold;
}
#lead-in #contact {
	text-align: right;
	position: absolute;
	z-index: 1000;
	right: 25px;
	top: 20px;
	font-size: 110%;
	line-height: 140%;
}
#lead-in #contact, #lead-in #contact a {
	color: white;
}
#lead-in #promo {
	position: absolute;
	right: 25px;
	top: 98px;
}
#lead-in #promo.alt {
	top: 64px;
}
#lead-in #promo img {
	border: none;
}

#subnav {
	position: relative;
	background: transparent url(../img/subnav_bg_x.gif) repeat-x left top;
	width: 100%;
	margin-bottom: 25px;
}
#subnav, #subnav a {
	color: #5d636b;
	font-size: 102%;
}
#subnav a {
	text-decoration: none;
}
#subnav ul {
	list-style-type: none;
	height: 39px;
	overflow: hidden; /* ie<7 */
	margin: 0;
	padding: 0;
	border-left: 1px solid #dfe0e3;
	border-right: 1px solid #dfe0e3;
}
#subnav ul a:hover, #subnav .selected a {
	color: #ff6414;
}
#subnav li, #subnav div {
	float: left;
	height: 39px;
	border: none;
	background: transparent url(../img/subnav_sep.gif) no-repeat right top;
	padding: 8px;
}
#subnav .highlighted a {
	font-weight: bold;
}
#subnav .subnav-last { /* ie<7 with multiple classes :S */
	background: none;
}
#subnav .selected {
	background-color: white;
}
#subnav .selected.subnav-last {
	border-right: 1px solid #d1d4d6;
}
#subnav .highlighted {
	font-weight: bold;
}
#left .column.span3 #subnav {
	width: auto;
}
#subnav div {
	position: absolute;
	right: 1px;
	top: 0px;
	background-position: left top;
}
#subnav div a.shopping-cart {
	padding-left: 25px;
	background: transparent url(/img/subnav_shopping_cart.gif) no-repeat 0px 0px;
}
#subnav div.selected a.shopping-cart {
	background-image: url(/img/subnav_shopping_cart_selected.gif);
}
#subnav-secondary {
	position: absolute;
	right: 0px;
	top: 0px;
}


#intro {
	margin-bottom: 2em;
}
#intro #product-nav {
	float: left;
	width: 190px;
	margin: 0;
	padding: 0;
	margin-right: 25px;
	list-style-type: none;
	text-align: right;
}
#intro #product-nav a {
	text-decoration: none;
	color: #ff6414;
	font-weight: bold;
}
#intro #desc {
	float: left;
	margin-right: 25px;
	padding-top: .3em;
	width: 430px;
	color: black;
}
#intro #visual {
	float: left;
}

#left .paged-nav {
	margin-top: 1em;
	clear: both;
	height: 2em; /* ie */
	overflow: hidden;
}
#left .paged-nav a {
	color: #ff6414;
	text-decoration: none;
}
#left .paged-nav a.prev {
	background: transparent url(../img/prev_button.gif) no-repeat left .2em;
	padding-left: 23px;
	float: left;
}
#left .paged-nav a.next {
	background: transparent url(../img/next_button.gif) no-repeat right .2em;
	padding-right: 23px;
	float: right;
}

#left .column.span3 div.inset-right {
	width: 340px;
	margin-left: 15px;
}
#left .column.span3 .inset-right img {
	margin-right: 15px;
}

#sidebar h4 {
	color: #ff6414;
	margin-top: 0;
}
ul#sidebar {
	list-style-type: none;
}
ul#sidebar li {
	border-bottom: 1px solid #c7c8ca;
	padding-bottom: 10px;
	padding-top: 8px;
}

#left table.overview {
	width: 100%;
	color: #666;
}
#left table.overview .promo {
	font-size: 150%;
	color: #ff6414;
}
#left table.overview .price {
	text-align: right;
	font-weight: bold;
}
#left table.overview .tld {
	color: #ff6414;
	font-size: 120%;
}
#left table.overview th {
	text-align: left;
	padding: 0;
	vertical-align: bottom;
}
#left table.overview th.right {
	text-align: right;
}
#left table.overview th.center {
	text-align: center;
}
#left table.overview h3, #left table.overview h3 a {
	color: #ff6414;
	text-decoration: none;
	margin-top: 0;
	margin-bottom: .3em;
}
#left table.overview td {
	background-color: #e3e3e5;
	padding: 10px;
	border-bottom: 1px solid white;
	font-size: 100%;
	vertical-align: top;
}
#left table.overview th {
	padding: 10px;
}
#left table.overview td.with-splash img {
	float: right;
}
#left table.overview .odd td {
	background-color: #dcdcde;
}
#left table.overview .label {
	color: black;
	background-color: #fff;
	text-align: right;
/*	vertical-align: middle;*/
}
#left table.overview .label .light {
	color: #666;
}
#left table.overview .odd .label {
	background-color: #ebebec;
}
#left table.overview table .odd td {
	background-color: #dadadc;
}
#left table.overview .highlight td {
	background-color: #cfcfd1;
}
#left table.overview table .odd.highlight td {
	background-color: #d1d1d3;
}

/* Can be placed outside #left container */
#left table.columnar, #left table.overview.columnar {
	width: auto;
	clear: both;
}
#left table.columnar td {
	border-left: 25px solid #fff;
	width: 208px;
}
#left table.columnar td td {
	border-left: none;
}
#left table.columnar th {
	vertical-align: top;
	overflow: hidden;
	width: 208px;
/*	padding-left: 125px;*/
	padding-left: 10px;
}
#left table.overview td .inset-left {
	margin-right: 10px;
}
#left table.overview td img {
	vertical-align: middle;
}
#left table.columnar .label {
	padding-right: 0;
	border-left: none;
	font-size: 105%;
	width: 195px;
}
#left table.columnar tr.group-heading {
}
#left table.columnar tr.group-heading td {
	background-color: white;
	border-left: none;	
}
#left table.overview.panel {
	border: 2px solid #ff6414;
}
#left table.overview.panel th {
	color: white;
	background-color: #ff6414;
	padding: .4em;
	text-align: center;
}
#left table.columnar th.highlighted {
	background: #e3e3e5 url(/img/overview/border_top.gif) repeat-x left top;
	border-left: 12px solid white;
	border-right: 12px solid white;
	padding-left: 8px;
}
#left table.columnar td.highlighted {
	background-color: #d3d4d7;
}
#left table.columnar td.buttons {
	text-align: left;
}
#left table.overview .buttons td, #left table.overview .buttons {
	padding: 0;
}

#left table.options.overview {
	width: auto;
}
#left table.options .label {
	width: 200px;
	text-align: left;
}

#left table.headers {
	margin-top: 2em;
}
#left table.headers th, #left table.headers td, #left table.headers .label {
	background-color: white;
}
#left table.headers td {
	border-bottom: 1px dotted #666;
}
#left table.headers td td {
	border-bottom: none;
}

#left .intro .inset-right {
	width: 30%;
	margin-left: 25px;
	margin-bottom: 25px;
}
#left .intro .inset-right img {
	margin-right: 15px;
	float: left;
	vertical-align: middle;
}

#left form.order {
	width: 635px;
}
#left form.order table.overview {
	width: 100%; /* ie */
}
#left form.order table.overview td.check {
	width: 15px;
}
#left form.order table.overview td.price {
	width: 50px;
}
#left form.order table.overview td.setup {
	font-weight: normal;
}
#left form.order table.overview td.desc {
	width: 320px;
}
#left form.order .textfield, #left form.order select {
	width: 100%;
}
#left form.order .label {
	width: 100px;
}
#left form.order th.label {
	background-color: transparent;
}
#left form.order h4 {
	margin-top: 1em;
	color: #ff6414;
}
#left form.order h4.top {
	margin-top: 0;
}
#left form.order table table {
	color: #666;
	width: 100%;
}
#left form.order table table td {
	padding: .2em;
	padding-left: 0;
	vertical-align: middle;
}
#left form.order .overview th {
	font-weight: normal;
}

#domain-check {
	margin-bottom: 1em;
}
#domain-check h4 {
	float: left;
	margin-right: 12px;
	margin-top: 3px;
}
#domain-check.multi h4 {
	float: none;
}
#domain-check input {
	vertical-align: middle;
	margin-top: -9px;
}
#domain-check.multi input {
	margin-top: 0;
}
#domain-check #commit {
	margin-right: -10px;
}
#domain-check.multi #commit {
	margin-right: 0;
	margin-right: -5px;
}
#left #domain-check .hint {
	float: left;
}
#left #domain-check .textfield, #left #domain-check textarea {
	border: 1px solid #e3e3e5;
	background-color: #e3e3e5;
	padding: .4em;
}
#left #domain-check .textfield {
	height: 27px;
}
#left #domain-check textarea {
	height: 100px;
	overflow: hidden;
	line-height: 14px; /* ie + autogrow */
}
#left .column.span2 #domain-check .textfield {
	width: 195px;
	height: 18px;	
}
#left .column.span3 #domain-check .textfield {
	width: 430px;
	height: 18px;
}

/* sIFR 
.sIFR-hasFlash #lead-in h3,
.sIFR-hasFlash #lead-in h3 {
	font-size: 36px;
	margin: 0;
	margin-top: -10px;
	margin-bottom: -3px;
	line-height: 43px;
}
.sIFR-hasFlash #lead-in h4,
.sIFR-hasFlash #lead-in h4 {
	font-size: 30px;
	margin: 0;
	margin-bottom: 10px;
	line-height: 35px;
}
.sIFR-hasFlash #left h1, .sIFR-hasFlash #left h3 {
	line-height: 28px;
	margin-bottom: 10px;
}
.sIFR-hasFlash #left th h3 {
	margin-bottom: -2px;
}
.sIFR-hasFlash #left h4 {
	font-size: 10px;
	width: 100%;
	margin-bottom: 4px;
	line-height: 18px;
}
.sIFR-hasFlash #sidebar h4 {
	margin-bottom: 0;
}
.sIFR-hasFlash .column.span2 #domain-check h4 {
	width: 110px;
}
*/