/* 
STYLE SHEET FOR OLDCOMPUTERS.CO.ZA WEBSITE 
CREATED BY TIMOTHY VENN 
JUNE 2009 

BASIC NOTES AND RULES FOR THIS STYLESHEET

WHITE 
-----
GENERAL TEXT, DATES

CYAN
-------
HEADERS, SITE TITLE, DISCLAIMERS

MAGENTA
-------
CLICKABLE ITEMS

*/
/* 
GREEN #00AA00 / #55FF55
RED #AA0000 / #55FFFF
BROWN #AA5500 / #FFFFFF

WHITE #FFFFFF
CYAN #55FFFF
MAGENTA #FF55FF

/*************************************** GENERAL SITE ********************************/
/* MAIN BODY */
span.chromeblack 
{ 
	display : block; 
	position : absolute; 
	width : 1px;
       	height : 100%; 
	top : 0px; 
	left : 0px;
	background-color : #000; 
}

body 
{
			font-family : arial;
			font-size : 10pt;
			color : #FFF;
			background-color : #000;
			margin : 0;
			padding : 0;
}
/* DATE HIGHLIGHT */
iframe.ringframe
{
			width : 100%;
			background-color : #000;	
}
font.datehighlight
{
			color : #FFFFFF;
}
/* HIGHLIGHT */
font.highlight
{
			color : #55FFFF;
}
/* UNDERLINE HIGHLIGHT */
u.highlight
{
			color : #55FFFF;
}
font.althighlight
{
			color : #FF55FF;
}
/* TITLE FONT */
font.title
{
			color : #55FFFF;
}
/* ACTIVE LINKS */
a:link  
{
			color : #FFF;
			text-decoration : none;
			outline : none;
}
/* HIGHTLIGHT */
a.althighlight
{
			color : #FF55FF;
			text-decoration : none;
			outline : none;
}
/* ARTICLE */
a.article
{
			background-color : #303030 ;
}
/* VISITED LINKS */
a:visited   
{	
			color : #FFF;
			outline : none;
			text-decoration : none;
}
/* ACTIVE LINK */
a:active 
{	
			outline : none;
			color : #FFF;
			text-decoration : none;
}
/* ACTIVE LINKS */
a.selected:link
{
			outline : none;
			color : #FFF;
			text-decoration : none;
}
/* RJS LOADING INDICATOR */
div.loading
{
			position : absolute;
			background-image : URL('/siteimages/diskdrive.jpg');
			background-repeat : no-repeat;
/*			right : 142px;*/
			left : 500px;
			width : 70px;
			height : 40px;
			top : 9px;
}

div.loadingred
{
			position : absolute;
			background-image : URL('/siteimages/diskdrivered.jpg');
			background-repeat : no-repeat;
/*			right : 142px;*/
			left : 500px;
			width : 70px;
			height : 40px;
			top : 9px;
}


/* RJS LOADING INDICATOR */
div.loadingorig
{
			position : absolute;
			background-image : URL('/siteimages/loading.gif');
			background-repeat : no-repeat;
			right : 142px;
			width : 20px;
			top : 23px;
}

/* IMAGE MOUSE OVER */
img.mouseover
{
			cursor : pointer;
}
img
{
	border : solid 0px;
}
/* HEADER FOR FRAMES */

/* DIV MAIN ARTICLE */
div.mainarticle
{
		
}
div.header 
{
			font-variant : small-caps;
			font-weight : bold;
			text-align : center;
			color : #55FFFF;
			background-image : URL('/siteimages/gradient3.jpg');
			/*background-color : #00CC00;*/
}
div.logo
{
			position : absolute;
			top : 0px;
			left : 1px;
}
div.title
{
			position : absolute;
			top : 50px;
			left : 0px;
			width : 500px;
			text-align : center;
}
/* FRAME */
div.frame
{   	 	
			border-bottom : 2px solid #606060;
			border-right : 2px solid #404040;
			border-left : 2px solid #404040;
			
		/*	border : 1px solid #101010;*/
       		margin : 0 auto;
	       	padding : 0px; /* MOD THIS TO ADD A SPACE TO THE HEADER */
	       	width : 95%;
	       	background-color : #303030 ;
	  		/*  	background-image : URL('/siteimages/screenlines.png');*/
}

