/* Styles for www.squareknot.nl */

/* general structure */
* {
margin:0;
padding:0;
}

html, body {
height: 100%;
}

img {
display: block;
border: none;
}

.floatleft {
float: left;
}

.floatright {
float: right;
}

.clearfloat {
clear: both;
}

body {
background: url(../images/body_bg.gif) repeat-x;
}

#container { /* mag geen width hebben */
position: relative;
min-height: 100%;
}

#header, #header2 {
width: 929px;
height: 247px;
margin-left: 50px;
background: url(../images/header3_bg.jpg) no-repeat;
}

#header2 {
height: 239px;
background: url(../images/header4_bg.jpg) no-repeat;
}

#main_home, #main_section, #main {
width: 922px;
margin-left: 50px;
margin-top: 28px;
padding-bottom: 56px; /* voorkomt overlap door footer */
}

#main_section {
margin-top: 10px;
padding-bottom: 28px; /* voorkomt overlap door footer */
}

#main {
margin-top: 0px;
}

.section {
width: 257px;
float: left;
margin-right: 45px;
background: url(../images/section_bg.gif) repeat-x bottom;
}

.section img {
border-bottom: 1px solid #fff;
}

.sectionpadding {
height: 150px;
padding: 8px;
}

.sectionfooter {
height: 23px;
background: #fff url(../images/sectionfooter.gif) no-repeat;
padding: 0 10px;
}

.box {
width: 420px;
height: 140px;
float: left;
margin: 0 40px 28px 0;
}

.boxcontent {
height: 117px;
width: 209px;
float: right;
padding-left: 10px;
}

.boxfooter {
width: 207px;
height: 23px;
background: #efeff7;
padding: 0 6px;
float: right;
}

#leftcontent {
float: left;
width: 257px;
}

#rightcontent {
float: left;
width: 598px;
margin-left: 25px;
}

#sectiontabs,
#tabrow_particulier,
#tabrow_zakelijk {
margin-top: 28px;
border-bottom: 9px solid #005067;
}

#sectiontabs img,
#tabrow_particulier img,
#tabrow_zakelijk img {
float: left;
}

#menuholder {
padding-bottom: 90px;
background: #e5eff2 url(../images/menuholder_bg.gif) no-repeat bottom;
}

#footer {
position: absolute; /* zet footer altijd onderaan de viewport */
bottom: 0;
width: 100%;
height: 28px;
background: #007fa1;
}

/* styling topmenu */

#topmenu ul {
list-style: none;
margin-left: 257px;
}

#topmenu ul li {
float: left;
}

#topmenu ul li a:link, 
#topmenu ul li a:visited {
display: block;
border-right: 1px solid #5fb9d1;
padding: 20px 10px 0;
font: bold 12px Arial, Helvetica, sans-serif;
color: #aaedff;
text-decoration: none;
}

#topmenu ul li a:hover, 
#topmenu ul li a:active {
color: #fff;
}

#topmenu ul li a.noborder {
border: none;
}

/* styling images */
.title, .title2 {
width: 320px;
height: 76px;
padding: 84px 0 0 245px;
float: left;
}

.title2 {
width: 360px;
padding-top: 99px;
}

.box img {
width: 200px;
height: 140px;
float: left;
border-right: 1px solid #fff;
}

.thumb {
width: 200px;
height: 140px;
}

.pic {
width: 598px;
height: 176px;
}

/* styling text */

#rightcontent h1 {
font: 19px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #005067;
margin-top: 18px;
margin-bottom: 10px;
}

#rightcontent h2 {
font: bold 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #23b5dc;
margin-bottom: 3px;
}

#rightcontent h3 {
font: bold 12px/20px Arial, Helvetica, sans-serif;
color: #000;
}

#rightcontent p {
font: 12px/18px Arial, Helvetica, sans-serif;
color: #000;
margin-bottom: 18px;
}

#rightcontent ul {
list-style: disc;
margin-left: 16px;
margin-bottom: 18px;
}

#rightcontent ol {
list-style-type: decimal;
margin-left: 24px;
margin-bottom: 18px;
}

#rightcontent ol ul {
margin-left: 24px;
margin-bottom: 0;
}

#rightcontent ul li,
#rightcontent ol li {
font: 12px/18px Arial, Helvetica, sans-serif;
color: #000;
}

#rightcontent .intro {
font-style: italic;
font-weight: bold;
}

#rightcontent .nomargin {
margin: 0;
}

a:link,
a:visited {
color: #b18a40;
}

a:hover,
a:active {
color: #f19f00;
}

.sectionpadding p {
font: 12px/18px Arial, Helvetica, sans-serif;
color: #104f5f;
margin-bottom: 16px;
}

