/* -------------------------------------------------------------- 

  Ess
  www.e-ss.be
	
  1. Structure
  2. Header
  3. Content
  4. Column01
  5. Column02
  6. Column03
  7. Footer
	
  always include reset.css, it will reset your style
  for all browers, it includes the clearfix	
  
  typography specs must be specified in typography.css
  form specs must be specified in forms.css
  
  ID en class naming => use capitals for seperation: navHome
  
/*-------------------------------------------------------------- */


/*------------ imports -----------*/
@import url(typography.css);
@import url(navigation.css);
@import url(forms.css);

/*-------------------------------------------------------------------------------------  1. Structure --------------------------------*/

body#home      {background:url(../img/css_backgrounds/bg-body-home.gif) repeat-x left top;}
body#subpage   {background:url(../img/css_backgrounds/bg-body-subpages.gif) repeat-x left top;}

#container {width:980px; margin:0 auto; position:relative;} 

a#logo {display:block; width:228px; height:120px; background:url(../img/css_backgrounds/bg-logo.png) no-repeat left top; position:absolute; left:11px; top:7px; text-indent:-9999px; cursor:pointer; outline:none}

#column01   { width:570px; float:left; padding:40px 30px 0 0;}
#column02   { width:264px; float:left; padding:40px 0 0 16px; }
#columnWide { width:805px; float:left; padding:40px 0 0 0 }
	


.left    { float: left; }
.right   { float: right; }
.clear   { clear: both; }
.hide, hr, a#skipToContent  { display: none; }
.first, #content .first     { margin-top:0; padding-top:0; }
.last  { margin-bottom:0; padding-bottom:0; }


/*-------------------------------------------------------------------------------------  2. Header -----------------------------------*/

/* homepage header */
#home #header {width:570px; height:200px; background:url(../img/css_backgrounds/bg-header-home.jpg) no-repeat 160px top; padding:43px 0 0 410px; overflow:hidden}

#home a#btn-discover, #home a#btn-test2months {display:block; height:75px; text-indent:-9999px; cursor:pointer; float:left; margin:20px 10px 0 0; outline:none;}
#home a#btn-discover {width:244px; background:url(../img/css_backgrounds/bg-btn-discover.png) no-repeat left top; display:inline}
#home a#btn-discover:hover {background:url(../img/css_backgrounds/bg-btn-discover.png) no-repeat right top;}
#home a#btn-test2months {width:210px; background:url(../img/css_backgrounds/bg-btn-test-2months.png) no-repeat left top; margin-left:67px;}
#home a#btn-test2months:hover {background:url(../img/css_backgrounds/bg-btn-test-2months.png) no-repeat right top;}

#home h1#ttl-home, #home p#ttl-homeIntro {display:block; width:483px; text-indent:-9999px; margin:0 0 6px 0; padding:0;}
#home h1#ttl-home {height:53px; background:url(../img/css_backgrounds/bg-ttl-home.gif) no-repeat left top;}
#home p#ttl-homeIntro {height:41px; background:url(../img/css_backgrounds/bg-ttl-homeIntro.gif) no-repeat left top;}

/* subpages header */
#subpage #header {width:816px; height:45px; padding:28px 0 0 144px; overflow:hidden;}

/* subpages header titles */
#subpage #header h1 {width:660px; height:28px; background:url(../img/css_backgrounds/bg-titles-subpages.gif) no-repeat left top; text-indent:-9999px; margin:0; padding:0}
#subpage #header h1#h1-whatIsAssist {background-position: left top;}
#subpage #header h1#h1-forWho {background-position: left -48px;}
#subpage #header h1#h1-versions {background-position: left -96px;}
#subpage #header h1#h1-test {background-position: left -144px;}
#subpage #header h1#h1-testStart {background-position: left -192px;}
#subpage #header h1#h1-order {background-position: left -240px;}
#subpage #header h1#h1-orderConfirm {background-position: left -288px;}
#subpage #header h1#h1-orderThx {background-position: left -336px;}
#subpage #header h1#h1-faq {background-position: left -384px;}
#subpage #header h1#h1-usersAbout {background-position: left -432px;}
#subpage #header h1#h1-ideas {background-position: left -480px;}
#subpage #header h1#h1-ourStory {background-position: left -528px;}
#subpage #header h1#h1-privacy {background-position: left -576px;}
#subpage #header h1#h1-contact {background-position: left -624px;}
#subpage #header h1#h1-help {background-position: left -672px;}
#subpage #header h1#h1-bedankt {background-position: left -720px;}
#subpage #header h1#h1-aanmelden {background-position: left -768px;}
#subpage #header h1#h1-paswoord {background-position: left -816px;}
#subpage #header h1#h1-checkMailBox {background-position: left -864px;}
#subpage #header h1#h1-allesKanBeter {background-position: left -912px;}
#subpage #header h1#h1-demo {background-position: left -913px;}
#subpage #header h1#h1-empty {background-position: left -9999px;}
#subpage #header h1#h1-error {background-image:url(../img/css_backgrounds/error.gif); background-position: left -22px;}
#subpage #header h1#h1-foutje {background-image:url(../img/css_backgrounds/foutje.gif); background-position: left -22px;}


