/***********************************
 * HTML tags
 ***********************************/
html {
    color: #494949;
    background-color: #afafaf;
    word-spacing: 0.05em;
    letter-spacing: 0px;
}

body {
    color: #333333;
    font-family:  Tahoma, Arial, Helvetica, sans-serif;
	font-size: 13px;
    background-color: #afafaf;
    padding-top: 10px;
	line-height: 1.5em;
}

a {
    color: #4c78b2;
    text-decoration: none;
	padding: 0 2px;
}

    a:visited {
        color: #4c78b2;
        text-decoration: none;
    }
    
    a:hover {
        color: #2c5892;
        text-decoration: underline;
    }

	a.iconLink {
		margin-top: 4px;
		font-size: 100%;
		color: #4C78B2;
		padding: 4px 0 4px 22px;
		margin-bottom: 12px;
		text-decoration: none;
		width: 140px;
		line-height: 1.3em;
	}
		a.iconLink:hover {
			color: #c24322;
			text-decoration: underline;
		}
		
		a.iconLink.movie {
			background: #ffffff url(../images/movie-icon.gif) no-repeat scroll 0% 50%;
			padding-left: 22px;
		}

		a.iconLink.arrow {
			background: #ffffff url(../images/big-right.gif) no-repeat scroll 0% 50%;
			padding-left: 18px;
			width: 100%;
		}

img {
    border: 0 solid #ffffff;
}

/*
 * Heading Styles
 */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #445544;
    margin-bottom: 6px;
	line-height: 1.3em;
	overflow: hidden;
}

h1 {
    font-size: 2em;
}

	h1.pageTitle {
	    color: #c24322;
        padding: 15px 0 15px 0px;
	}

h2 {
    font-size: 1.8em;
	border-bottom: 1px solid #dae3b4;
	padding-bottom: .1em;
    margin-bottom: .1em;
}

h3, h3 a {
    font-size: 1.6em;
}

h4 {
    font-size: 1.4em;
}

h5 {
    font-size: 1.3em;
}

h6 {
    font-size: 1.1em;
}

div.radio, div.check {
	margin-bottom: 18px;
	display: block;
}

label {
}

	label.bold {
		font-weight: bold;
	}

	label.block {
		display: block;
		padding: 6px 0 4px 0;
	}

	label, .label {	
	}
	
	/* .label is typically used on a span or p tag to label a radio or checkbox group */
	label.preField, .label  {
		display: -moz-inline-box;
		display: inline-block;	
		width: expression('7em'); /* Min-width for IE6 */
		min-width: 7em;
		padding: 0 2px;
		margin: 0 4px 0 0;
		height: 26px;
	}
	
	.label { 
		display: block; 
		width: auto; 
	}

	label.postfield  {
		display: block;
		margin: -20px 4px -12px 20px;
	}
	
	label.long {
		display: block;
		margin: -20px 4px -12px 20px;
	}
	
