/*  This style sheet (stylesP1) is for the main page of the Crystal Computer Concepts Site            */
body {
	margin: 0px;
	padding: 0px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
}

hr  {
	color: #000000;
	background-color: #000000;
	height: 4px;
}

/* This seeting removes the underline from the hyper-text reference link.  */
a {	
	font-weight: bold;
	color: #6666FF;
	text-decoration: none;
}

/* The following code creates a hovering effect over the links.    */
	

a:hover {
	background: yellow; color: #000000;
}
a:visited {
	color: #0000FF;	
}
/* NOTE: This setting is designed to eliminate the all but 20px of space around the edges of the window.  Also, the POSITON 
property is set to RELATIVE without specific position values to ensure that child elements are positioned within the area of the 
div layout element. */

#layout {
	
	
	padding: 5px;
	margin: 25px;
	border: 5px solid #000000; 
	position: relative;
	background-color: rgb(255,102,153);
}



#imagehead {
	   text-align: center;  		   	    
}

#pagetitle {
	serif
	padding: 10px;
	background-color: #FFCC66;
	text-align: center;
	margin-right: 25px;
	margin-left: 25px;
	border: 5px dashed black;
}

/* This style uses absolute positioning to move the
navigation section out of the normal flow of content
a position it to near the top  of the imagehead.
An absolute position places an element at defined coordinates within
its parent element.  In most cases, the parent WINDOW is the document 
WINDOW itself, so absolute coordinates refer to the coordinates
within the window */

#navigation1 {
	color: #FFFFFF;
	background-color: rgb(255,103,153);
	font-size: 150%;
	position: absolute; top: 200px; left: 50px;  
		
}

#navigation2 {
	color: #FFFFFF;
	background-color: rgb(255,103,153);
	font-size: 150%;
	position: absolute; top: 200px; right: 50px;
		
}
		

#content {
	padding: 15px;
	background-color: #FFFFF0;
	margin-right: 50px;
	
}
#content h2 {
		text-align: center; color: #000000;   

}
/* Superceds prvious link styles for content logical division .  */

#content h2 a {
		color: #000000; text-decoration: underline;
}

#content h3 a {
		color: #000000; text-decoration: underline;
}
#content h4 a {
		color: #000000; text-decoration: underline;
}
#content p a {
		color: #000000; text-decoration: underline;
}
#content h4 {
		text-align: center;
		color: #0000FF;
}


.floatright {
	width: 200px;
	
	float: right;
	background-color: #FFFFFF;
	margin: 0px 0px 20px 20px;
	padding: 10px;
	border: 1px dotted #000000;
}

#listproduct {
		margin-left: 250px
}
#listmiddle {
			text-align: center;
}

#listmiddle ul {
		text-align: left;
		margin-left: 450px;
}

.floatleft {
	width: 200px;
	
	float: left;
	background-color: #FFCC66;;
	margin: 0px 50px 20px 0px;
	padding: 1px;
	border: 1px dotted #000000;
	font-weight: strong;
}
h1 {
	font-family: "Courier New", Courier, monospace;
}

address {
		text-align: center; font-variant: small-caps; font-style: cursive; color: #FF0000; 
}

/* Div CSS  */
/* Element division pagedirection is to display when both margins are clear */
#pagedirection {
	text-align: right;
	clear: right;
	clear: left;
}

#pagedirection img {
		border-width: 0px;
		padding: 0px 10px 0px 10px
}

/* Element division header is to display when both margins are clear */
#header {
	text-align: right;
	clear: right;
	clear: left;
}