﻿body
{
    background-color: #f7faea;
    background-image: url(routes/images1/pagebg.png);
    background-repeat: repeat-x;
    font-family: Verdana;
    font-size: 8pt;
    text-align: center;
}
#bodywrapper
{
    padding: 0px;
    margin: 0 auto;
    width: 900px;
    position: relative;
}
#pagebody
{
	padding: 0px;
    background-color: white; 
    border: 0px #6D7028 solid;
    width: 100%;
    text-align: left;
}

/*
#header
{
border:none;
    width: 900px;
    height: 146px;
}
*/

#pageheader
{
    background-image: url(http://routes.safarimappers.com/images1/header.png);
    background-position: top left;
    height: 150px; 
    text-align: right;
    width: 100%;
}
#content
{
    float: left;
    width: 700px   
}
#sidebar
{
    margin-top: 3px;
    vertical-align: top;
    float: right;
    background-position: 0px 3px;
    width: 200px;
    background-repeat: no-repeat;
    border: 0px solid green;
    padding: 0px;
}
.fullwidthcontent, #widecontent
{
    width: 100%;
    background-image: url(images/bordergreen.gif);
    background-position: 200px top;
    background-repeat: repeat-y;
}
#areatext
{
   clear: both; 
   padding: 5px;
}
#btmnav
{
    clear: both;
    padding: 10px 5px 10px 5px;
}
#btmnav div
{
    margin: 10px 5px 10px 5px;
}
H1
{
    border-top: 1px solid #6D7028;
    border-bottom: 1px solid #6D7028;
    padding: 2px; 
    margin-bottom: 4px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    font-style:	normal;
    text-decoration: none;
    text-transform:	none;
    color: #f7931d;
    width: 99%;
}
H2	
{
    margin-top: 4px;
    margin-bottom: 4px;
    border-top: 1px solid #6D7028;
    border-bottom: 1px solid #6D7028;
    padding: 2px; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    font-style:	normal;
    text-decoration: none;
    text-transform:	none;
    color: #f7931d;
}	
H3
{	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	color: #717529;
}	
H4
{	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight:400;
	font-style: normal;
	text-decoration: none;
	color: #717529;
	margin-bottom: 3px;
}			
DT	
{
	margin-top: 15px;
	margin-bottom: 3px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: 700;
	font-style: normal;
	text-decoration: none;
	word-spacing: normal;
	letter-spacing: normal;
	text-transform:	none;
	padding-left: 0px;
}
a.dt
{
	color: #717529;
	font-size: 10pt;
}
dd
{
	margin-left: 5px;
	font-size: 9px;
	overflow: hidden;
    FONT-FAMILY: Verdana;
    margin-bottom: 5px;
}
A
{
	font-weight: bold;
	color: #6D7028;
	font-family: verdana;
}
A:hover
{
    font-weight: bold;
    color: #003300;
    font-family: verdana;
    text-decoration: underline;
}
image.thumbnail
{
    margin: 0px;
    border: none;
}
.thumbnail img
{
    border: 1px silver outset;
    background-color: #dddddd;
    width: 40px;
    height: 40px;
    background-image: url(images/thumbbg.gif);
}
#pagefooter
{
    width: 100%;
    height: 66px;
    padding: 20px 10px 10px 10px;
    clear: both;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    text-align: left;
    vertical-align: middle;
}
select, input
{
	font-size: 10px;
}
.checkbox, .checkbox input, .checkbox span
{
	background: white;
	border: none;
}
.formline
{
    padding-top: 4px;
    padding-bottom: 2px;
    clear: both;
}
.leftfloat
{
	float: left;
	width: 130px;
}
.rightfloat
{
	width: 480px;
}
.leftfloatattribute
{
	float: left;
	width: 100px;
}
.rightfloatattribute
{
	width: 220px;
}
.userpicture
{
    padding-top: 5px;
	float: left;
	width: 100px;
}
.userattributes
{
	width: 400px;
}
select, input
{
	font-size: 10px;
}
input
{
	font-size: 9pt;
 	padding: 1px;
 	border: 1px #A5A2A2 solid;
}
textarea
{
 	padding: 0px;
}
.checkbox, .checkbox input, .checkbox span
{
	background: white;
	border: none;
}
abbr
{
    border-bottom: 1px black dotted;
}
.watermarked
{
    color: #28A2CA;
    text-align: left;
    font-style: italic;
}

/* for form messages */

.info
{
    font-weight: bold;
    padding: 5px;
    background-color: #FEF39A;
}
.warning
{
    font-weight: bold;
    padding: 5px;
    background-color: #FFED51;
    border: 1px Red solid;
    
}
.required
{
    color: Red;
    font-family: Arial;
    font-size: 13px;
}
.progress
{
    font-size: 1.1em;
    font-weight: bold;
    background: silver;
    color: White;
    padding: 3px;
}
#popup 
{
    position: absolute;
    left: 0px;
    right: 0px;
    display: none;
    width: 220px;
    border-top: 1px #F7E300 solid; 
    border-left: 1px #F7E300 solid; 
    border-bottom: 1px #DC9613 solid; 
    border-right: 1px #DC9613 solid; 
    min-height: 70px;
    padding: 5px;
    background-color: #FFFEE7;
    cursor: pointer;
    z-index: 3;
    text-align: left;
}
#popup #top  
{
    width: 220px;
    padding-bottom: 2px;
    border-bottom: 1px #DC9613 dotted;
    margin-bottom: 2px;
    height: 15px;
}
#popup #expando
{
    font-style: italic;
}
#popup h2 
{
    color: #DC9613;
    font-size: 9pt;
    float: left;
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
    width: 200px;
    height: 14px;
    overflow: hidden;
    border: none;
}
#popup #dismiss 
{
    font-family: Verdana;
    float: right;
    cursor: pointer;
    border: 1px silver outset;
    background: #E73A40;
    padding: 0px 3px 0px 3px;
    font-size: 8px;
    color: White;
    font-weight: bold;
    vertical-align: middle;
}
#popup #dismiss:hover
{
    border: 1px silver inset;
    background: #FD8D91;
}
#popup img
{
	border: 1px silver outset;
    margin: 0px;
    width: 60px;
	background-color: white;
	background-image: url(images/whitebg.gif);
    height: 60px;
}
#popup #popupbody 
{
    margin-top: 5px;
    clear: both;
}

#popup #photo
{
    float: left;
    margin-right: 5px;
    display: block;
}
#popup #text
{
    color: Black;
    font-size: 8pt;
    margin: 0px;
    padding: 0px;
    text-align: left;
    vertical-align: top;
    max-width: 220px;
    display: block;
}
#popup #textwide
{
    text-align: left;
    color: Black;
    font-size: 8pt;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
    width: 220px;
    display: block; 
}
#popup .btns
{
    margin-top: 10px;
}
.pinicon
{
    margin-top: 6px;
    margin-left: 6px;
}
.formline
{
    padding-top: 4px;
    padding-bottom: 2px;
    clear: both;
}
.leftfloat
{
	float: left;
	width: 130px;
}
.rightfloat
{
	width: 480px;
}
.summarygrid
{
    width: 95%;
    border: 1px solid silver;
}
.inputform
{
    border: 1px solid silver;
}
.headerrow
{
    background-color: Navy;
    color: White;
}
.altrow
{
    background-color: Silver;
}
.editrow
{
    background-color: yellow;
}
#myMap
{
    background: #EFFFE4;
    margin: 1px;
    border: 1px solid #717529;
}
#myMap em
{
    font-size: 20pt;
    font-weight: bold;
    text-align: center;
    margin-top: 240px;
    display: block;
    color: #69815A
}
#menu
{
    font-size: 8pt;
    float: left;
    width: 200px;
    margin: 0px;
    padding: 5px 0px 10px 0px;
}
#menu ul
{
    padding: 0px;
    margin: 2px 3px 2px 2px;
}
.region
{
    list-style: none;
    margin: 0px 0px 0px 0px;
    font-weight: bold;
}
.region a
{
    font-weight: bold;
}
.country 
{
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding-bottom: 2px;
    font-weight: normal;
    font-style: italic;
}
.country a
{
    font-weight: normal;
}

.country li
{
    padding-bottom: 2px;
    padding-left: 5px;
}
.area
{
    list-style: none;
    margin: 0px 0px 0px 0px;
    font-weight: normal;
    font-style: normal;

}
.menu li
{
   padding-left: 5px;
}
.borderTopLeftBtn
{
    background-image: url("images/buttons/enquiry/EnquiryLeftTopCornerButton.gif");
    background-position: bottom right;
    background-repeat: no-repeat;
    height: 13px;
    width: 13px;
}
.borderTopBtn
{
    background-image: url("images/buttons/enquiry/BorderTopButton.gif");
    background-repeat: repeat-x;
    background-position: bottom;
    height: 13px;
}
.borderTopRighBtn
{
    background-image: url("images/buttons/enquiry/EnquiryRightTopCornerButton.gif");
    background-position: bottom left;
    background-repeat: no-repeat;
    height: 13px;
    width: 13px;
}
.borderLeftBtn
{
    background-image: url("images/buttons/enquiry/BorderLeftButton.gif");
    background-repeat: repeat-y;
    background-position: right;
    width: 13px;
}
.middleBtn
{
    background-color: #666633;
    color: #f7931d;
    font-weight: bold;
    font-size: small;
    text-align: center;
}
.borderRightBtn
{
    background-image: url("images/buttons/enquiry/BorderRightButton.gif");
    background-repeat: repeat-y;
    background-position: left;
    width: 13px;
}
.borderBottomLeftBtn
{
    background-image: url("images/buttons/enquiry/EnquiryLeftBottomCornerButton.gif");
    background-position: top right;
    background-repeat: no-repeat;
    height: 13px;
    width: 13px;
}
.borderBottomBtn
{
    background-image: url("images/buttons/enquiry/BorderBottomButton.gif");
    background-repeat: repeat-x;
    background-position: top;
    height: 13px;
}
.borderBottomRightBtn
{
    background-image: url("images/buttons/enquiry/EnquiryRightBottomCornerButton.gif");
    background-position: top left;
    background-repeat: no-repeat;
    height: 13px;
    width: 13px;
}
#expandBtnMainDiv
{
    position: absolute;
    width: auto;
    height: auto;
}
#btnContentsDiv
{
    overflow:hidden !important;
}
#btnContentsInnerDiv
{
    width: 0px;
    height: 0px;
}
#enquiryDiv
{
    position: absolute;
    z-index: 2;
    left: 204px;
    top: 160px;
    width: 100%;
    background-color: Transparent;
}
#maincontent
{
    position: absolute;
    z-index: 0;
    left: 204px;
    top: 210px;
    width: 695px;
    padding: 0px;
}
#maincontent p
{
    padding: 5px;
}
#maincontent .text
{
    margin: 0px 5px 0px 5px;
}
 #maincontent .areaslist
{
    display: inline;
    margin: 0px;
}
#maincontent .areaslist li
{
    display: inline;
    padding-right: 5px;
}
.nearbyareaslist
{
    display: inline;
    margin: 0px;
}
.nearbyareaslist li
{
    display: inline;
    padding-right: 5px;
}

/*

menu stuff from SR

*/

#topmenu 
{
    position: absolute;
    top: 100px;
    right: 20px;
	margin: 0px  0px 15px 0px;
	padding: 5px 0px 5px 10px;
}
#topmenu li 
{
    margin: 0px;
    list-style-type: none;
    display: inline-block;
    height: 30px;
  	width: 90px;
    background-image: url(http://routes.safarimappers.com/images1/btnyellow.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    float: left;
	text-align: center;
	vertical-align: middle;
	padding-top: 7px;
}
#topmenu  .spacer 
{
    margin: 0px 0px 0px 0px;
}
#topmenu a, #topmenu a:visited 
{
	color: #6D7028;
	margin: 10px 5px 0px 5px;
	text-decoration: none;
	margin-left: 1px;
}
#topmenu a:hover 
{
	text-decoration: underline;

}
#topmenu li.yellow
{
    background-image: url(http://routes.safarimappers.com/images1/btnyellow.png);
}
#topmenu li.green
{
    background-image: url(http://routes.safarimappers.com/images1/btngreen.png);
}
#topmenu li.brown
{
    background-image: url(http://routes.safarimappers.com/images1/btnbrown.png);
}
#topmenu li.pink
{
    background-image: url(http://routes.safarimappers.com/images1/btnpink.png);
}
#topmenu li.orange
{
    background-image: url(http://routes.safarimappers.com/images1/btnorange.png);
}

/* use the nice version for non IE6 by using selectors */

#topmenu > li
{
    background-image: url(http://routes.safarimappers.com/images1/btnyellow24bit.png);
}

#topmenu > li.yellow
{
    background-image: url(http://routes.safarimappers.com/images1/btnyellow24bit.png);
}
#topmenu > li.green
{
    background-image: url(http://routes.safarimappers.com/images1/btngreen24bit.png);
}
#topmenu > li.brown
{
    background-image: url(http://routes.safarimappers.com/images1/btnbrown24bit.png);
}
#topmenu > li.pink
{
    background-image: url(http://routes.safarimappers.com/images1/btnpink24bit.png);
}
#topmenu > li.orange
{
    background-image: url(http://routes.safarimappers.com/images1/btnorange24bit.png);
}

/* css2 hover stuff */

#topmenu > li.yellow:hover
{
    background-image: url(http://routes.safarimappers.com/images1/btnyellow24biton.png);
}
#topmenu > li.green:hover
{
    background-image: url(http://routes.safarimappers.com/images1/btngreen24biton.png);
}
#topmenu > li.brown:hover
{
    background-image: url(http://routes.safarimappers.com/images1/btnbrown24biton.png);
}
#topmenu > li.pink:hover
{
    background-image: url(http://routes.safarimappers.com/images1/btnpink24biton.png);
}
#topmenu > li.orange:hover
{
    background-image: url(http://routes.safarimappers.com/images1/btnorange24biton.png);
}