/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Commonly used colors for E-Port:
 *
 *    BLUE (Pantone 2738C)
 *        HTML      #1b4298
 *        RGB       27,66,152
 *
 *    RED (Pantone Red 032C)
 *        HTML      #ef4135
 *        RGB       239,65,53
 *
 *    ORANGE (Pantone Orange 021C)
 *        HTML      #f78f1e (niet correct) 
 *        RGB       247,143,30
 *
 *    LIGHT ORANGE (Pantone 136C)
 *        HTML      #febf57
 *        RGB       254,191,87
 *
 *    YELLOW (Pantone 109C)
 *        HTML      #ffdc00
 *        RGB       255,222,0
 *
 *    GREY
 *        HTML      #9ca5ad
 *        RGB       156,165,173
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * SITE WIDE SETTINGS
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

pre, form, body, html, p, blockquote, fieldset, input,
h1, h2, h3, h4, h5, h6, ul, ol, li
{
  margin: 0; 
  padding: 0;
}

ul, ol
{
  margin-left: 24px;
}

a img,:link img,:visited img
{
  border: none;
}

a
{
  color: #ef4135;
  text-decoration: none;
}

a:hover
{
  text-decoration: underline;
}

body, td, p
{
  font-family: Verdana;
  font-size: 11px;
  color: #112C8B;
}

p
{
  padding-top: 12px;
}

