/* 

CSS by Vodafone Online Services Unit

This version is for INTERNAL use, for DEMO purposes only


*/

html { 
/* Forcing a vertical scrollbar */
	margin-bottom:1px;
	min-height:100%
}

/*TYPO*/

body
{
	background:#fff url(../img/global-bg.gif);
	color:#666;
/* A decent, dynamic typosetting: CHANGE THE OVERALL FONT-SIZE HERE, FOR SIFR, SEE: ../sifr/formatting.css */	
	font:70%/1.5 verdana, arial, helvetica, sans-serif;
	margin:0;
	padding:0
}

a,a:link,a:visited,a:active
{
	background:transparent url(../img/global-dotted-line.gif) repeat-x left bottom;
	color:#666;
	padding-bottom:2px;
	text-decoration:none
}

a:hover
{
	color:#00aa00
}

form
{
	margin:0
}

h1,h2,h3,h4,h5,h6,#content-splash ul li,#sidebar .sidebar-item div,.menu dd,ul.feature-ahref-listing
{
	margin:0;
	padding:0
}

img
{
	border:0
}

#header .inputbox {
	border: 1px solid #666666;
	width: 70px;
	font-size: 10px; 
	margin: 2px 6px 0px 4px
	color: #666666;
}

input,select
{
	font-family:Verdana, Arial, Helvetica, sans-serif
}

li > p
{
	margin-top:0.2em
}

p
{
	font-size:1em;
	line-height:1.8em
}

p ol,p ul,p li
{
	font-size:1em;
	line-height:1.8em;
	margin-bottom:0.1em;
	margin-top:0.2em
}

pre
{
	font-family:monospace;
	font-size:1em
}

strong,b
{
	font-weight:700
}


/*LAYOUT*/


#container
{
	background:#fff url(../img/header-bg.png) no-repeat;
	margin:0 auto;
	padding:0;
	text-align:left;
	width:790px
}

#headertitle
{
	position:absolute;
	top:115px;
	left:346px;
	position:static;
	visibility:visible;
	width:555px;
	heigth=25px
}

#content
{
	display:block;
	position:absolute;
	top:330;
	padding-left:240px;
	padding-top:40px;
	position:static;
	visibility:visible;
	width:555px
}

#content #content-2column-header
{
	height:119px;
	margin:0;
	width:550px
}

#content #content-2column-header h2,#content #content-3column-header h2
{
	left:15px;
	margin:0;
	position:relative;
	top:35px
}

#content .content-3column-block
{
	float:left;
	overflow:hidden;
	padding:0;
	width:176px;
	background:#fff url(../img/DEMO-business-index-column-bg.gif) 0 0 no-repeat;
	height:215px;
	margin-left:10px;
}

#content .content-3column-block h3
{
	background: #fff url(../img/DEMO-business-index-column-header-BG.png) 0 0 no-repeat;
	display:block;
	height:65px;
	margin:0;
	font-size:10px;
	line-height:normal;
	width:176px
}

#content .content-3column-block ul.feature-ahref-listing
{

	margin:5px;
	width:176px
}

#content .content-3column-block ul.feature-ahref-listing li
{	
	width:156px
}

#content .content-3column-block ul.feature-ahref-listing li h5
{	
	color:#999;
	font-size:1em;
	font-weight:400;
	margin:0 0 5px;
	padding:0
}

#content .content-3column-header
{
	height:235px;
	margin:0;
	width:550px
}

#content-splash
{
	padding:15px 2px 10px
}

#content-splash #splash-personal ul li a,#content-splash #splash-business ul li a
{
	margin:1px auto;
	width:300px
}

#content-splash #splash-personal ul li,#content-splash #splash-business ul li
{
	background:transparent url(../img/global-dotted-line.gif) repeat-x left bottom;
	margin:auto;
	width:340px
}

#content-splash ul li a
{
	background:transparent url(../img/global-ahref-arrow.png) no-repeat right 4px;
	color:#666;
	display:block;
	margin:0;
	padding:1px 15px 1px 0;
	width:360px
}

#content-splash ul li a:hover
{
	background:transparent url(../img/global-ahref-arrow-active.png) no-repeat right 4px;
	color:red
}

#content-splash ul li#splash-business
{
	float:right
}

#content-splash ul li#splash-personal h2 a,#content-splash ul li#splash-business h2 a
{
	background:url(../img/splash-head-personal.gif) -340px 0 no-repeat;
	height:100%;
	left:0;
	padding:0;
	position:absolute;
	top:0;
	width:100%
}

#content-splash ul li#splash-business h2 a
{
	background:url(../img/splash-head-business.gif) -340px 0 no-repeat
}

#content-splash ul li#splash-personal h2 a:hover,#content-splash ul li#splash-business h2 a:hover
{
	background-position:0 0
}

