/*
	Bigego ~ Text CSS.
	Big thanks to Stuart @ cssplay / alistapart / and so many more peeps ..
	header was #eee8da; older #D1C5AD 
	footer was  #847d6d; older #D1C5AD
	.column-container was #F3EFE7
*/

/* `Basic HTML
----------------------------------------------------------------------------------------------------*/

html, body {  width:100%; height:100%; overflow:hidden;}

body { 
	max-height:100%;
	height: 100%;
	background:transparent url(body-background.jpg) no-repeat scroll 50% 2.6em;
	overflow: hidden; 
	 min-width: 58em; /* 58em is approx 940px */ /*** This is needed for moz. Otherwise, the header and footer will
slide off the left side of the page if the screen width is narrower than the design.
Not seen by IE. ***/
}

/* target IE again using the old * html method */
* html body {
  padding:2.8em 0 2.2em 0; /* header height and footer height assign */
  }

  
#container {
  position:fixed; 
  top:2.8em;
  right:0;
  bottom:2.2em; 
  left:0;
  background:transparent; 
  padding: 0; /* 20px*/
  text-align:center;
  width:100%;
 overflow-x: hidden; /* for horizontal scrolling */
  overflow-y: auto; /* for vertical scrolling */
  z-index:0;
padding:0.75em 0 0;
  }

* html #container { /* target IE again using the old * html method */
  height:100%; 
  width:100%;
  z-index:0;
  }

#container img {margin:5px;}

#logo {
	position: reltive;
	margin: 0 auto -6em;
	width: 193px;
	height: 252px;
	background: transparent url(bigego-logo-ribbon.png) no-repeat scroll 0 0;
}
#header {
  position:absolute; 
  top:0; 
  left:0; 
  width:100%;
  height:2.6em; /* 3.6 */
  overflow: hidden; /* auto */
  background:#464131; /* #464131 slightly lighter brown bg */
  border-bottom:0.2em solid #706a5d;
  text-align:center;
  z-index:999;
  }
  
* html #header {height:2.8em;} /* header height plus borders 3.6 + 0.2*/

#header img {
  	margin:10px 10px 0 10px;
  }
  
#footer {
  	position:absolute; 
  	bottom:0; 
  	left:0;
  	width:100%; 
  	height:2em; 
  	overflow: hidden; /* auto */ 
  	text-align:center; 
  	background:#464131;
  	border-top:0.2em solid #706a5d;
	z-index:999;
  }
  
* html #footer {height:2.2em;} /* footer height plus top border */

/* \*/ head:first-child+body div#footer { position: absolute; z-index:999; /* was z-index: 0; */ } 

/*  Header Navigation
---------------------------------------------------------*/


#header .catnav_wrapper {
/*float:left;*/
line-height:2.6em;
position:relative;
width:55em; /* 55em or 60em with extra nav link and COLOPHON.... 58emis approx 940px */
z-index:4;
margin: 0 auto;
padding:0;
}

#header .catnav {
/*float:left;*/
list-style-position:outside;
list-style-type:none;
margin:0 0 0 7%; /* using % allows scalling when width changes */
padding-left: 0;
position:relative;
/* width:956px; */
z-index:4;
}

#header .catnav li {
float:left;
display:inline; 
margin-top:0;
position:relative;
z-index:20;
/*border-right:1px solid #EEE8DA;*/
text-align: left;
}

#header .catnav li.separator {
padding:0 0.2em;
width:auto; /* 0.6em*/
color:#847D6D;
font-family:"Lucida Grande",Tahoma;
font-size:1em;
}

/* overide - #header ul li a  - in typography */
#header  .catnav li a {
line-height:1em;
font-size:1em; 
text-decoration:none;
border:medium none;
outline:medium none;
display:block;
float:left;
height:2em; /* normal 2.6em  but padding */
min-height:2em; /* normal 2.6em  but padding */
padding:0.4em 0.6em 0.2em;
text-align: left;
/* width:8em; */
}



#header .catnav li a strong {
color:#cab688;
display:block;
font-weight:700;
letter-spacing:-1px;
text-shadow:1px 1px 0 #000000; /* 0.75 ending */
text-transform:uppercase;
}

#header .catnav li a:hover strong {
color:#ffe578;
}

#header .catnav #toggle a strong {
color:#c3d89d; 
}

/* just for IE */
* html #header .catnav li a strong {
font-size:1.025em;
font-weight:400;
}