p {
	margin-bottom: .5em;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

/*
 * Form styles
 */
input {
    font-size: 1em;
	word-spacing: 0;
	margin: 2px 0;
}

.radio input, .check input {
	height: 16px;
	vertical-align: middle;
}

	input.text, textarea, select {
		border-top:	2px solid #7C7C7C;
		border-right: 2px solid #C3C3C3;
		border-bottom: 2px solid #DDDDDD;
		border-left: 2px solid #C3C3C3;
		padding: .2em .4em .2em .4em;
	}

fieldset {
	border: 1px solid #dae3b4;
	padding: 12px 12px;
	margin-top: 12px;
}

legend {
	font-weight: bold;
	padding: 2px 8px;
}

/*
 * List styles
 */
ul, ol {
	margin-bottom: .5em;
}
ul.list, ol.list {
    padding: 0;
    margin-left: 1.3em;
}

ol.list {
	margin-left: 1.7em;
}
   ul.list li, ol.list li {
       padding-bottom: .3em;
   }

ul.list li {
    list-style: disc outside;
}
ol.list li {
	list-style: decimal outside;
}

ul.insideDot li {
    list-style: disc inside;
}

ul.menuList {
	border-bottom: 0px solid #cccccc;
	padding-top: .3em;
	padding-bottom: .3em;
	margin: 0;
}
	ul.menuList li {
		padding: 0;
		margin: 0;
		font-size: 110%;
		list-style: none outside;
	}

	ul.menuList li a {
		display: block;
		color: #444444;
		padding: 2px;
		padding-left: 6px;
		padding-right: 16px;
		text-decoration: none;
	}
		ul.menuList li a:hover {
			background-color: #e8f3bb;		
		}

		ul.menuList li a.selected {
			color: #ffffff;
			background: #b0c16a url(../images/closed-carat.gif ) no-repeat 98% 50%;
		}


table{
    width: 100%;
    vertical-align: middle;
    text-align: center;
}
    
    table th {
        font-size: 1em;
        font-weight: bold;
        text-align: center;
        padding-bottom: .4em;
    }
    
    table a, table a:visited, table a:hover {
    	text-decoration: none;
    }
    
    table th a, table th a:visited, table th a:hover {
    	color: #333333;
    }
    
    table .left {
        text-align: left;
    }

    table .right {
        text-align: right;
    }

    table tr.link {
    	cursor: pointer;
    }

/***********************************
 * ID's
 ***********************************/
#hd, #bd {margin-bottom:0em; clear: both; }

#bd {
    background-color: #ffffff;
	padding-left: 18px;
	padding-right: 13px;
	position: relative;
}

	#bd.home {
		padding-left: 0;
		padding-right: 0;
	}

#hd {
	position: relative;
    height: 60px;
    line-height: 0em;
    background-image: url("../images/sports/heading-background-green.gif");
    background-repeat: repeat-x;
}

#doc {
    margin:auto; text-align:left; /* leave unchanged */ 
    width: 76.92em;/* non-IE */ 
    *width: 75.09em;/* IE */ 
    min-width: 600px;/* optional but recommended */ 
}

    #doc div.section, #doc p, #doc div {
        line-height: 1.5em;
    }

#ft {
 	font-size: .85em;
	font-family: verdana;
	background-color: #adadad;
    color: #ffffff;
    padding-bottom: 1em;
    background-image: url("../images/template/bottom-corner-right.gif");
    background-repeat: no-repeat;
    background-position: top right;
}

    #ft .bottomCorner {
        background-color: #ffffff;
        width: 99%;
        height: 10px;
        margin: 0;
        margin-right: 10px;
        background-image: url("../images/template/bottom-corner-left.gif");
        background-repeat: no-repeat;
        background-position: bottom left;
    }

    #ft a {
        color: #ffffff;
		padding: 0;
    }

    #ft a:hover {
        color: #c24322;
        text-decoration: underline;
		background-color: transparent;
    }

    #ft ul, ul.hMenu {
        padding: 1.4em 0 0 1em;
    }

    #ft div ul li, ul.hMenu li {
        display: inline;
        padding-right: 1em;
    }

*html #hd {
    margin-bottom: -3px;
}

#headingLogo {
    line-height: 0em;
    float: left;
    width: 230px;
    padding: 15px 0 0 12px;
    margin: 0;
    background-image: url("../images/sports/heading-left-green.gif");
    background-position: top left;
    background-repeat: no-repeat;
}

#headingMenu, #headingStatus {
    font-size: 11px;
    font-weight: normal;
}

#headingStatus {
	position: absolute;
	top: 0px;
	right: 10px;
	text-align:right;
    width: 70%;
    padding-top: 8px;
    padding-right: 10px;
    color: #ffffff;
	line-height: 1em;
}

	#headingStatus a, #headingStatus a:visited {
	    color: #e7dd95;
	    padding-left: .2em;
	    padding-right: .2em;
	    text-decoration: none;
	}    

	#headingStatus a:hover {
	    color: #e7dd95;
	    text-decoration: underline;
	}


#topRightCorner {
    float: right;
    width: 12px;
	height: 60px;
    background-image: url("../images/sports/heading-right-green.gif");
    background-position: top right;
    background-repeat: no-repeat;
}

