/* color: #344a9d; colour of text links */


.global{
border: solid 1px green;
}

body{
font-family: helvetica;
background: #f5f5f5;
}

a:link, a:visited {
color: #7e4747;
text-decoration: none;
}

a:hover {
color: #8b6155;
text-decoration: underline;
}


#header_toggle, #edit_link, #publish_link{
color:white;
text-decoration:none;
}

#header_toggle:hover, #edit_link:hover, #publish_link:hover{
/*border-bottom: 1px solid #cccccc;*/
border-bottom: 1px dotted #ffffff;
}



#global {
max-width:1000px; /* max-width fails up on IE5 but works on IE6 */
padding:10px;
margin-left:auto;
margin-right:auto;
/*border: solid 1px #cccccc; */
/* font-family: helvetica; */

/* max-width for IE */
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );

/* needed for old IE <center> workaround  or else text will also center */
text-align:left;

/*border: solid 1px black; */

}


#view {

/* header images may be overridden by on-page style */
/* header height is defined at an html level by cookie or as a default */
font-size:80%;

/* remove default background image as it shines through before swap */

/*background-image:url(images/header_001.jpg); */

background: #633322;
background-repeat:no-repeat;
background-position:center;

/* add space between view and tabs */
/* border-bottom: solid 3px #ffffff; */

}





.thumb{
float:left;
margin-right:10px;
border: 0px;
}


.menu {
font-size: 80%;

}

.menu ul {
list-style: none; /* remove bullets */
margin: 0;
padding: 0;
width: 100%; /* expand ul area to containing block */
float: left; /* this prevents width's of Mozilla LI's from going wobbly */
}

/* minimum width for second level and onwards */
.menu ul ul {
min-width:8em
}

/* center the top level texts */
.menu ul li {
text-align: center;
}

/* left align second level texts and onwards */
.menu ul ul li {
text-align: left;
}

/* affect all linked areas within menu divs and current_page */

.menu a{
color: white;
font-weight: bold;
}

.menu ul li li a{
color: #ffa083;
}

.menu a{
display: block; /* expand link areas to full widths */
border: 1px solid black; /* level of 3d effect */
border-color: #c97c65 #944f39 #944f39 #c97c65; /* 3d but doesn't work well */
border-color: #ffffff #ffffff #ad614a #ad614a;
margin: 0px; /* this can create space between link areas */
padding: 6px 15px 6px 4px; /* top/right/bottom/left padding within linked areas. The 15px is offset for the 13px icon */
text-decoration: none; /* default link styling */

}



/* Background color of all items (if done above, it would override the
   background image (arrow) */

.menu ul{
background:#a9614a;
/*background-image:url(http://africahousehotel.com/images/tile.png);*/
background-position:center;
}



/* the current page unless node background defined here
will not be overriden by later declarations */

.current_page{ /* common styles for current_page */

border: 1px solid black; /* level of 3d effect */
border-color: #ffffff #ffffff #d6866b #d6866b;

margin: 0px; /* this can create space between link areas */
padding: 6px 15px 6px 4px; /* top/right/bottom/left padding within linked areas. The 15px is offset for the 13px icon */
color:#ffffff;
font-weight: bold;
background-repeat: no-repeat;
background-position: 97%;
background: #d0846c;
}


/* add onto current page if it's a node */
.node{ 
background: #d0846c;
background-image: url(images/white_arrow.png);
color:#ffffff;
background-repeat: no-repeat;
background-position: 98%;
}



/* color swaps all ascending links on hover */
.menu :hover > a{
color: #ffffff;

}


/* must keep expand class in href!!!! and it works*/

/* arrow swaps all ascending links on hover */

.menu :hover > .expand{
background-image: url(images/white_arrow.png);
background-repeat: no-repeat;
background-position: 98%;

}

.menu .trail{
background: #d0846c;
color: #ffffff;
border-color: #ea987c #b8694d #b8694d #ea987c; /*3d but doesn't work well*/
border-color: #ffffff #ffffff #d6866b #d6866b;

}


/* color swaps non-link on hover */
.menu :hover > .current_page{
color: white;
background-image: url(images/white_arrow.png);
}


/* arrow swap non-link on hover */
.menu :hover > .current_page{
background-image: url(images/white_arrow.png);
background-repeat: no-repeat;
background-position: 98%;
}