body
{
  background: #f8f9fd url('/images/site/layout/body_bg.jpg') repeat-x;   
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * FONT STYLING
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

h1
{
  padding-top:10px;
}

h1,
h1 a
{
  /* 18px */
  font-size: 138.5%;
  color: #112C8B;
  padding-bottom: 18px;
}

h2,
h2 a
{
  /* 16px */
  /*font-size: 123.1%;
  color: #112C8B;*/
  /* 14px */
  font-size: 107.7%;
  color: #112C8B;
  padding-top: 12px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* 
 * Full text 
 */

div.fulltext
{
  width: 500px;
  text-align: justify;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*
 * Contact us form make up.
 */

div#contactusform
{
}

div#contactusform fieldset
{
  /*font-size: 80%;*/
  color: #9ca5ad;
  font-weight: bold;
  border: solid 1px #9ca5ad;
}

div#contactusform fieldset table
{
  padding: 6px;
}

div#contactusform td.label
{
  font-weight: bold;
  vertical-align: top;
  padding-top: 3px;
  padding-bottom: 3px;
}

div#contactusform td.field
{
}

div#contactusform td.comment
{
  font-weight: normal;
  font-style: italic;
  color: #9ca5ad;

  padding-bottom: 6px;
}

div#contactusform tr.separator
{
  padding-bottom: 12px;
}

div#contactusform td.label
{
  vertical-align: top;
  padding-bottom: 3px;
}

div#contactusform label
{
  font-weight: bold;
}

div#contactusform input
{
  background: #ffffff;
  color: #1b4298;
  border: solid 1px #cccccc;
  padding: 1px;
  font-size: 10pt;
}

div#contactusform input.button
{
  background: #112c8b;
  font-weight: bold;
  color: #ffffff;
  margin: 3px;
  padding: 3px;
  padding-left: 12px;
  padding-right: 12px;
}

div#contactusform textarea
{
  color: #1b4298;
  border: solid 1px #cccccc;
  width: 95%;
  padding: 1px;
  font-size: 10pt;
}

div#contactusform span.error
{
  color: #ef4135;
  font-weight: bold;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*
 * Contact us form make up.
 */

div.fullpageform
{
  width: 450px;
}

div.fullpageform fieldset
{
  /*font-size: 80%;*/
  color: #9ca5ad;
  font-weight: bold;
  border: solid 1px #9ca5ad;
}

div.fullpageform fieldset table
{
  padding: 6px;
}

div.fullpageform td.label
{
  font-weight: bold;
  vertical-align: top;
  padding-top: 3px;
  padding-bottom: 3px;
}

div.fullpageform td.field
{
}

div.fullpageform td.comment
{
  font-weight: normal;
  font-style: italic;
  color: #9ca5ad;

  padding-bottom: 6px;
}

div.fullpageform tr.separator
{
  padding-bottom: 12px;
}

div.fullpageform td.label
{
  vertical-align: top;
  padding-bottom: 3px;
}

div.fullpageform label
{
  font-weight: bold;
}

div.fullpageform input
{
  background: #ffffff;
  color: #1b4298;
  border: solid 1px #cccccc;
  padding: 1px;
  font-size: 10pt;
}

div.fullpageform input.button
{
  background: #112c8b;
  font-weight: bold;
  color: #ffffff;
  margin: 3px;
  padding: 3px;
  padding-left: 12px;
  padding-right: 12px;
}

div.fullpageform textarea
{
  color: #1b4298;
  border: solid 1px #cccccc;
  width: 95%;
  padding: 1px;
  font-size: 10pt;
}

div.fullpageform span.error
{
  color: #ef4135;
  font-weight: bold;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*
 * Right side forms.
 */

table.rightloginform td.label
{
  /*font-weight: bold;*/
  vertical-align: top;
}

table.rightloginform td.field
{
}

table.rightloginform td.comment
{
  font-weight: normal;
  font-style: italic;
  color: #9ca5ad;

  padding-bottom: 6px;
}

table.rightsideform td input
{
  background: #ffffff;
  color: #1b4298;
  border: solid 1px #cccccc;
  padding: 1px;
  font-size: 8pt;
}

table.rightsideform td input.button
{
  background: #112c8b;
  font-weight: bold;
  color: #ffffff;
  /*margin: 3px;
  padding: 3px;*/
  padding-left: 12px;
  padding-right: 12px;
}

div.rightsideform textarea
{
  color: #1b4298;
  border: solid 1px #cccccc;
  width: 95%;
  padding: 1px;
  font-size: 10pt;
}

div.rightsideform span.error
{
  color: #ef4135;
  font-weight: bold;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

table#contract_comparison
{
  margin-left: 24px;
}

table#contract_comparison th
{
  font-weight: bold;
  font-size: 10px;
  color: #ef4135;
  text-align: center;
  padding-left: 0px;
  padding-right: 6px;
  padding-bottom: 16px;
}

table#contract_comparison td
{
  vertical-align: top;
}

table#contract_comparison td.title
{
  width: 220px;
  font-size: 11px;
  font-weight: bold;
  padding-right: 16px;
}

table#contract_comparison td.summary
{
  font-style: italic;
  color: #888888;
  /*font-size: 7pt;*/
  /*padding-left: 100px;
  padding-right: 100px;*/
  padding-bottom: 16px;
}

table#contract_comparison td.value
{
  text-align: center;
}

table#contract_comparison td.value_excl
{
  text-align: center;
  padding-bottom: 4px;
}

table#contract_comparison td.value_incl
{
  text-align: center;
}

table#contract_comparison td.billing
{
  padding-bottom: 16px;
  text-align: center;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

table.contract_display
{
}

table.contract_display td.title
{
  font-weight: bold;
}

table.contract_display td.value
{
}

table.contract_display td.comment
{
  font-style: italic;
  color: #888888;
  /*font-size: 7pt;*/
  /*padding-left: 100px;
  padding-right: 100px;*/
  padding-bottom: 12px;
  text-align: justify;
}

table.contract_display td.title_excl
{
  font-weight: bold;
}

table.contract_display td.value_excl
{
  font-weight: bold;
}

table.contract_display td.title_incl
{
  font-weight: bold;
}

table.contract_display td.value_incl
{
  font-weight: bold;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

div#wrapper
{
  width: 950px;
  margin: auto;
}

div#logo
{
  padding-left:20px;
  padding-top:10px;
  width:200px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * NEWS BAR
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

div#newsbar
{
  height: 12pt;
  overflow: hidden;
  margin-bottom: 9px;
}
 
div#newsbar ul
{
  list-style-type: none;
  list-style-position: inside;
  margin-left: 0.75em;
  text-indent: 0px;
}

div#newsbar li
{
  text-indent: 0px;
  font-weight: bold;
}

ul#listticker
{
  list-style-type: none;
  list-style-position: inside;
  margin-left: 0.75em;
  text-indent: 0px;  
}

ul#listticker li
{
  text-indent: 0px;
  font-weight: bold; 
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * MENU 
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div#menu
{
  height: 96px;
  width: 950px;
  background: transparent url('/images/site/layout/menu_bg.jpg') no-repeat;  
}

table#menu_table
{
  width: 100%;
  padding-right: 10px;
  height:84px;
}

table#menu_table td#logo_td
{
  width: 185px;
  padding-top: 10px;
  padding-left: 10px;
}

table#menu_table td#main_menu_td
{
  width: 385px;
}

table#menu_table td#quick_menu_td td
{
  color: #828282;
}

table#menu_table td#main_menu_td
{
  vertical-align: bottom;
}

div#links
{
  color: #828282;  
  text-align: right;
  padding-right: 10px;
}

div#links a 
{
  color: #828282;
  text-decoration:underline;
}


div#footer,
div#footer a
{
  text-align:center;
  font-size:10px;
  color:#666666;
}

div#footer a
{
  text-decoration:none;
}

/*content*/
div#content_wrapper{
  width: 100%;


}

table#content_table
{  
  padding: 0px;  
  width: 100%;  
  
}



/* splash keuze table op homepage  */
div#splash_keuze
{
  background: #ececec url('/images/site/layout/content_bg_home.jpg') repeat-x;    
}
div#splash_keuze h1 
{
  padding-bottom:5px;
  color:#112c8b;
}

div#splash_keuze td, 
div#splash_keuze a
{
  color:#112c8b;
}

div#splash_keuze table td
{
  vertical-align: top;
  width: 217px;

}

div#splash_keuze table td div.content
{
  background: url('/images/site/layout/home_keuze_bg.jpg');
  padding:5px;
  padding-bottom:10px;
}

/* login div */
div#login_div
{
  color: white;
  margin-left: 20px;
  margin-right: 30px;
  margin-top: 55px;
  height: 294px;
  /*background-color: #e2e2e2;*/
}
div#login_div td
{
  color: white;
}

/* right bottom div */
td#right_content_bottom_td
{  
  background-color: #e2e2e2;
  padding-top: 10px;
  padding-left: 10px;  
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

div#main_links 
{
  width: 100%;
  text-align: center;
}

div#main_links a
{
  color: #112C8B;
  font-weight: bold;
  font-size: 123.1%;
}

div#submenu
{
  text-align: center; 
}

div#submenu a
{
  color: #112C8B;
  font-size: 100%;
  text-decoration: underline;
}

div#leftmenu
{
  padding-right:20px;
  padding-bottom:20px;
  padding-top:10px;
  font-weight:bold;
  float:left;
  color: #112c8b;
}

div#leftmenu a
{
  color: #112c8b;
  font-size:12px;
}

div#leftmenu table 
{
  border-right:1px solid grey;
  width: 175px;
}

div#leftmenu a:hover
{
  color: #fb7501;
  text-decoration:none;
}
div#leftmenu .submenu_arrow
{ 
  background-image: url('/images/site/layout/submenu_arrow_blue.gif');
  background-repeat:no-repeat; 
  width:20px;
  float:left;
}

div#leftmenu a:hover .submenu_arrow
{
background-image: url('/images/site/layout/submenu_arrow_orange.gif');
}

div#left

div.diensten_o2verzicht
{
  margin:100px;
}

table.diensten_overzicht
{
  width:100%;
  padding:10px; 
}

table.diensten_overzicht td.details
{
  color:white;
  width: 308px; 
  height: 69px; 
  vertical-align: top; 
  text-align: left; 
  padding-left: 5px; 
  padding-right: 5px;
}

table.diensten_overzicht td.header
{
  width: 264px; 
  height: 42px; 
  text-align: left; 
  padding-left: 15px; 
  vertical-align: top; 
  padding-top: 10px;
}
table.diensten_overzicht td.details .icon
{
  float: left; 
  width: 75px; 
  padding-left: 5px; 
  padding-right: 10px; 
  padding-bottom: 10px; 
  text-align: center
}


table.button a
{
  color: white;
  font-weight: bold;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* 
 * Deze table layout zorgt voor de formattering van de timeline
 */

table#timeline
{
}
 
table#timeline td.date
{
  vertical-align: top;
  text-align: center;
}

table#timeline td.date div.year
{
  font-weight: bold;
  color: #f78f1e;
}

table#timeline td.text
{
  text-align: justify;
}

table#timeline td.text p
{
  padding-top: 10px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* 
 * Deze table layout zorgt ervoor dat we links de basic shop info plaatsen
 * en rechts een foto van de winkel.
 */
 
table#shop_info
{
  border-collapse: collapse;
  border-spacing: 0px;
  border: 0px;
  width: 100%;
}

table#shop_info td
{
  padding: 0px;
}

table#shop_info td#shop_info_basic
{
  vertical-align: top;
}

table#shop_info td#shop_info_pictures
{
  vertical-align: middle;
}

div#shop_info_pictures
{
  float: right;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* END */