#content-splash ul li#splash-personal h2,#content-splash ul li#splash-business h2
{
	height:30px;
	margin:15px auto 0;
	padding:0;
	position:relative;
	width:340px
}

#content-splash ul li#splash-personal,#content-splash ul li#splash-business
{
	background:#fff url(../img/splash-segments-bg.png) top left no-repeat;
	border:0;
	display:block;
	float:left;
	height:220px;
	margin:0;
	padding:0;
	position:static;
	visibility:visible;
	width:380px
}

#content-splash ul,#footer ul
{
	list-style-type:none;
	margin:0;
	padding:0
}

#content-splash-left-ad,#content-splash-right-ad
{
	background:#fff url(../img/DEMO-splash-promo-left.png) top left no-repeat;
	border:0;
	display:block;
	float:left;
	height:220px;
	margin:15px 0 0;
	padding:0;
	position:static;
	visibility:visible;
	width:380px
}

#content-splash-right-ad
{
	background:#fff url(../img/DEMO-splash-promo-right.png) top left no-repeat;
	float:right
}

#footer
{
	background:transparent url(../img/footer-bg.png) no-repeat;
	color:#666;
	font-size:10px;
	height:37px;
	margin:0 auto;
	padding:16px 0 0;
	text-align:center;
	width:790px
}

#footer ul li
{
	background:transparent url(../img/footer-sep.png) top right no-repeat;
	display:inline;
	padding:5px 0
}

#header
{
	height:105px;
	padding:10px 0 0 4px
}

#header #logo
{
	float:left;
	margin:49px 1px 0 0
}

#header #logo h1
{
	height:75px;
	margin:0;
	padding:0;
	position:relative;
	width:233px
}

#header #logo h1 a
{
	background:url(../img/disc/disclogo.PNG) no-repeat;
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%
}

#headertitle 
{
	//background:url(../img/disc/disclogo.PNG) no-repeat;
	<h2>css</h2>
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%
}

#header ul
{
	float:right;
	font-size:10px;
	list-style-type:none;
	margin:0;
	padding:0
}

#header ul li
{
	background:transparent url(../img/header-sep.png) top right no-repeat;
	display:inline;
	padding:5px 0
}

#header ul li a,#footer ul li a, #header ul li form #search
{
	margin:0 6px
}

/*	 NAVLIST FIXME:
		Fontsizes dienen in EM's gedaan te worden, alle background images dienen te worden redesigned zodat 
		de content van de navigatie meestretchen wanneer de user een andere size in webbrowser selecteert*/
#navlist
{
	position:absolute;
	word-wrap:break-word;
	top:210;
	font-size:1em;
	margin:38px 0 0;
	padding:0;
	width:235px
	
}

#navlist h3.navlist-business,#navlist h3.navlist-business-active
{
	float:left;
	height:24px;
	margin:0;
	padding:0;
	position:relative;
	width:235px
}

#navlist h3.navlist-business-active a
{
	background:#fff url(../img/navlist-header.png) 
}

#navlist h3.navlist-personal a,#navlist h3.navlist-personal-active a
{
	background:#fff url(../img/navlist-header.png);
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%
}

#navlist h3.navlist-personal a:hover
{
	/* background:#fff url(../img/navlist-header.png) -414px 0 no-repeat FIXME: no-worky in IE ! */
}

#navlist h3.navlist-personal,#navlist h3.navlist-personal-active
{
	float:left;
	height:4px;
	margin:0 0 0 2px;
	padding:0;
	position:relative;
	width:235px
}



#navlist ul li a
{
	background:transparent url(../img/navlist-ahref-bg.png) no-repeat 0 0;
	color:#666;
	display:block;
	font-size:1em;
	height:16px;
	line-height:15px;
	overflow:hidden;
	padding:2px 9px;
	text-decoration:none
}

#navlist ul li a.active
{
	color:#0000ff
}

#navlist ul li a:selected
{
	background:transparent url(../img/navlist-ahref-bg.png) no-repeat left top;
	color:#0000ff;
	font-weight:700
}


#navlist ul li a:hover
{
	background:transparent url(../img/navlist-ahref-selected-bg.png) no-repeat 0 0;
	color:#00aa00;
	text-decoration:none
}

#navlist ul li ul li a
{
	padding-left:19px
}

#navlist ul li ul li a.selected,#navlist ul li ul li a:hover
{
	background:transparent url(../img/navlist-ahref-selected-bg.png) no-repeat left top
}

#navlist ul li ul li a.selected,#navlist ul li ul li ul li a:hover
{
	background:transparent url(../img/navlist-sub-ahref-bg.png) no-repeat left top
}

#navlist ul li ul li ul li a
{
	background:transparent url(../img/navlist-sub-ahref-selected-bg.png) no-repeat left top;
	padding-left:29px
}