/* apply no background on mousever of final page */
/* underline will ensure a white instead of black */
.menu :hover > .final{
background-image: none;
background:#d0846c;
}



/* add expansion arrow to nodes */
.menu .expand {
background-image: url(images/white_arrow.png);
background-repeat: no-repeat;
background-position: 98%;
}






/* affect final page if current page happens to be one */
#final_page{
border: 1px solid red; /* level of 3d effect */
margin: 0px; /* this can create space between link areas */
padding: 6px 15px 6px 4px; /* top/right/bottom/left padding within linked areas. The 15px is offset for the 13px icon */
color: white; /* colour of text */
background-image: url(http://africahousehotel.com/images/nolink.png);
background-repeat: no-repeat;
background-position: 97%;
background-color: #7b98c8;
border-color: #ea987c #b8694d #b8694d #ea987c;

}



.menu {
width: 100%; /* this takes effect on IE, strething tabs in available area */
float: left; /* this prevents the tabs width from going wobbly on Mozilla on hover */
white-space: nowrap; /* top level items in no menu */

/* for IE but does not take effect on first here */


/* this caused problmes with z-index on some browser versions:
filter: alpha(opacity=50);
filter: -moz-opacity: 0.95; opacity: 0.95;

*/

}
/*
.menu ul li ul li{
filter: alpha(opacity=85);
*/
}


.menu:hover{
/*
filter: -moz-opacity:0.9; opacity: 0.9;
background: blue;
*/

z-index: 600;
}


.menu ul ul{ 
white-space: normal; /* wrap as normal after top-level */
}

/* hover all links in menu
.menu a:hover {
color: #159cf1;
}
*/

.menu li {
position: relative;
}


.menu ul ul ul {
position: absolute;
top: 0px;
left: 100%;
}

.reverse ul li ul {
position: absolute;
top: 0px;
left: -100%;
}



.menu ul ul {
position: absolute;
z-index: 500;
}


div.menu ul ul {
display: none;
}

div.menu ul ul,
div.menu ul li:hover ul ul,
div.menu ul ul li:hover ul ul
{
display: none;
}

div.menu ul li:hover ul,
div.menu ul ul li:hover ul,
div.menu ul ul ul li:hover ul{
display: table;
border-collapse: collapse;

}


/* do display: table instead of block for correct content-expansion */

/* border-collapse: collapse; is necessary for IE or space will be created between tables */



/******** photo libraries ************/

#photos {
font-size: 80%;
border-left: dotted 0px #cccccc;
border-bottom: dotted 0px #cccccc;
}

#photos td {
border-right: dotted 0px #cccccc;
border-top: dotted 0px #cccccc;
}

#photos td {
padding-right: 6px;
padding-bottom: 6px;
}


#photos a:link { color: #000000; text-decoration: none; }
#photos a:visited { color: #000000; text-decoration: none; }
#photos a:hover { color: #006500; text-decoration: none; }
#photos a:active { color: lime; text-decoration : none; }


/* photos on individual display mode, in itable id 'display_table' */

#display_table td {
/* font-family: helvetica; */
font-size:100%;

}

#display_table a {
display: block;
padding: 2px;
}

/* border around cells */
#display_table td {
border: 1px solid #cccccc;
}

/* mouseover on links */
#display_table a:hover{
background: #ffffff;
}

/* display non-link in number array (if used) */
#current_image{
padding: 2px;
background-color: #deebde;
color: #006400;
}

/* border around table */
#display_table{
/*border: solid 1px #cccccc;*/
}

#display_table #image_cell {
padding:10px;
border:1px;
background:#000000;
/*background-image:url(images/gray_checks.gif);*/

line-height:0px;
}


/* bar colours */
.bar_colour{
background-color: #f5f5f5;
}

/* text colour of 'x of x' style counter */
.count{
color: #000000;
background-color: #f5f5f5;
}

.nolink_cell{
background-color: #f5f5f5;
color: #cccccc;
}

#numbers_table a:hover{
color: #006400;
background: #eaf6ea;
}

/* affect link style in individual photo display table only */

#display_table a:link { color: #000000; text-decoration: none; }
#display_table a:visited { color: #000000; text-decoration: none; }
#display_table a:hover { color: #000000; text-decoration: underline; }
#display_table a:active { color: #000000; text-decoration : none; }

/* center photo display_table in content div */
#content #display_table{
margin-left: auto; margin-right: auto;
}