/* overide - #header ul li span - typography */
#header .catnav li a span {
display:block;
text-transform:none;
letter-spacing: normal;
font-size:0.7em;
padding:0 0.2em;
color:#978466;
text-shadow:0 1px black;
font-family:"Lucida Grande",Tahoma;
}


/* :: top navigation - colour on active page
-------------------------------------------------------------------------------------------------*/

#home #header .catnav li a.home strong, 
#webdesign #header .catnav li a.webdesign strong, 
#marketing #header .catnav li a.marketing strong, 
#contact #header .catnav li a.contact strong, 
#colophon #header .catnav li a.colophon strong,
#login #header .catnav li a.login strong {
	color: #ffe578; /* was #e8dbb8 */
	text-shadow:1px 1px 0 #706A5D; /* 0.75 ending */
} 


/*  Column Control
---------------------------------------------------------*/
.column-container {
	float:left;
	/* margin: 1.5em 0; */
	padding: 4.5em 0;
  	width:100%; 
	/*background:transparent url(line_dot_666.gif) repeat-x scroll 0 0;*/
	clear: both;
	} 
	
.columnone { margin:5em 0 0 3%; /* extra top margin for fixed top left logo */}


.columnone, .columntwo {
	width:29%; 
	float:left;
	text-align:justify;
	margin-right:3%; 
	} 

.columnthree {
	margin-right:4%; 
	margin-left:67%; 
	text-align:justify; /* encompases all three columns + allows overflow */
	}
	
* html .columnthree { border:0; }


.columnone-double {
	margin:0 0 0 3%;  
	width:61%; 
	float:left; 
	text-align:justify;
	} 

	.columnfirst { 
margin-top: 0;  /* remove extra top margin to allow logo to hang down */
}


/* Other Stuffy
---------------------------------------------*/

#box-left {
  	float:left; 
  	background:#e8ecdc; 
  	padding:10px; 
  	border:1px solid #CEC3AD; 
  	width:50%;
  }

#box-right {
	float:right; 
  	background:#e8ecdc; 
  	padding:2%; 
  	border:1px solid #CEC3AD;
	width:26%;
	z-index:1000;
  }

.fixed-bottom-right {
  	position:absolute; 
  	bottom:20px; 
  	right:22px;
  	overflow:auto; 
  	border: 0.2em solid #706A5D;
	cursor: pointer;
	z-index: 1000;
	background: #e8e8d9;
	/* -moz-border-radius-bottomleft:7px; -moz-border-radius-bottomright:7px; -moz-border-radius-topleft:7px; -moz-border-radius-topright:7px;  */
/* Gecko browsers */
-moz-border-radius:16px 16px 4px 4px;
/* Webkit browsers */
-webkit-border-radius: 16px 16px 4px 4px;
/* Konquerer browsers */
-khtml-border-radius: 16px 16px 4px 4px;
/* W3 syntax - futureproof for CS3 - latest opera has support, not sure which syntax though */
border-radius: 16px 16px 4px 4px; 

/* Box shadow effects */
/* Gecko browsers */
-moz-box-shadow:1px 1px 1px #3a3629;
/* Webkit browsers - Safari Chrome*/
-webkit-box-shadow: 1px 1px 1px #3a3629;
/* Konquerer browsers */
-khtml-box-shadow: 1px 1px 1px #3a3629;
/* W3 syntax - futureproof for CSS3 - latest opera has support, not sure which syntax though */
box-shadow: 1px 1px 1px #3a3629; 
  }
  
  .fixed-bottom-right a{
  	display:block; 
	padding:5px;
	font-weight: 400;
  }

.bgwhite {
background-color:#FFFFFF;
padding:1.5em 3%;
width: 55%; /* force smaller column width to take account of extra padding */
/* -moz-border-radius-bottomleft:7px; -moz-border-radius-bottomright:7px; -moz-border-radius-topleft:7px; -moz-border-radius-topright:7px;  */
/* Gecko browsers */
-moz-border-radius:8px;
/* Webkit browsers */
-webkit-border-radius: 8px;
/* Konquerer browsers */
-khtml-border-radius: 8px;
/* W3 syntax - futureproof for CS3 - latest opera has support, not sure which syntax though */
border-radius: 8px; 

/* Box shadow effects */
/* Gecko browsers */
-moz-box-shadow:2px 2px 2px #999999;
/* Webkit browsers - Safari Chrome*/
-webkit-box-shadow: 2px 2px 2px #999999;
/* Konquerer browsers */
-khtml-box-shadow: 2px 2px 2px #999999;
/* W3 syntax - futureproof for CSS3 - latest opera has support, not sure which syntax though */
box-shadow: 2px 2px 2px #999999; 

}