/*-------------------------------------------------------------------------------------  3. Content --------------------------------*/

#home #content    {width:975px; float:left; background:url(../img/css_backgrounds/bg-content.gif) no-repeat left top; margin:6px 0 0 0; padding:0 0 0 5px}
#subpage #content {width:884px; float:left; background:url(../img/css_backgrounds/bg-content.gif) no-repeat left top; margin:6px 0 0 0; padding:0 0 0 96px;}

/* homepage boxes */
#loginBox, #maintenanceBox, #box02, #box03, #box04 {float:left;}
#loginBox, #maintenanceBox {width:245px; height:166px; background:url(../img/css_backgrounds/bg-login.gif) no-repeat left top; padding:40px 0 0 15px; margin:20px 0 0 0;}
#maintenanceBox {width: 205px; padding-right:40px;}
#box02 {width:225px; padding:28px 25px 0 0}
#box02 img {padding:9px 0 32px 0}
#box02 p {margin:0}
#box03 {width:210px; padding:28px 30px 0 0}
#box03 img {padding:9px 0 0 0}
#box04 {width:225px; padding:28px 0 15px 0}
#box04 .homeTestimonial {width:193px; border:1px dotted #a7c5d6; padding:10px 20px 5px 10px;}

#box04FAQ {display:block;}
#box04Ideas {display:none;}

/* homepage titles */
#content h2#ttl-freeTrial, 
#content h2#ttl-stayInTouch, 
#content h2#ttl-story, 
#content h2#ttl-faq, 
#content h2#ttl-ideas {margin:0 0 10px 0}

h2#ttl-freeTrial, h2#ttl-stayInTouch, h2#ttl-story, h2#ttl-faq, h2#ttl-ideas {display:block;  text-indent:-9999px;}
h2#ttl-freeTrial {width:225px; height:19px; background:url(../img/css_backgrounds/bg-ttl-home-freeTrial.gif) no-repeat left top;}
h2#ttl-stayInTouch {width:225px; height:20px; background:url(../img/css_backgrounds/bg-ttl-home-stayInTouch.gif) no-repeat left top;}
h2#ttl-story {width:174px; height:17px; background:url(../img/css_backgrounds/bg-ttl-home-story.gif) no-repeat left top;}
h2#ttl-faq {width:162px; height:19px; background:url(../img/css_backgrounds/bg-ttl-home-faq.gif) no-repeat left top;}
h2#ttl-ideas {width:168px; height:19px; background:url(../img/css_backgrounds/bg-ttl-home-newIdea.gif) no-repeat left top;}

/* general list layout  */
#content ul {list-style:none; margin:0; padding:0}
#content ul li {background:url(../img/css_backgrounds/bg-li-blue.gif) no-repeat left 4px; padding:0 0 10px 20px;}
#content ul li.red {background:url(../img/css_backgrounds/bg-li-red.gif) no-repeat left 4px; padding:0 0 10px 20px;}

/* what is assist */
#accordion {padding:0 0 25px 0}
#element01 {background:url(../img/css_backgrounds/bg-01.gif) no-repeat left 4px; margin:0; padding:8px 0 7px 30px;}
#element02 {background:url(../img/css_backgrounds/bg-02.gif) no-repeat left 4px; margin:0; padding:8px 0 7px 30px;}
#element03 {background:url(../img/css_backgrounds/bg-03.gif) no-repeat left 4px; margin:0; padding:8px 0 7px 30px;}
#element04 {background:url(../img/css_backgrounds/bg-04.gif) no-repeat left 4px; margin:0; padding:8px 0 7px 30px;}
#element05 {background:url(../img/css_backgrounds/bg-05.gif) no-repeat left 4px; margin:0; padding:8px 0 7px 30px;}

/* 3 version */
#content .boxVersions {float:left; width:250px; padding:0 25px 0 0; margin:0}
#content .boxVersions .text {height:150px}
#content .boxVersions h2 {margin:0 0 .2em 0}
#content .boxVersions ul {margin:0 0 15px 0}
#content .boxVersions ul li {line-height:1.1em; padding:0 0 5px 17px; background-position:left 2px}

#content table#wideTable {width:800px; margin:10px 0; padding:0; border:0; border-collapse:collapse}
#content table#wideTable th {background:url(../img/css_backgrounds/bg-table-th.gif) repeat-x left top; height:21px; padding:0 0 0 4px; vertical-align:middle}
#content table#wideTable td {background:url(../img/css_backgrounds/bg-dots-tableRow.gif) repeat-x left bottom; height:19px; padding:0 0 0 4px; vertical-align:middle}
#content table#wideTable td.last {background:none;}
#content table#wideTable td div.check {height:14px; text-indent:-9999px; background:url(../img/css_backgrounds/bg-table-check.gif) no-repeat center top}

