/*    Stylesheet for WPDFD Browser Stats December 2003    */


/*       Overall chart div      */

#chart {
	color: white;
	background-color: transparent;
	font-size: 11px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	line-height: 16px;
	text-align: center;
	float: left;
	visibility: visible;
	display: block;
	position: relative;
	width: 498px;
	height: 270px
	}
	
#chartinset {
	background-color: transparent;
	float: left;
	visibility: visible;
	display: block;
	position: relative;
	width: 150px;
	height: 270px
	}
	
	
.chartTitle {
	font-size: 11px;
	font-weight: bold;
	font-family: Verdana, Geneva, Arial, sans-serif;
	line-height: 16px;
	color: #c09;
	background-color: transparent;
	text-align: center;
	visibility: visible;
	position: relative;
	display: block;
	height: 30px;
	width: auto;
	}
	
.headers {
	color: white;
	font-weight: bold;
	text-align: center
	}

.horz {
	clear: both;
	background-color: transparent;
	line-height: 16px;
	text-align: center;
	visibility: visible;
	position: relative;
	display: block;
	height: 20px;
	width:auto;
	}
	
	
	
/*     the chart colour key along the bottom      */	
	
.keysp {
	float:left;
	width: 30px;
	height: 14px
	}
	
.keyswatch {
	border-style: solid;
	border-width: 1px;
	border-color: #99c #e6e6ff #e6e6ff #99c;
	float:left;
	width: 20px;
	height: 14px
	}
	
.keytext	{
	color: #333366;
	font-size: 9px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	float:left;
	text-align: left;
	margin-left:6px;
	width: 48px;
	height: 16px;
	background-color: transparent
	}
	
	
/*      Windows Chart      */ 
	
#pcbg {
	background-image: url(./images/bluegrad.jpg);
	background-repeat: repeat-x;
	text-align: center;
	visibility: visible;
	margin-right: 5px;
	margin-left: 5px;
	position: relative;
	width: 150px;
	height: 196px;
	float: left;
	border-style: solid;
	border-width: 1px;
	border-color: #5f4a94 #e6e8ff #e6e8ff #5f4a94
	}
 

.ChartLilac {
	background-color: #00e;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 20px;
	width: 30px;
	height: 169px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #9cf #06f #b3daff #b3daff;
	border-color: #aaf #009 #000 #99f
	}

	
.ChartRed {
	background-color: #e6007c;
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 35px;
	width: 30px;
	height: 57px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #ff80ff #9a0053 #000 #ff80ff
	}
	
.ChartLightBlue {
	background-color: #39f;
	position: absolute;
	z-index: 3;
	bottom: 0;
	left: 50px;
	width: 30px;
	height: 31px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #9cf #06f #000 #b3daff
	}
	
.ChartYellow {
	background-color: #e6d000;
	position: absolute;
	z-index: 4;
	bottom: 0;
	left: 65px;
	width: 30px;
	height: 18px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #ffec35 #9a8c00 #000 #ffec35
	}
	
.ChartPurple {
	background-color: #6900d4;
	position: absolute;
	z-index: 7;
	bottom: 0;
	left: 80px;
	width: 30px;
	height: 5px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #b3b3ff #46008e #000 #b3b3ff
	}

.ChartDarkGrey {
	background-color: #808080;
	position: absolute;
	z-index: 7;
	bottom: 0;
	left: 80px;
	width: 30px;
	height: 5px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #b3b3ff #46008e #000 #b3b3ff
	}	

.ChartGreen {
	background-color: green;
	position: absolute;
	z-index: 7;
	bottom: 0;
	left: 80px;
	width: 30px;
	height: 5px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #b3b3ff #46008e #000 #b3b3ff
	}
	
/*         Mac Chart         */
	
#macbg {
	background-image: url(../img/greengrad.jpg);
	background-repeat: repeat-x;
	text-align: center;
	visibility: visible;
	margin-right: 5px;
	margin-left: 5px;
	position: relative;
	width: 150px;
	height: 196px;
	float: left;
	border-style: solid;
	border-width: 2px;
	border-color: #060 #cfc #cfc #060
	}


.Safari {
	background-color: #0f0;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 20px;
	width: 30px;
	height: 94px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #9cf #06f #000 #9cf
	}
	
