File: D:/HostingSpaces/SBogers45/smuldersinterieurprojecten.nl/wwwroot/css/style.css
@charset "UTF-8";
/*
CSS Document
Smulders Interieurprojecten.
Copyright Mike Ontwerpt 2011
*/
/* G E N E R A L */
html{
height: 100%;
}
body{
margin: 0px;
height: 100%;
width: 100%;
font-family: "DINMittelEF", Helvetica, "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
overflow: hidden;
font-size: 14px;
background: #000;
background-image: url(../images/structure/ptrn.jpg);
}
@font-face {
font-family: 'DINMittelEF';
src: url('webfonts/15BDFF_0.eot');
src: url('webfonts/15BDFF_0.eot?#iefix') format('embedded-opentype'),url('webfonts/15BDFF_0.woff') format('woff'),url('webfonts/15BDFF_0.ttf') format('truetype'),url('webfonts/15BDFF_0.svg#wf') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DINMittelEF';
src: url('webfonts/15BDFF_1.eot');
src: url('webfonts/15BDFF_1.eot?#iefix') format('embedded-opentype'),url('webfonts/15BDFF_1.woff') format('woff'),url('webfonts/15BDFF_1.ttf') format('truetype'),url('webfonts/15BDFF_1.svg#wf') format('svg');
font-weight: bold;
font-style: normal;
}
h1{
font-variant: small-caps;
color: #008cc3;
font-size: 22px;
margin: 40px 0 40px 0;
font-weight: bold;
}
h2{
font-weight: bold;
font-size: 14px;
color: #008cc3;
margin: 0;
}
h3{
font-size: 18px;
color: #fff;
margin: 20px 0 20px 0;
}
hr{
color: #fff; /* IE */
background-color: #fff; /* non-IE */
border: none;
border-top: 1px solid;
}
strong{
font-weight: bold;
}
a{
color: #fff;
}
a:hover{
color: #fff;
}
ul{
padding: 0 0 0 17px;
}
li{
list-style: square outside;
}
img{
border: none;
}
/* N A V I G A T I O N */
nav{
width: auto;
height: 40px;
position: absolute;
top: 0;
right: 14px;
z-index: 20;
}
nav ul.menu {
margin: 0;
height: 39px;
}
nav ul.menu li{
font-weight: bold;
font-variant: small-caps;
letter-spacing: 1px;
list-style: none;
float: right;
display: block;
padding: 11px;
background: #4f5355;
cursor: pointer;
color: #fff;
border-bottom: 1px solid #343637;
}
nav ul.menu li.activeMenu{
background: #008cc3;
}
nav ul.submenu {
margin: 0;
}
nav ul.submenu li{
font-variant: small-caps;
letter-spacing: 2px;
list-style: none;
float: left;
display: block;
padding: 5px 20px 7px 20px;
background: #262829;
color: #fff;
cursor: pointer;
}
nav ul.submenu li.clear{
display: none;
}
nav ul.submenu li.active{
background: #343637;
color: #e3e7e9;
}
#subHideParticlier{
position: absolute;
top: 39px;
left: 87px;
}
#subParticlier{
position: relative;
top: -35px;
left: 0;
z-index: 20;
}
.hideSubMenu{
overflow: hidden;
height: 28px;
}
/* M A I N F O O T E R */
.mainFooter{
font-size: 10px;
color: #fff;
width: 100%;
height: 16px;
position: absolute;
bottom: 0;
right: 14px;
z-index: 20;
background: #4f5355;
}
#guideBtn{
margin: 0 auto;
position: absolute;
bottom: -60px;
left: 100px;
width: 92px;
height: 56px;
z-index: 18;
cursor: pointer;
background: url(../images/structure/guideBtn.png) 0 0 no-repeat;
}
#guideBtn:hover{
background: url(../images/structure/guideBtn.png) 0 -56px no-repeat;
}
#guideHelpHolder{
position: absolute;
bottom: 16px;
left: 100px;
width: 200px;
height: 24px;
z-index: 15;
overflow: hidden;
}
#guideHelp{
position: absolute;
left: -200px;
width: 125px;
height: 16px;
z-index: 15;
background: #343637;
color: #e3e7e9;
padding: 6px 0 4px 35px;
font-size: 12px;
}
/* P A R A L L A X B A C K G R O U N D S */
#scrollpage{
margin: 0 auto;
position: relative;
left: 0;
height: 100%;
width: 1440px;
overflow-y: scroll;
overflow-x: hidden;
z-index: 1;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
/*
.main-background{
position: relative;
width: auto;
height: auto;
overflow: hidden;
}*/
.main-background{
position: relative;
left: 0;
height: 900px;
overflow: hidden;
}
.bottomShadow{
height: 100px;
width: 1440px;
background: url(../images/structure/bottom_shadow.png) 0 0 repeat-x;
position: absolute;
left: 0;
top: -98px;
}
#page1{ background: url(../images/structure/bg1b.jpg) 0 0 no-repeat; }
#page2{ background: url(../images/structure/bg2b.jpg) 0 -73px no-repeat; }
#page3{ background: url(../images/structure/bg13.jpg) 0 -73px no-repeat; }
#page4{ background: url(../images/structure/bg7.jpg) 0 -73px no-repeat; }
#page5{ background: url(../images/structure/bg11.jpg) 0 -73px no-repeat; }
#page6{ background: url(../images/structure/bg14.jpg) 0 -73px no-repeat; }
#page7{ background: url(../images/structure/bg4b.jpg) 0 -73px no-repeat; }
/*********************** C O N T E N T ***************************/
/* G E N E R A L C O N T E N T */
.textBlockContainer{
position: relative;
top: 80px;
left: 100px;
width: 380px;
padding: 40px;
height: auto;
background: #fff;
z-index: 100;
}
.headerBox{
position: relative;
top: 0;
left: 0;
z-index: 10;
display: block;
height: 160px;
}
.h1InContentBox{
position: absolute;
top: -40px;
left: 0;
margin: 0;
}
.contentBox{
position: absolute;
top: 320px;
left: 140px;
z-index: 500;
color: #fff;
width: 380px;
height: auto;
padding: 30px 0;
}
.footerBox{
position: absolute;
top: 240px;
left: 40px;
width: 380px;
padding: 20px 0 0 0;
z-index: 10;
color: #222;
display: block;
}
.blueBar{
position: absolute;
left: 0px;
top: 320px;
height: 200px;
width: 100%;
z-index: 200;
float: left;
}
.blueBarFallback{
background: #00589b;
opacity: 0.7;
filter: alpha(opacity = 70);
}
#blueBar7{
top: 285px;
}
/* S I D E P H O T O S C O N T E N T */
.spContainer{
position: absolute;
top: 80px;
left: 600px;
width: 440px;
height: 440px;
z-index: 500;
}
.spColumnHolder{
position: relative;
width: 880px;
height: auto;
}
.spColumn{
position: relative;
width: 440px;
height: auto;
float: left;
margin: 0 20px 0 0;
}
.spBar{
width: 400px;
height: 27px;
padding: 13px 20px 0 20px;
background: #fff;
}
.spContent{
width: 440px;
min-height: 100px;
margin: 20px 0 20px 0;
overflow: hidden;
}
.spThumbRow{
width: 440px;
height: auto;
margin: 0 0 10px 0;
}
.spThumb{
position: relative;
left: 0;
width: 138px;
height: 98px;
background: #000;
border: solid 1px #fff;
overflow: hidden;
float: left;
margin: 0 10px 0 0;
}
.projectCount{
margin: -3px 0 0 0;
font-size: 18px;
}
.barArrow{
margin: 0 0 1px 0;
}
/* A L B U M */
.albumContainer{
margin: 0 auto;
position: relative;
left: 0;
top: 80px;
width: 940px;
height: auto;
z-index: 500;
}
.albumBar{
width: 900px;
height: 27px;
padding: 13px 20px 0 20px;
background: #fff;
}
.albumContent{
width: 940px;
min-height: 100px;
margin: 20px 0 0 0;
overflow: hidden;
}
.albumColumnHolder{
position: relative;
width: 960px;
height: auto;
}
.albumColumn{
position: relative;
width: 940px;
height: auto;
float: left;
margin: 0 20px 0 0;
}
.albumRow{
width: 940px;
height: auto;
}
.albumThumb{
position: relative;
left: 0;
top: 0;
width: 298px;
height: 198px;
margin: 0 20px 20px 0;
background: #000;
border: solid 1px #fff;
float: left;
overflow: hidden;
}
.albumBlue{
position: absolute;
top: 160px;
height: 380px;
}
.albumInfo{
position: relative;
bottom: 36px;
width: 260px;
height: 20px;
background: #343637;
z-index: 20;
color: #e3e7e9;
padding: 6px 20px 3px 20px;
opacity: 0.9;
filter: alpha(opacity = 90);
border-top: 1px solid #555;
}
/* W E L C O M E */
.welcomeCol{
font-weight: normal;
font-size: 24px;
line-height: 38px;
padding: 0;
}
.welcomeCol p {
font-weight: normal;
font-size: 14px;
line-height: 18px;
padding: 0;
margin: 10px 0;
}
.welcomeHeader{
height: 120px;
}
.welcomeHr{
margin: 40px 0 ;
}
.txtRondLeiding{
font-weight: bold;
font-size: 27px;
font-variant: small-caps;
letter-spacing: -25;
}
.welcomeArrow{
margin: 10px 0 0 20px;
}
/* M A I N C L A S S E S */
.clear{
clear: both;
}
.link{
cursor: pointer;
}
.floatRight{
float: right;
}
.floatLeft{
float: left;
}
.noMargin{
margin: 0;
}
.adjustKerningV{
letter-spacing: -1px;
}
#contact_footer{ position: absolute; left: 0; bottom: 15px; padding: 20px; width: 100%; height: auto; background: #586B77; color: #fff; box-sizing:border-box; -moz-box-sizing:border-box; }
#contact_footer .title{ display: block; margin-bottom: 10px; }
#contact_footer ul{ float: left; margin: 0 20px 0 0; padding: 0; list-style: none; font-weight: normal; }
#contact_footer ul li{ list-style: none; }
#contact_footer a{ color: #fff; }
#contact_footer a:hover{ color: #fff; text-decoration: underline; }