#headingMenu {
	position: absolute;
	top: 26px;
	* top: 22px;
	right: 6px;
    width: 75%;
    text-align: right;
    margin-top: .7em;
    * margin-top: .6em;
    margin-right: .2em;
}

	#headingMenu ul li {
        * margin-top: 3px;
        * padding-bottom: 3px;
        float: right;
        display: block;
		padding-right: 1em;
		padding-left: 1em;
        text-align: center;
    }

    #headingMenu a, #headingMenu a:visited {
        display: block;
        color: #dcffc1;
        line-height: 25px;
        * line-height: 25px;
        font-weight: bold;
		text-decoration: none;
		padding: 0;
    }

    #headingMenu a:hover {
        color: #ffffff;
        text-decoration: none;
		background-color: transparent;
    }

    #headingMenu ul li.selected,
    #headingMenu ul li.selected a,
    #headingMenu ul li.selected a:hover ,
    #headingMenu ul li.selected a:visited {
        color: #ffffff;
        font-weight: bold;
    }

/***********************************
 * Classes
 ***********************************/
.clr {
     clear: both;
}

/* over-ride the PhotoViewer CSS defaults */
.photoViewer-mask {
	opacity: 0.8;
}

/***********************************
 * Structure
 ***********************************/
.block {
    padding: 1em 1em 1em 1em;
}

	.block.gradient {
		background: transparent url(../images/sports/column-heading-gradient.gif) left top no-repeat;
	}

.section {
	display: block;
	height: 1%;
	margin: 0 0 16px 0;
}

/***********************************
 * Styles
 ***********************************/
.error, .red {
	color: red;
}

.urgent-message {
	clear: both;
	margin: 10px 0;
	font-size: 115%;
	border: 1px dashed #C24322;	
	background: #ffffff url(/images/icons/warning.png) no-repeat 10px center;
	text-align: left;
	padding: 10px 0 10px 52px;
	margin-left: 0;
	margin-right: 0;
	color: #cc0000;
}
		
	.urgent-message.info {
		background-image: url(/images/icons/info.png);
		border-color: #43C222;
		color: #448844;		
	}

.strikeThrough { 
	text-decoration: line-through; 
}

.evenColor {
    background-color: transparent;
}

.oddColor {
    background-color: #f8f8f8;
}

.ruled { 
	background:#e8f2fc;
}

	.yui-b.last .ruled { 
		background:#bbd5f0;
		color: #000000;
	}

/* class to hide an input field in a form to thwart spam-bots */
.emailExtra {
	display: none;
}

#headingStatus .userName {
    font-weight: bold;
}

.label {
    font-weight: bold;
    font-size: 1em;
    padding-right: .4em;
}

.yui-b.first {
	padding-top: .5em;
	padding-left: 1em;
}

.yui-b.last {
	font-size: .95em;
}

	.yui-b.last.gradient {
		position: relative;
/*	    height: 400px; */
	    background-image: url("../images/sports/green-gradient.gif");
	    background-repeat: repeat-x;

	    font-size: .9em;
	  	overflow: hidden;
	}

    .yui-b.last .content .block .heading{
        background-color: #d6d6d6;
        height: 2em;
    }

/*
 * news items
 */
.newsItem {
	padding-top: .8em;
	padding-bottom: .5em;
	border-bottom: 1px solid #f0f0f0;
}

	.newsItem ul {
	    list-style: disc outside;
	    padding-left: 1em;
	    margin-left: 1em;
	    margin-top: .5em;
	}

	.newsItem ul li {
	    list-style: disc outside;
	}
	
    .newsItem .title {
        font-size: 1.15em;
        font-weight: bold;
        color: #4e4e4e;
        padding-right: 1em;
    }

    .newsItem .subTitle {
        font-weight: bold;
        color: #C6401A;
        padding-top: .5em;
    }

    .newsItem .info {
        font-size: .8em;
        color: #4e4e4e;
        padding-bottom: .5em;
    }

	.newsItem .date {
        font-size: 1em;
        color: #4e4e4e;
        padding-bottom: .5em;
	}
	
    .newsItem .text {
    }
        .newsItem .text p {
            padding-top: .2em;
            padding-bottom: .5em;
        }