.IE5m {
	background-color: #39f;
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 35px;
	width: 30px;
	height: 36px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #9cf #06f #000 #b3daff
	}


.Mozillam {
	background-color: #e6007c;
	position: absolute;
	z-index: 4;
	bottom: 0;
	left: 50px;
	width: 30px;
	height: 21px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #ff80ff #9a0053 #000 #ff80ff
	}
	
.Otherm {
	background-color: #6900d4;
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 65px;
	width: 30px;
	height: 5px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #b3b3ff #46008e #000 #b3b3ff
	}


.Operam {
	background-color: #e6d000;
	position: absolute;
	z-index: 7;
	bottom: 0;
	left: 80px;
	width: 30px;
	height: 2px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #ffec35 #9a8c00 #000 #ffec35
	}


/*        Linux/Unix Chart         */

#unixbg {
	background-image: url(../img/magentagrad.jpg);
	background-repeat: repeat-x;
	text-align: center;
	visibility: visible;
	position: relative;
	margin-right: 5px;
	margin-left: 5px;
	width: 150px;
	height: 196px;
	float: left;
	border-style: solid;
	border-width: 2px;
	border-color: #603 #ffe6ff #ffe6ff #603
	}
	 

.Mozillau {
	background-color: #e6007c;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 35px;
	width: 30px;
	height: 64px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #ff80ff #9a0053 #000 #ff80ff
	}

.Otheru {
	background-color: #6900d4;
	position: absolute;
	z-index: 4;
	bottom: 0;
	left: 50px;
	width: 30px;
	height: 11px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #b3b3ff #46008e #000 #b3b3ff
	}
	
.Operau {
	background-color: #e6d000;
	position: absolute;
	z-index: 7;
	bottom: 0;
	left: 65px;
	width: 30px;
	height: 10px;
	border-style: solid solid none;
	border-width: 2px 2px 0;
	border-color: #ffec35 #9a8c00 #000 #ffec35
	}
	
	
/*    other examples     */	
	
	
#smallchart  { 
	background-image: url(../img/grid50.gif); 
	background-repeat: repeat; 
	visibility: visible; 
	width: 121px; 
	height: 121px; 
	float: right 
	}
	
	
#bluebar { background-image: url(../img/bluebar.gif);
	background-repeat: repeat-y;
	margin-right; 0px;
	visibility: visible;
	width: 41px;
	height: 80px;
	margin-top: 40px;
	float: right
	}
	
#greenbar { background-image: url(../img/greenbar.gif);
	background-repeat: repeat-y;
	margin-right; 0px;
	visibility: visible;
	width: 30px;
	height: 100px;
	margin-top: 20px;
	float: right
	}
	
#redbar { background-image: url(../img/redbar.gif);
	background-repeat: repeat-y;
	margin-right; 0px;
	visibility: visible;
	width: 30px;
	height: 60px;
	margin-top: 60px;
	float: right
	}
	
	
#buildingchart{
	background-image: url(../img/grid10.gif);
	background-repeat: repeat; 
	visibility: visible; 
	width: 220px; 
	height: 121px; 
	float: right 
	}
	
#buildingscale{
	visibility: visible; 
	height: 121px; 
	text-align: right;
	font-size: xx-small;
	line-height: 10px;
	color: #c96;
	margin-right: 5px;
	width: 25px;
	float: right 
	}

#illubar1  
	{
	background-image: url(../img/bld4.gif);
	background-repeat: repeat-y;
	visibility: visible;
	margin-top: 50px;
	margin-right: 10px;
	width: 57px;
	height: 70px;
	float: right
	}

	
#illubar2 { background-image: url(../img/bld3.gif);
	background-repeat: repeat-y;
	margin-right; 10px;
	visibility: visible;
	width: 47px;
	height: 98px;
	margin-top: 22px;
	margin-right: 10px;
	float: right
	}
	
#illubar3 { background-image: url(../img/bld5.gif);
	background-repeat: repeat-y;
	margin-right; 0px;
	visibility: visible;
	width: 55px;
	height: 84px;
	margin-top: 36px;
	margin-right: 16px;
	float: right
	}