/* faq */
#content .faq ul {margin:0 0 0 7px}
#content .faq ul li {padding-bottom:4px}

/* table forms */
#content table#form {width:580px; margin:10px 0; padding:0; border:0; border-collapse:collapse}
#content table#form td {background:none;}
#content table#form td.labelText {width:260px; vertical-align:top; padding:3px 0 0 0}
#content table#form td ul {margin:0; padding:0}
#content table#form td ul li {float:left; padding:0; margin:0}

#content .contact table#form td.labelText {width:100px; vertical-align:top; padding:3px 0 0 0}

#content table.form {width:580px; margin:10px 0; padding:0; border:0; border-collapse:collapse}
#content table.form td {background:none;}
#content table.form td.labelText {width:260px; vertical-align:top; padding:3px 0 0 0}
#content table.form td ul {margin:0; padding:0}
#content table.form td ul li {float:left; padding:0; margin:0}

#content .contact table.form td.labelText {width:100px; vertical-align:top; padding:3px 0 0 0}

/* order assist */
#content table#form div.totalAmountBorder {width:100px; height:15px; background:url(../img/css_backgrounds/bg-dots-tableRow.gif) repeat-x left bottom;}
#content table.form div.totalAmountBorder {width:100px; height:15px; background:url(../img/css_backgrounds/bg-dots-tableRow.gif) repeat-x left bottom;}

/* loginbox subpages */
#subpage #loginBox, #subpage #maintenanceBox {margin-top:-10px}

/* confirm pages trial and lost password login box */
.pageNav06 #loginBox span.loginBoxPassHelp {display:none;}
.pageNav06 #loginBox img.btnLogin {padding:5px 0 0 0}
.pageNav06 #loginBox div.remember {padding:8px 0 0 0}

.confirmLostPassword #loginBox span.loginBoxPassHelp {display:none;}
.confirmLostPassword #loginBox img.btnLogin {padding:5px 0 0 0}
.confirmLostPassword #loginBox div.remember {padding:8px 0 0 0}


/* users about assist */
h3.quote {clear:both; display:block; width:200px; height:134px; float:left; margin:0; padding:0; text-indent:-9999px;}
h3.quote-mutske {height:100px; background:url(../img/css_backgrounds/bg-quote-mutske.gif) no-repeat left top;}
h3.quote-yoshiKwai {height:130px; background:url(../img/css_backgrounds/bg-quote-yoshiKwai.gif) no-repeat left top;}
h3.quote-kruispunt {height:110px; background:url(../img/css_backgrounds/bg-quote-kruispunt.gif) no-repeat left top;}
h3.quote-roodebeekcntr {height:81px; background:url(../img/css_backgrounds/bg-quote-roodebeekcntr.gif) no-repeat left top;}

.users-logo {float:right; margin:0 0 10px 0; padding:0 145px 0 0; text-align:right;}
.user-mutske {background:url(../img/css_backgrounds/bg-logo-mutske.gif) no-repeat right top; height:77px; padding-top:20px}
.user-yoshiKwai {background:url(../img/css_backgrounds/bg-logo-yoshiKwai.gif) no-repeat right top; height:72px; padding-top:25px}
.user-kruispunt {background:url(../img/css_backgrounds/bg-logo-kruispunt.gif) no-repeat right top; height:68px; padding-top:15px}
.user-roodebeekcntr {background:url(../img/css_backgrounds/bg-logo-rodebeekcntr.gif) no-repeat right top; height:58px; padding-top:15px}

/* error message */
ul#errors, ul.errors {border:1px solid #EBBBC3; padding:10px 0 0 25px; margin:10px 0 20px 0; width:550px; background:#EFE0E3}
ul#errors li,#content ul.errors li  {background-image:url(../img/css_backgrounds/bg-li-red.gif); padding: 0 0 0 15px ! important;float:none ! important; margin-left:4px ! important;}
ul.errors {width:314px;}
/*-------------------------------------------------------------------------------------  4. Column01 --------------------------------*/






/*-------------------------------------------------------------------------------------  5. Column02 --------------------------------*/

/* box column02 */
#boxColumn02 {margin:-40px 0 0 0}
#boxColumn02 ul li {background-image:url(../img/css_backgrounds/bg-li-red.gif);}
#boxColumn02Top {background:url(../img/css_backgrounds/bg-box-column02-top.gif) no-repeat left top; width:233px; padding:18px 10px 0 21px;}
#boxColumn02Bottom {background:url(../img/css_backgrounds/bg-box-column02-bottom.gif) no-repeat left top; width:264px; height:20px;}

/* extra content column02 */
#extraContentColumn02 {padding:25px 10px 0 10px}

/* only pictures column02 */
#onlyPicturesColumn02 {padding:0px 10px 0 10px}



/*-------------------------------------------------------------------------------------  6. columnWide --------------------------------*/



/*-------------------------------------------------------------------------------------  7. Footer --------------------------------*/

#home #footer     {clear:both; padding:0 0 10px 266px}
#subpage #footer  {clear:both; padding:40px 0 10px 0; text-align:center;}