div.blankframe
{   	 	
		border : 0px solid;
       		margin : 0 auto;
	       	width : 95%;
}


/* MENU FRAME */
div.menuframe
{   	 	
		/*border : 0px solid #FF55FF;*/
		/*border : 1px solid #303030;*/
		border-bottom : 2px solid #606060;
                border-right : 2px solid #404040;
                border-left : 2px solid #404040;

       		margin : 0 auto;
	       	padding : 0px; /* MOD THIS TO ADD A SPACE TO THE HEADER */
	       	width : 90%;
	       	color : #FFFFFF;
	       	/*background-image : URL('/siteimages/screenlines.png');*/
	       	background-color : #303030 ;
}

/* CONTENT */
div.framecontent
{
			margin : 5px;
			background-color : #303030 ;
}
/* BY LETTER LISTING */
div.listing
{

}

/* SITE MENU LINE */
td.sitemenuline
{
			font-variant : small-caps;
			font-weight : bold;
			text-align : center;
			
}
/* SITE ABOUT DIV */
div.siteabout
{

}
/* SITE VERSION */
div.siteversion
{
	width : 100%;
	text-align : right;
}
/* SITE WANTED DIV */
div.sitewanted
{

}
/* SITE CONTACT DIV */
div.sitecontact
{

}

/* LIST ALT COLOURS FOR EASY READING */
td.listhighlight
{
	background : #404040;
}
td.listhighlightalt
{
	background : #303030;
}
/* SEPARATION LINE */
hr.separationline
{
	color : #303030;
	background-color : #303030;
	height : 0px;
	border : 1px solid #404040;
}
/*************************************** MAIN PAGE ********************************/
/* HEADER DIV */
div.siteheader
{
			background-image : url('/siteimages/gradient.jpg');
			height : 77px;
			color : #55FFFF;
			z-index : 10;
			position : fixed; 
			/*position : absolute;*/
			top : 0px;
			left : 0px;
			right : 0px;
}	
/* HEADER TABLE */
table.siteheader
{
			padding : 0;
			border-spacing: 0; 
			width : 100%;
}
/* SITE LEFT DIV */
div.siteleft
{

			position : absolute;
			top : 80px;
			left : 5px;
  			width: 200px;
			background-color : #000;

}
/* SITE RIGHT DIV */
div.siteright
{

			position : absolute;
			top : 80px;
			left : 205px;
			right : 5px;
			background-color : #000;
}
/* MENU ITEM DIV */
div.menuitem
{
			font-weight : bold;
			text-align : center;
			margin : 0 auto;
			cursor : pointer;
}
/* CENTER MAIN DIV */
div.centermain
{
	position : absolute;
	top : 80px;
	left : 0px;
	overflow-y:scroll;	
	right : 0px;
	bottom : 0px;
}
/* CONTAINER DIV */
div.sitecontainer
{
			
}
/* WRAPPER DIV */
div.sitewrapper
{
			float : left;
			width : 100%;
}
/* MENU PLATFORM DIV */
div.menuplatform
{		
			font-weight : bold;
			text-align : center;
			cursor : pointer;
}
/* ARTICLE CONTENT */
div.articlecontent
{
		
}
/* ARTICLE FOOTER */
p.articlefooter
{
			color : #FFF;	
}
/* ARTICLE DATE */
td.articledate
{
			color : #FF55FF;	
}
/* INPUT SEARCH */
input.search 
{
			background-color: #303030 ;
			color : #FFF;
			width : 100px;
			vertical-align : middle;
			border-style: none;
			
}
/* SEARCH IMAGE */
input.searchicon
{
	width : 32px;
	height : 32px;
	border : solid 0px;
	vertical-align : middle;
}
/* SEARCH GLASS */
div.searchglass
{
			position : absolute;
			/*right : 1px;*/
			right : 40px;
			top : 17px;
}
/* RSS FEEDER DIV */
div.rssfeeder
{
			position : absolute;
			/*right : 30px;*/
			right : 2px;
			top : 17px;
}
/* SEARCH DIV */
div.search
{
			position : absolute;
			/*right : 30px;*/
			right : 80px;
			top : 22px;
			font-variant : small-caps;
			vertical-align : middle;
			border : 1px solid #55FFFF;
	       		background-color : #303030 ;
	       	width : 102px;

}
/*************************************** SHOW ITEM ********************************/
/*
/* ITEM VIEW LEFT */
div.itemviewleft
{
	width : 80%;
}
/* SCREENSHOTS */
/* SHOW ITEM MAIN IMAGE */
div.showitemmainimage
{
			text-align : center;
			width : 50%;
}
div.showitemmainimagesingle
{
			text-align : center;
}
div.itemrelated
{
			width : 100%;
			text-align : center;
}
div.screenshots
{
	width : 50%;
	float : right;
}
/* ITEM VIEW RIGHT */
div.itemviewright
{
	width : 20%;
	float : right;
}