#navlist ul li ul li ul li ul li a
{
	background:transparent url(../img/navlist-sub-sub-ahref-bg.png) no-repeat left top;
	padding-left:39px
}

#navlist ul li ul li ul li ul li a.selected,#navlist ul li ul li ul li ul li a:hover
{
	background:transparent url(../img/navlist-sub-sub-ahref-bg.png) no-repeat left top
}

#navlist ul,navlist ul li
{
	list-style-type:none;
	margin:0;
	padding:0
}

/*--FIXME BELOW--*/
#placeholder
{
	float:left;
	width:362px
}

#sidebar
{
	float:left;
	margin:0 0 0 4px;
	width:182px
}

#sidebar .sidebar-item
{
	background:url(../img/sidebar-bg.png) 0 0 no-repeat;
	margin:0;
	padding:7px
}

#sidebar .sidebar-item p
{
	line-height:normal;
	margin:0;
	padding:0
}

#sidebar .sidebar-item table
{
	font-size:10px;
	line-height:normal;
	margin:0;
	padding:0
}

#sidebar .sidebar-item-promo
{
	height:134px;
	margin:10px 0 0;
	width:182px
}



#textblock
{
	background:#fff url(../img/content-textblock.png) 0 0 no-repeat;
	margin:0;
	padding:0;
	width:362px;
	
}

#textblock-wide
{
	background:#fff url(../img/content-textblock-wide.png) 0 0 no-repeat;
	margin:0;
	padding:0;
	width:550px
}

.feature-ahref-listing li
{
	background:transparent url(../img/global-dotted-line.gif) repeat-x left bottom;
	list-style-type:none;
	padding:2px 0 1px
}

.feature-ahref-listing li a,
.feature-ahref-listing li a:link,
.feature-ahref-listing li a:visited,
.feature-ahref-listing li a:active
{
	background:transparent url(../img/global-ahref-arrow.png) no-repeat right 3px;
	color:#666;
	display:block;
	padding:1px 15px 1px 0
}

.feature-ahref-listing li a:hover
{
	background:transparent url(../img/global-ahref-arrow-active.png) no-repeat right 3px;
	color:red
}

.global-button
{
	font-size:10px;
	line-height:normal;
	margin:0;
	padding:0
}

.global-button a,
.global-button a:link,
.global-button a:active,
.global-button a:visited


{
	background:url(../img/global-button-left.gif) no-repeat left top;
	border:0;
	color:#fff;
	display:block;
	float:none;
	letter-spacing:0;
	padding:2px 7px 4px 10px;
	text-decoration:none
}

.global-button a:hover
{
	color:#fff
}

.global-button span
{
	background:url(../img/global-button-right.gif) no-repeat right top;
	float:left;
	margin:0;
	padding:0 18px 0 0;
	vertical-align:center
}

.grey
{
	color:#999
}

.hide,.menu dt
{
	display:none
}

.menu
{
	clear:both;
	line-height:normal;
	margin:0
}

.menu #menu-active a span
{
	background-position:0 150px;
	border-bottom:1px solid #f9f4ee;
	color:#888
}

.menu .aa
{
	background:url(../img/content-tab-left.gif);
	border-bottom:1px solid #e2e2e2;
	float:left;
	padding:2px 0;
	width:12px
}

.menu .bb
{
	background:url(../img/content-tab-middle.gif);
	border-bottom:1px solid #e2e2e2;
	float:left;
	padding:2px 0;
	text-align:center
}

.menu .cc
{
	background:url(../img/content-tab-right.gif);
	border-bottom:1px solid #e2e2e2;
	float:left;
	padding:2px 0;
	width:12px
}

.menu a,.menu a:visited
{
	color:#888;
	cursor:pointer;
	font-size:1em;
	text-decoration:none
}

.menu a:hover
{
	background:#fff;
	color:#00aa00
}

.menu a:hover span
{
	background-position:0 150px;
	border-bottom:1px solid #f9f4ee
}

.navlist-last
{
	background:#fff url(../img/navlist-bg-bottom.png) no-repeat 0 0;
	height:132px
}



.striped-table { font-size: 0.9em; width:100%; background:#fefefe; border: 1px solid #CCCCCC; margin:10px 0; }

.striped-table thead tr {padding: 0 0.5em; }

.striped-table thead th { font-weight:bold; padding: 1em 0.5em; background:#e8e8e8  url(../img/global-table.gif) repeat-x left top;border-left: 1px solid #e4e4e4; }

.striped-table tbody tr td { padding: 0.2em 0.5em; background:transparent url(../img/global-dotted-line.gif) repeat-x left top; border-left: 1px solid #e4e4e4; }

.striped-table tr.selected { /* FIXME selected row style here*/ }

.odd { background: #fff; }
.even { background: #f0f0f0; }

tbody tr.odd.selected { color: #ddd; }
tbody tr.even.selected { color: #fff; }