/*
general layout;
the frame that keeps the floating pages together to a required ratio
*/


/* IE 7 doesnt give titles h2 and h3 0 margin*/

h2.dtr, h3{
margin:0;
}

body{
margin: 0;
padding: 0;
font: 76% Times, serif;
background:#363531;
}

#frame{
position:absolute;
top:0;
left:0px;
width:240em;
height:270.6em;
xborder:solid 2px red;
xbackground:green;
xoverflow:hidden;
}

/*rounding mistakes in safari, so it fits , with extra, but in FF 1 px short, so 0.2 extra page substracted
wisth frame extra for navigation
64.2
90.2
*/
.pages{
float:left;
width:65em;
height:91em;
xborder:solid 1px grey;
}

/*
#nav{
background:#000;
position:fixed;
top:0;
right:0;
xwidth:180px;
xheight:100%;
overflow:hidden;
z-index:99;
}
*/


#nav{
background:#000;
position:fixed;
bottom:0;
left:0;
width:100%;
height:auto;
overflow:hidden;
z-index:99;
}


#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
text-transform: uppercase;
font: 0.8em helvetica, arial, sans-serif;
}

#nav ul li{
background:#fff;
margin:1px;
padding:1px;
width:200px;
float:left;
}

#nav ul li a{
text-decoration:none;
color:#000;
}


/*
GLOBAL BLOCKSTYLES
These a-dynamic properties are globally called in the external css file, together with the dynamic properties they act like the initial stylesheet.
Therefore all possible blocks should be defined, like; #id0, #id1, #id2,...{} or the smart way: all blocks within the parent div; body div{}
First we define all the real(outer) divs globally fixed properties, they get the float of the initial divs and a second padding;
*/

.pages div{
overflow:hidden;
float:left;
/*margin is anchor neutral, therefore use border in global bg color */
border:0.3em solid #363531;
/*animated border width*/
padding:0.3em;
/* no ani, bg as main bg */
background:#363531;
}

/*
Then we define all the inner divs globally fixed properties; 
bg as main bg
*/

.pages div .padding{
xfloat:none;
display:block;
padding:0.5em;
border:0.3em solid #363531;
}

.pages div .padding a{
color:#363531;
text-decoration: none;
}

.pages div .padding a img{
border: none;
}

.pages div .padding p{
font-size:1.7em;
xtext-align:justify;
margin-top:10px;
}

.pages div .padding p.edit{
font-size:0.7em;
position:relative;
top:-1em;
right:0;
height:0;
z-index:99;
}

/*
To achieve the animated second padding round targeted blocks we give all the targeted outerdifs
a globally fixed background property;
*/

.pages div:target{
background:url('http://ws.utilia.be/workspace/css/img/sani.gif');
}

/* border always present, off=white, when targetted, must be white; real border dissappears and get replaced with animation*/
.pages div:target .padding{
border:0.3em solid #363531;
}

/*
blinking links text on FF who supports this optional property
*/
.pages div a {background:grey;}
.pages div:target a {text-decoration: blink;}
						
/*
latest rule has priority, otherwise all boxes inherit the general BG 
*/