a.itemcomment
{

			font-variant : small-caps;
			color : #FF55FF;
}
div.itemview
{
			display : none;
			margin-left:180px;
}
/* SHOW ITEM TABLE */
table.showitem
{
			padding : 0;
			border-spacing: 0; 
			text-align : center;
			margin-left : auto;
			margin-right : auto;
			border-spacing : 10px;
}
/* SHOW ITEM ROW LABELS */
td.showitemlabel
{
			color : #55FFFF;
			font-weight : bold;
			text-align : right;
			white-space: nowrap;
			width : 20%;
}
/* SHOW ITEM CONTENT LABELS */
td.showitemcontent
{
			text-align : left;
			width : 80%;
}
/* SHOW ITEM DISCLAIMER */
div.showitemdisclaimer
{
			text-align : center;
			width : 90%;
			margin : 0 auto;
			font-size : 9pt;
			color : #55FFFF;
}

/************************************** SHOW LISTS ********************************/
/* LIST HEADER */
tr.listheader
{
			font-weight : bold;
			text-align : left;
			color : #55FFFF; 
}
/* LIST LINE ITEM */
tr.listlineitem
{
}
/* LIST FOOTER */
td.listfooter
{
			font-weight : bold;
}
/* LIST TABLE */
table.listtable
{
			padding : 0;
			border-spacing: 0;
			margin-left : auto;
			margin-right : auto;
			border-spacing : 0px;
}
/* BLURB HEADER */
p.blurbheader 
{
			color : #55FFFF;
}
/* BLURB */
p.blurb
{
}
/************************************** SHOW LISTS ********************************/
/* CONTACT INPUT */
input.contactinput
{

	width : 400px;

}
/* CONTACT AREA */
textarea.contactarea
{

	width : 400px;

}

/*************************************** ADMIN ***********************************/
/* BLACK ADMIN LIST BORDER */
td.adminlist
{
	border-bottom : solid 1px #000;
}

/************ LIGHT BOX ****************/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #202020; width: 250px; height: 250px; margin: 0 auto; border-top : 1px solid #FF55FF;border-left : 1px solid #FF55FF;border-right : 1px solid #FF55FF; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../siteimages/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../siteimages/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 11pt ; background-color: #202020; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; border-bottom : 1px solid #FF55FF; border-left : 1px solid #FF55FF;border-right : 1px solid #FF55FF;}

#imageData{	padding:0 0px; color:  #55FFFF; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; margin-left : 0.7em; }	
#imageData #caption{ font-weight: bold; text-align:center;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; padding-right: 0.7em;outline: none;color : #FF55FF; font-weight : bold; text-align:right;}	 	

#overlay{ position: absolute; top: 0; left: 0; right:0; bottom: 0; z-index: 90; background-color: #000; }