.sectionpadding ul {
list-style-image: url(../images/bullet1.gif) circle;
margin-left: 16px;
margin-bottom: 16px;
}

.sectionpadding ul li {
font: 12px/18px Arial, Helvetica, sans-serif;
color: #104f5f;
}

.box h1 {
font: bold 13px/17px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 1px 0 3px 0;
}

.box p {
font: 11px/17px Arial, Helvetica, sans-serif;
color: #000;
}

.hypot {
color: #00ccff;
}

.finplan {
color: #ff3333;
}

.bedrong {
color: #ffcc00;
}

.emply {
color: #99cc00;
}

.pensi {
color: #cc9900;
}

.verbeh {
color: #cc6699;
}

.scheid {
color: #999;
}

.assur {
color: #ff9933;
}

.arbong {
color: #000;
}

a.more:link,
a.more:visited {
display: block;
font: bold 11px Arial, Helvetica, sans-serif;
color: #373779;
text-decoration:none;
float: right;
padding: 4px 16px 4px 0;
background: url(../images/arrow_right.gif) no-repeat right 5px;
}

a.more:hover,
a.more:active {
color: #6c4200;
background: url(../images/arrow_right_on.gif) no-repeat right 5px;
}

a.more2:link,
a.more2:visited {
font: bold 11px Arial, Helvetica, sans-serif;
color: #104f5f;
text-decoration:none;
float: right;
padding: 4px 16px 4px 0;
background: url(../images/arrow2_right.gif) no-repeat right 5px;
}

a.more2:hover,
a.more2:active {
color: #6c4200;
background: url(../images/arrow2_right_on.gif) no-repeat right 5px;
}

a.more3:link,
a.more3:visited {
display: block;
font: bold 11px Arial, Helvetica, sans-serif;
color: #373779;
text-decoration:none;
float: left;
padding: 4px 0 4px 18px;
background: url(../images/arrow_right.gif) no-repeat left 5px;
}

a.more3:hover,
a.more3:active {
color: #6c4200;
background: url(../images/arrow_right_on.gif) no-repeat left 5px;
}

a.back:link,
a.back:visited {
display: block;
font: bold 11px Arial, Helvetica, sans-serif;
color: #373779;
text-decoration:none;
float: left;
padding: 4px 0 4px 18px;
margin-bottom: 10px;
background: url(../images/arrow_left.gif) no-repeat left 5px;
}

a.back:hover,
a.back:active {
color: #6c4200;
background: url(../images/arrow_left_on.gif) no-repeat left 5px;
}

#footer p {
font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #aaedff;
margin: 5px 50px;
}

#footer a:link,
#footer a:visited {
color: #aaedff;
text-decoration:none;
}

#footer a:hover,
#footer a:active {
color: #fff;
}

/* styling other elements */

.hr {
height: 0px;
border-top: 2px dotted #d3d8ed;
overflow: hidden;
clear: both;
}

.hr hr {
display: none;
}

.team {
width: 460px;
margin-bottom: 18px;
float: left;
background: url(../images/team_bg.gif) repeat-x;
}

.framepic {
width: 139px;
height: 139px;
float: left;
padding: 25px;
background: url(../images/frame_bg.gif) no-repeat;
}

.location {
margin-bottom: 18px;
float: left;
}

.framepic2 {
width: 139px;
height: 139px;
float: left;
padding: 25px;
background: url(../images/frame2_bg.gif) no-repeat;
}

.framepic img {
width: 135px;
height: 135px;
}

.framecontent {
padding: 20px 16px;
float: left;
}

.standard {
border: none;
}

.standard td {
vertical-align: top;
font: 12px/18px Arial, Helvetica, sans-serif;
color: #000;
}

.standard td.label {
font-weight: bold;
text-align: right;
padding-right: 10px;
}

table.form {
background: #e5eff2;
padding: 5px 10px;
margin-bottom: 16px;
}

table.form td {
font: 12px/18px Arial, Helvetica, sans-serif;
color: #005067;
padding: 1px 3px 1px 0;
}

table.form td .required {
color: #ff7200;
}

#rightcontent .contact {
height: 41px;
padding-left: 10px;
background: url(../images/contact_left.gif) no-repeat left;
}

#rightcontent .contact p {
font: bold 12px/18px Arial, Helvetica, sans-serif;
color: #005067;
height: 31px;
padding: 10px 5px 0 5px;
background: #e5eff2;
margin: 0;
float: left;
}

#rightcontent .contact img {
width: 10px;
height: 41px;
float: left;
}

/* styling form elements */
input, select, textarea {
font: 12px/18px Arial, Helvetica, sans-serif;
color: #000;
}