html {
overflow: none;
background: #000;
}

img.left {
float: left;
margin: 1em;
}
img.right {
float: right;
margin: 1em;
}
p.right {
float: right;
}
body {
margin: 0;
padding: 0;
background: #000;
overflow:hidden;
}
#fadeWrap {
visibility: hidden;
overflow:none;
height: 100%;
width: 100%;
z-index: 10;
padding: 0;
margin: 0;
}

#container {
position: absolute;
top: 3%;
margin: 0 auto;
width: 94%;
height: 100%; 
background: #000;
overflow:none;
}


#logo {
position: absolute;
top: 0;
width: 5%;
height: 100%;
top: 0;
left:-6%;
z-index: 6;			/** Z 6  Logos have to show on top of background pic **/
}

#fibologo {
position: absolute;
height: 38%;
width: 100%;
top: 0;
left: 10%;
z-index: 10;
}
#fibologoimg {
width: 80%;
height: 100%;
}
#l7ddlmlogo {
position: absolute;
height: 62%;
width: 100%;
top: 42%;
left:0;
}
#tsflogo {
position: absolute;
height: 52%;
width: 100%;
top: 48%;
left:0;
}
#l7ddlmlogoimg {
width: 100%;
height: 90%;
}
#tsflogoimg {
width: 100%;
height: 90%;
}



#langSw {
position: absolute;
display: block;
top: -5%;
right: 3%;
z-index: 6;
}

#langStatus {
color: #888888;
}


/***********************************************
 Thumbnails and gallery
 ***********************************************/

#mainThumbDiv {		/* a big div that basically follows inside of bigSquare */
position: relative;
top:-60px;
left: 0;
right: 0;
bottom:0;
width:  100%;
height: 100%;
padding: 5px;
margin: 0;
/*overflow:auto*/;
}


.thumb {		/* class for the <img> inside the link */
margin: 0;
padding: 0;
}
.thumbContainer {	/* class of the <div>'s that surround each <img> */ 
width: 48px;
height: 48px;
margin: 1px;
border: 1px dotted gray;
overflow: hidden;
padding:0;
}

.picGroup {
position: relative;
height: auto;
clear:left;
}

.picGroupTitle {
position: relative;
padding-top: 10px;
}
/***********************************************
 Defines an area that will be completely 
 filled with an image to be used as background
 ***********************************************/
#mainrectangle {
position: absolute;
top: 2%;
left: 2%;
right: 2%;
width: 96%;
height: 96%;
background: #000000;
}
#mainrectimg {
position: absolute;
width: 100%;
height: 100%;
z-index: 5;			/** Z 5  It is the background pic **/
}
#iespacetakerupper {
width: 900px;
}
#S2T, #S3T, #bigSquareT {
position: absolute;
height: 1.5em;
width: 98%;
background-color: #333;
opacity: 0.5;
}
/***********************************************
 ******** S1 - News ****************************
 ***********************************************/

#S1 {
position: absolute;
top: 39%;
left: 1%;
width: 36%;
height: 59%;
z-index: 10;			/** Z 10 **/
background-image: url('/images/1pxtrans.gif');
overflow: hidden;
}

.titles {
position:absolute;
top:1%;
height: 2em;
z-index:-1;
background-color: transparent;
}

.newsPreviewItem {
/*border-bottom: 1px dotted gray;*/

/*margin-bottom: 1em;*/
}

.newsViewItem {
background-color: transparent;
}

.newsText {
height: 100%;
}
.newsItem {
}

/***********************************************
 ******** S2 - Residences **********************
 ***********************************************/

#S2, #S2Links, #map, #igloolik, #kuujjuaq, #quebec, #mexico, #igloolikdot, #kuujjuaqdot, #quebecdot, #mexicodot, #S2text {
position: absolute;
}
#S2 {
top: 2%;
left: 1%;
width: 21.8%;
height: 34.8%;
z-index: 10;			/** Z 10  It is the normal z-index for elements we see **/
}
#S2Text {
}