/* basic table format for a list of items */
table.list {
	margin-top: .5em;
	font-size: .9em;
}

	table.list thead {
		border-bottom: 1px solid #dddddd;
	}
	
		table.list thead th {
			text-align: left;
		}
		
			table.list thead th.right {
				text-align: right;
			}
		
	table.list td {
			line-height: 2.2em;
			border-bottom: 1px solid #e3e3e3;
			padding-left: .2em;
		}
	

.note {
	text-align: justify;
    border: 1px solid #dfdfdf;
    background-color: #f5f5f5;
    padding: 6px;
    margin: 1em 2em;
}

	.note:before {
	    content:"Note: ";
	    font-weight: bold;
	}

.smallIcon {
	padding-top: 0;
	padding-right: .1em;
}

.editActions {
	padding-top: 1em;;
	padding-left: 1em;
}
	.editActions form {
		display: inline;
	}
	
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
	background-color: inherit;
}

/* via css class selector */
#treeDiv a.ygtvlabel { 
	display: block;
	background-color: #f3f3f3;
}

	#treeDiv a.ygtvlabel:hover { 
		background-color: #ddddff;
	}

#treeDiv table {
	text-align: left;
}


/*****************************
 * popup dialogs
 *****************************/
.popup {
	display: none;
	visibility: hidden;
	position: absolute;
	width: 220px;
	padding: 10px;
	background-color: #f8f8f8;
	border: 2px solid #888888;
	z-index: 999;
	text-align: center;
}
        
	.popup .title {
		font-size: 1.2em;
		color: #c24322;
		font-weight: bold;
		border-bottom: 1px solid #dddddd;
		padding-bottom: 3px;
		margin-bottom: 6px;
	}
	
	.popup input, .popup button {
		margin-right: 16px;
	}

.overlay {
	display: none;
	visibility: hidden;
}

div.controls {
    float: right;
    text-align: right;
    padding-right: 8px;
	padding-top: 3px;
	width: 93%;
}

	div.hide {
		display: none;
	}
	
	div.controls form, .controls form {
	    display: inline;
		padding: 0;
		margin: 0;
	    margin-right: 5px;
		font-size: 0px;
	}
	
	div.controls a {
		margin: 0;
	    margin-right: 5px;
		font-size: 0px;
	}
	
		div.controls a.textControl {
			font-size: .9em;
		}	

.status {
	font-size: .85em;
	color: #666666;
}

div.collapsible {
	
}

	div.collapsible div.content {
	}
	
	div.collapsible div.content.closed {
		display: none;
	}

	div.collapsible .arrowDown {
	    background-position: 0% 50%;
	    background-repeat: no-repeat;
	    background-image: url("../images/gray-arrow-down.gif");
	}
	
	div.collapsible .arrowRight {
	    background-position: 0% 50%;
	    background-repeat: no-repeat;
	    background-image: url("../images/gray-arrow-right.gif");
	}
	
div.links {
	color: #aaaaaa;
}

div.links a {
	margin-right: .6em;
	margin-left: .6em;
}


.mask { 
	background-color:#000000;
	opacity: 0.75; 

}

/* Panel Skin CSS */
.panel-container.shadow .underlay { background-color:#777; }

/* Apply the border to the right side */
.panel { border:0px solid #ffffff; overflow:visible; background:transparent; }

/* Style the close icon */
.panel .close { top:8px; right:10px; height:12px; width:12px; }

/* Style the header with its associated corners */
.panel .hd { padding:0; border:none; background: url("../images/template/panel-blue-background.gif"); color:#FFF; height:30px; margin-left:8px; margin-right:8px; text-align:left; vertical-align:middle; overflow:visible; }
.panel .hd span { line-height:30px; vertical-align:middle; }
.panel .hd .tl { width:10px;height:30px; top:0px;left:0; background:transparent url("../images/template/panel-blue-left-corner.gif"); position:absolute; }
.panel .hd .tr { width:10px;height:30px; top:0px;right:0; background:transparent url("../images/template/panel-blue-right-corner.gif"); position:absolute; }

/* Style the body with the left border */
.panel .bd { overflow:hidden; padding:10px; border:none; background:#ffffff; margin:0 0px 0 0; }

/* Style the footer with the bottom corner images */
.panel .ft { background:#f3f3f3; font-size:11px; height:12px; padding:0px 10px; }
.panel .ft span { line-height:22px; vertical-align:middle; }
.panel .ft .bl { width:8px;height:12px; bottom:0;left:0; background:#f3f3f3; position:absolute; }
.panel .ft .br { width:8px;height:12px; bottom:0;right:0; background:#f3f3f3; position:absolute; }


div.levelLink {
	padding-top: 2em;
	text-align: center;
}
	
	div.levelLink a {
		text-decoration: none;
		color: #666666;
	}
	
	div.levelLink a span {
		display: block;
		text-align: right;
		padding-right: 1.6em;
		
	}
	
/*
 * CSS for dealing with print output
 */
.noprint {
}

@media print {
	.noprint {display: none}
}
	

/* BUTTONS 
 * from Particle Tree article "Rediscovering the Button Element"
 * http://particletree.com/features/rediscovering-the-button-element/
 */

.buttons {
	height: 32px;
}

	.buttons.large {
		height: 48px;
	}

	.buttons.small {
		height: 20px;
	}


.buttons a, .buttons a:visited, .buttons button, .buttons button:visited{
    display: block;
    float: left;
    margin: 0 7px 0 0;

    font-family: Tahoma, Arial, Verdana, sans-serif;		
	font-size: 11px;
    font-weight: bold;
    text-decoration: none;
	text-transform: uppercase;
		
    line-height: 120%;
    cursor:pointer;
    padding: 5px 8px 5px 8px; /* Links */
	margin: 4px 4px 4px 0;
	
	-webkit-border-radius: 8px; /* Safari prototype */
	-moz-border-radius: 8px; /* Gecko browsers */
	border-radius: 8px; /* Everything else - limited support at the moment */
}

.buttons img.spacer {
	float: left;
	margin-right: 8px;
}

.buttons.right a, .buttons.right button, .buttons.right img.spacer {
	float: right;
}

.buttons button {
    width: auto;
    overflow: visible;
    padding: 3px 8px 4px 8px; /* IE6 */
}

.buttons button[type] {
    padding: 3px 8px 3px 8px; /* Firefox */
    line-height: 17px; /* Safari */
}

*:first-child+html button[type] {
    padding: 2px 8px 2px 8px; /* IE7 */
}

*:first-child+html a {
    padding: 5px 8px 5px 8px; /* IE7 Links */
}

.buttons button img, .buttons a img{
    margin: 0 3px -3px 0 !important;
    padding: 0;
    border: none;
    width: 16px;
    height: 16px;
}

.buttons.large a, .buttons.large a:visited, .buttons.large button, .buttons.large button:visited{
	font-size: 18px;			
    padding: 5px 8px 4px 8px; /* Links */
}

	.buttons.large button {
	    width: auto;
	    overflow: visible;
	    padding: 3px 8px 2px 8px; /* IE6 */
	}

	.buttons.large button[type] {
	    padding: 3px 8px 3px 8px; /* Firefox */
	    line-height: 24px; /* Safari */
	}

	*:first-child+html .buttons.large button[type] {
	    padding: 1px 8px 1px 8px; /* IE7 type=submit*/
	}

	*:first-child+html .buttons.large a {
	    padding: 6px 8px 6px 8px; /* IE7 Links */
	}


	.buttons.large button img, .buttons.large a img {
		width: 32px;
		height: 32px;
	}

	.buttons.large a.icon, 
	.buttons.large a.icon:visited, 
	.buttons.large button.icon, 
	.buttons.large button.icon:visited{
		background-position: 1% 50%;
		background-repeat: no-repeat;
		padding-left: 48px;
	}
	
	*:first-child+html .buttons.large button.icon[type] {
	    padding-left: 48px; /* IE7 type=submit */
	}

	*:first-child+html .buttons.large a.icon {
		padding-left: 48px;
	}
	
	.buttons.large a.icon.check, 
	.buttons.large a.icon.check:visited, 
	.buttons.large button.icon.check, 
	.buttons.large button.icon.check:visited{
		background-image: url(../images/sports/check.png);
	}

	.buttons.large a.icon.delete, 
	.buttons.large a.icon.delete:visited, 
	.buttons.large button.icon.delete, 
	.buttons.large button.icon.delete:visited{
		background-image: url(../images/sports/delete.png);
	}
	
.buttons.small a, .buttons.small a:visited, .buttons.small button, .buttons.small button:visited{
	font-size:	9px;			
    line-height: 100%;
    padding: 5px 8px 6px 8px; /* Links */
}

	.buttons.small button {
	    width: auto;
	    overflow: visible;
	    padding: 4px 8px 4px 8px; /* IE6 Button */
	}

	.buttons.small button[type] {
	    padding: 3px 8px 3px 8px; /* Firefox */
	    line-height: 14px; /* Safari */
	}

	*:first-child+html .buttons.small button[type] {
	    padding: 1px 8px 1px 8px; /* IE7 */
	}

	*:first-child+html .buttons.small a {
	    padding: 5px 8px 6px 8px; /* IE7 Links */
	}

	.buttons a.icon, 
	.buttons a.icon:visited, 
	.buttons button.icon, 
	.buttons button.icon:visited{
		background-position: 1% 50%;
		background-repeat: no-repeat;
		padding-left: 22px;
	}
	
	.buttons a.icon.check, 
	.buttons a.icon.check:visited, 
	.buttons button.icon.check, 
	.buttons button.icon.check:visited{
		background-image: url(../images/sports/check-small.png);
	}

	.buttons a.icon.delete, 
	.buttons a.icon.delete:visited, 
	.buttons button.icon.delete, 
	.buttons button.icon.delete:visited{
		background-image: url(../images/sports/delete-small.png);
	}

/* Button colors */

/* Standard */
.buttons a, .buttons a:visited, .buttons button, .buttons button:visited{
    color: #555555;
    background-color: #f0f0f0;
    border: 2px solid #aaaaaa;
    border-top: 2px solid #cccccc;
    border-left: 2px solid #cccccc;
}

.buttons button:hover, .buttons a:hover{
    color:#222222;
    background-color: #cecece; /* #dff4ff; */
    border: 2px solid #cccccc;
}
.buttons a:active, .buttons button:active {
    color: #888888;
    background-color: #eeeeee; /* #6299c5; */
    border: 2px solid #dedede;
    border-top: 2px solid #aaaaaa;
    border-left: 2px solid #aaaaaa;
}

/* Dark */
.buttons button.dark, .buttons button.dark:visited, .buttons a.dark, .buttons a.dark:visited {
    color:#ffffff;
    background-color: #888888; /* #E6EFC2; */
    border: 2px solid #444444;
    border-top: 2px solid #666666;
    border-left: 2px solid #666666;
}

.buttons a.dark:hover, .buttons button.dark:hover {
    background-color: #444444; /* #E6EFC2; */
    color:#ffffff;
    border: 2px solid #444444;
}

.buttons a.dark:active, .buttons button.dark:active {
    background-color: #cccccc; /* #529214; */
    border: 2px solid #aaaaaa;
    border-top: 2px solid #999999;
    border-left: 2px solid #999999;
}


blockquote {
	margin: 0px 12px 30px 12px;
	padding: 8px;
	font-style: normal;
	text-align: right;
}
	blockquote.single {
		margin: 10px 0 20px 0;
	}

	blockquote p {
		padding: 10px 22px 0 22px;
		color: #444444;
		text-align: left;
		background: transparent url(../images/quoteOpen.png) left top no-repeat;
	}
	
	blockquote.single p {
		text-align: left;
		padding: 10px 18px 0 18x;
	}

blockquote cite {
	display: block;
	padding-bottom: 1em;
	color: #666666;
	background: transparent url(../images/quoteClose.png) right top no-repeat;
	padding-top: 22px;
	margin-top: -8px;
}	


/*
 * Sports My Tawala page CSS
 */
dl#projectList { }

	dl#projectList dt {
		font-size: 1.2em;
		font-weight: bold;
		border-bottom: 1px solid #cccccc;
		padding-bottom: 4px;
		margin-bottom: 4px;
	}

		dl#projectList dt a {
			color: #444444;
			text-decoration: none;
		}
	
			dl#projectList dt a:hover {
				color: #385f93;
			}
	
	dl#projectList dd {
		margin-left: 1em;
	}