#S2Title {
position: absolute;
height: 1.5em;
width: 98%;
}
.S2Links {
z-index: 10;
}
#map {
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;			/** Z -1  This is the map photo **/
}
#igloolik {
top: 21%;
right: 46%;
}
#kuujjuaq {
top: 31%;
right: 32%;
}
#quebec {
top: 49%;
right: 32%;
}
#mexico {
top: 75%;
right: 73%;
}
#igloolikdot {
top: 22%;
left: 60%;
}
#kuujjuaqdot {
top: 32%;
left: 71%;
}
#quebecdot {
top: 51%;
left: 72%;
}
#mexicodot {
top: 82%;
right: 64%;
}
#S2Text {
top: 7%;
left: 3%;
height: 100%;
}
#igloolik.msie {
top: 21%;
right: 46%;
}
#kuujjuaq.msie {
top: 31%;
right: 32%;
}
#quebec.msie {
top: 49%;
right: 32%;
}
#mexico.msie {
top: 77%;
right: 73%;
}
#igloolikdot.msie {
top: 20%;
left: 60%;
}
#kuujjuaqdot.msie {
top: 32%;
left: 71%;
}
#quebecdot.msie {
top: 48%;
left: 72%;
}
#mexicodot.msie {
top: 78%;
right: 64%;
}

/***********************************************
 ******** S3 - Project *************************
 ***********************************************/
#S3 {
position: absolute;
top: 2%;
left: 23.8%;
width: 13.5%;
height: 21%;
z-index: 10;			
background-image: url('/images/1pxtrans.gif');
}
#S3Title {
position: absolute;
height: 1.5em;
width: 98%;
}
#S3Links {
position: absolute;
bottom: 0;
left: 3%;
}
/***********************************************
 ******** S4 - Photos **************************
 ***********************************************/
#S4 {
position: absolute;
top: 25%;
left: 29.3%;
width: 8%;
height: 14%;
z-index: 10;			/** Z 10 **/
background-image: url('/images/1pxtrans.gif');
}
#S4Title {
position: absolute;
height: 1.5em;
width: 98%;
}
/***********************************************
 ******** S5 - Blog ****************************
 ***********************************************/
#S5 {
position: absolute;
top: 31.5%;
left: 24%;
width: 4%;
height: 6%;
z-index: 10;			/** Z 10 **/
background-image: url('/images/1pxtrans.gif');
}
#blog {
position: absolute;
top: 0;
right: 0;
}

#postHolder {
position: absolute;
width: 98%;
height: 80%;
}

#blogPost {
width: 100%;
height: 100%;
overflow: auto;
}

#closeModal {
position: absolute;
top: 1em;
right: 2em;
height: 1em:
}
#closeModal:hover {
color: #aaaaee;
cursor: pointer;
cursor: hand;
}

/***********************************************
 ******** S6 - Spiral **************************
 ***********************************************/
#S6 {
position: absolute;
top: 24%;
left: 24%;
width: 4.5%;
height: 7%;
z-index: 10;			/** Z 10 **/
background-image: url('/images/1pxtrans.gif');
}
#S6Title {
position: absolute;
height: 1.5em;
width: 98%;
}
#spiraldot {
position: absolute;
top: 40%;
right: 12%;
z-index: 10;
}
#phiclick {
z-index: 10;
}
/***********************************************
 ******** Big Square ***************************
 ***********************************************/

#bigSquare {
position: absolute;
top: 1.3%;
left: 39%;
width: 60%;
height: 97%;
z-index: 10;			/** Z 10 **/
overflow: hidden;
background-color: transparent;
padding: 0;
overflow:hidden;
/*border: 1px solid #993333;*/
}
#bigSquare.msiex {
position: absolute;
top: 2%;
left: 40%;
width: 61.5%;
height: 95%;
z-index: 10;			/** Z 10 **/
overflow: hidden;
background-color: transparent;
padding-right: 1em;
overflow:hidden;
}


#ghostTitle {
position: absolute;
color: #558;
top: 0;
right: 2%;
font-size: 300%;
line-height:1.2em;
height: 1.4em;
width: auto;
z-index: 10;
}
#holder {
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
z-index: 10;
overflow:none;
/*border: 1px solid blue;*/
}

#aa {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
overflow:auto;
margin: 0;
padding: 0;
background-color: transparent;
padding-top:12%;
/*border: 1px solid yellow;*/
}
#mainText {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
/*border: 1px solid #aaaaaa;*/
padding:0;
}

object {
margin: 0;
}


#video {
position: absolute;
top: -10px;
left: 15px;
width: 400px;
height: 300px;
overflow: hidden;
background-color: transparent;
/*border: 1px solid #aaaaaa;*/
}

#loading {
position: absolute;
top: 43%;
left: 43%;
/*display: none;*/
visibility: hidden;
}
#sls {
position: absolute;
top: 23%;
left: 5%;
/*display: none;*/
/*visibility: hidden;*/
}



#bigSquareTitle {
position: absolute;
top:0;
height: 1.5em;
width: 98%;
}

.blogTitle {
}

.blogList {
padding-top: 2px;
border-bottom: 1px dotted gray;
background-color: transparent;
z-index: 10;
}