/*
 *      Title		: Main CSS
 *      File		: /css/navCommon.css
 *      Copyright 	: 2010 cearo@www.cearocorp.com - Christiaan Rogiers
 *      Version		: 001        Build		: 010	DT	:	201004150935
 *      Purpose		: CSS for Main Index page of CeaRO_WEB  site
 *      Version Ctrl: git
 *      Editor		: Geany 0.18
 *      Platform	: Ubuntu Linux 9.10 - Apache 2.2.12 - mySQL 5.1
 *      			: phpMyAdmin 3.2.21 - WebMin 1.5    - PHP 
 */

/* Common Settings */
 
* 					/* initiation of all elements */
{
padding: 0px;
border: 0px;
margin: 0px;
font-family: Arial, Verdana, Sans-Serif;
}

html
{
font: 13px;
color:#000000;
width:100%;
border:0px solid #ffffff;
background-image: url("../images/dot2.png");
background-repeat:repeat;
}

ul
{
list-style-type:none;
}

/* Main Structure */

/* - Center Part between the outer left and right fill for wide screens */

#contentBodyCenter
{
text-align:center;
}

#contentBody         /* everything except the outer left and right fill for wide screens */
{
position: relative;
margin-left:auto;
margin-right:auto;
width:1000px;
text-align:left;
}

/* - Banner */

#banner 
{
position:relative;
left:0px;
top:0px;
color:#000000;
width:100%;
height:120px;
}

#logo                /* inside banner top left */
{
position:relative;
float: left;
margin: 8px;
}

#company			/* inside banner top left, right of logo */
{
position:relative;
float: left;
margin: 8px;
}

#bannerNav			/* inside banner top right, for Home, About Us and Contact Us */
{
position:relative;
float: right;
margin: 8px;
height:120px;
}

/* - Navigation columns left and right */

#leftNav			/* left navigation */
{
position:absolute;
left:0px;
top:0px;
color:#ffffff;
width:110px;
margin-right:120px;
padding:5px;
border:0px solid #ffffff;
}

#rightNav			/* right navigation */
{
position:absolute;
right:0px;
top:0px;
color:#000000;
width:110px;
padding:5px;
border:0px solid #ffffff;
}

/* Navigation Roll Overs */

a.navHome,a.navHomeNow {
	position:absolute;
	top:12px;
	right:331px;
	width:90px;
	height:90px;
	background: url("../images/Home.png");
	background-repeat:no-repeat;
}

a.navHome:link{
	background: url("../images/Home.png") 0 450px;
}

a.navHome:visited{
	background: url("../images/Home.png") 0 180px;
}

a.navHome:hover{
	background: url("../images/Home.png") 0 360px;
}

a.navHomeNow {
	background: url("../images/Home.png") 0 90px;
}

a.navHome:active{
	background: url("../images/Home.png") 0 270px;
}

a.navAboutUs, a.navAboutUsNow {
	position:absolute;
	right:129px;
	top:12px;
	width:90px;
	height:90px;
	background: url("../images/AboutUs.png");
	background-repeat:no-repeat;
}


a.navAboutUs:link{
	background: url("../images/AboutUs.png") 0 450px;
}

a.navAboutUs:visited{
	background: url("../images/AboutUs.png") 0 180px;
}

a.navAboutUs:hover {
	background: url("../images/AboutUs.png") 0 360px;
}
 
a.navAboutUsNow{
	background: url("../images/AboutUs.png") 0 90px;
}

a.navAboutUs:active{
	background: url("../images/AboutUs.png") 0 270px;
}

a.navContactUs, a.navContactUsNow {
	position:absolute;
	top:12px;
	right:230px;
	width:90px;
	height:90px;
	background: url("../images/ContactUs.png");
	background-repeat:no-repeat;
}

a.navContactUs:link{
	background: url("../images/ContactUs.png") 0 450px;
}

a.navContactUs:visited{
	background: url("../images/ContactUs.png") 0 180px;
}

a.navContactUs:hover{
	background: url("../images/ContactUs.png") 0 360px;
}

a.navContactUsNow{
	background: url("../images/ContactUs.png") 0 90px;
}

a.navContactUs:active{
	background: url("../images/ContactUs.png") 0 270px;
}

a.navWeb, a.navWebNow {
	display:block;
	float:left;
	width:90px;
	height:90px;
	background: url("../images/Web.png");
	background-repeat:no-repeat;
	margin-top:38px;
	margin-bottom:32px;
	margin-left:8px;
}


a.navWeb:link{
	background: url("../images/Web.png") 0 450px;
}

a.navWeb:visited{
	background: url("../images/Web.png") 0 180px;
}

a.navWeb:hover{
	background: url("../images/Web.png") 0 360px;
}

a.navWeb:active{
	background: url("../images/Web.png") 0 270px;
}

a.navWebNow {
	background: url("../images/Web.png") 0 90px;
}

a.navComp, a.navCompNow {
	display:block;
	float:left;
	width:90px;
	height:90px;
	background: url("../images/Computing.png");
	background-repeat:no-repeat;
	margin-top:-2px;
	margin-bottom:32px;
	margin-left:8px;
}

a.navComp:link{
	background: url("../images/Computing.png") 0 450px;
}

a.navComp:visited{
	background: url("../images/Computing.png") 0 180px;
}

a.navComp:hover{
	background: url("../images/Computing.png") 0 360px;
}

a.navCompNow {
	background: url("../images/Computing.png") 0 90px;
}

a.navComp:active{
	background: url("../images/Computing.png") 0 270px;
}

a.navDigi, a.navDigiNow {
	display:block;
	float:left;
	width:90px;
	height:90px;
	background: url("../images/Digital.png");
	background-repeat:no-repeat;
	margin-top:-2px;
	margin-bottom:32px;
	margin-left:8px;
}

a.navDigi:link{
	background: url("../images/Digital.png") 0 450px;
}

a.navDigi:visited{
	background: url("../images/Digital.png") 0 180px;
}

a.navDigi:hover{
	background: url("../images/Digital.png") 0 360px;
}

a.navDigiNow {
	background: url("../images/Digital.png") 0 90px;
}

a.navDigi:active{
	background: url("../images/Digital.png") 0 270px;
}

a.navPubl, a.navPublNow {
	display:block;
	float:left;
	width:90px;
	height:90px;
	background: url("../images/PublSp.png");
	background-repeat:no-repeat;
	margin-top:-2px;
	margin-bottom:32px;
	margin-left:8px;
}

a.navPubl:link{
	background: url("../images/PublSp.png") 0 450px;
}

a.navPubl:visited{
	background: url("../images/PublSp.png") 0 180px;
}

a.navPubl:hover{
	background: url("../images/PublSp.png") 0 360px;
}

a.navPublNow {
	background: url("../images/PublSp.png") 0 90px;
}

a.navPubl:active{
	background: url("../images/PublSp.png") 0 270px;
}


a.navCloud,a.navCloudNow {
	display:block;
	float:left;
	width:90px;
	height:90px;
	background: url("../images/Cloud.png");
	background-repeat:no-repeat;
	margin-top:38px;
	margin-bottom:32px;
	margin-left:-32px;
}

a.navCloud:link{
	background: url("../images/Cloud.png") 0 450px;
}

a.navCloud:visited{
	background: url("../images/Cloud.png") 0 180px;
}

a.navCloud:hover{
	background: url("../images/Cloud.png") 0 360px;
}

a.navCloudNow {
	background: url("../images/Cloud.png") 0 90px;
}

a.navCloud:active{
	background: url("../images/Cloud.png") 0 270px;
}


a.navWordPress,a.navWordPressNow {
	display:block;
	float:left;
	width:90px;
	height:90px;
	background: url("../images/WordPress.png");
	background-repeat:no-repeat;
	margin-top:-2px;
	margin-bottom:32px;
	margin-left:-32px;
}

a.navWordPress:link{
	background: url("../images/WordPress.png") 0 450px;
}

a.navWordPress:visited{
	background: url("../images/WordPress.png") 0 180px;
}

a.navWordPress:hover{
	background: url("../images/WordPress.png") 0 360px;
}

a.navWordPressNow {
	background: url("../images/WordPress.png") 0 90px;
}

a.navWordPress:active{
	background: url("../images/WordPress.png") 0 270px;
}


a.navLinks,a.navLinksNow {
	display:block;
	float:left;
	width:90px;
	height:90px;
	background: url("../images/Links.png");
	background-repeat:no-repeat;
	margin-top:-2px;
	margin-bottom:32px;
	margin-left:-32px;
}

a.navLinks:link{
	background: url("../images/Links.png") 0 450px;
}

a.navLinks:visited{
	background: url("../images/Links.png") 0 180px;
}

a.navLinks:hover{
	background: url("../images/Links.png") 0 360px;
}

a.navLinksNow {
	background: url("../images/Links.png") 0 90px;
}

a.navLinks:active{
	background: url("../images/Links.png") 0 270px;
}


a.navCeaRO_MGT,a.navCeaRO_MGTNow {
	display:block;
	float:left;
	width:90px;
	height:90px;
	background: url("../images/CeaRO_MGT.png");
	background-repeat:no-repeat;
	margin-top:-2px;
	margin-bottom:32px;
	margin-left:-32px;
}

a.navCeaRO_MGT:link{
	background: url("../images/CeaRO_MGT.png") 0 450px;
}

a.navCeaRO_MGT:visited{
	background: url("../images/CeaRO_MGT.png") 0 180px;
}

a.navCeaRO_MGT:hover{
	background: url("../images/CeaRO_MGT.png") 0 360px;
}

a.navCeaRO_MGTNow {
	background: url("../images/CeaRO_MGT.png") 0 90px;
}

a.navCeaRO_MGT:active{
	background: url("../images/CeaRO_MGT.png") 0 270px;
}

/* - Content section between left and right navigation */

#secondmMContent
{
height:700px;
overflow-x:hidden;
overflow-y:auto;
}

#mainContent		/* main content area in middle between left and right navigation */
{
position:absolute;
left:0px;
top:78px;
width:1040px;
border:0px solid #ffffff;
}

#firstText			/* in use ? */
{
font-weight: bold;
text-shadow: 2px 2px 2px #999;
}

/* - footer */

#footer
{
position:relative;
/* left:0px;
top:0px; */
text-align:center;
margin-left:auto;
margin-right:auto;
color:#000000;
border:0px solid #ffffff;
}

/* - Boxes */

#CSS3Box {			/* black box, rounded corners at top of CSS3 demo section */
margin: 30px 0;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 90%;
height:700px;
overflow:auto;
}

#CSS3Box2 {			/* box for Firefox recommend */
margin: 30px 0;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 90%;
height:60px;
overflow:auto;
}

#CSS3BoxFB {		/* box for FaceBook Connect */
margin: 30px 0;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #C0C0C0;
width: 90%;
}

#CSS3Box3 {			/* box with demo section links */
position: relative;
margin: 30px 0;
top:-20px;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 350px;
height:300px;
overflow:auto;
}

#CSS3Box4 {			/* box with site blog links */
position: relative;
margin: 30px 0;
left:390px;
top:-360px;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 250px;
height:140px;
overflow:auto;
}

#CSS3Box5 {			/* box with site user sign up / login / log out links */
position: relative;
margin: 30px 0;
left:390px;
top:-380px;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 250px;
height:140px;
overflow:auto;
}

#midMainContent		/* all enclosing box of mid content */
{
margin-right:240px;
margin-left:120px;
margin-top:40px;
padding:10px;
/* margin: 30px 0; */
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 70%;
height: 1050px;

}

#functList			/* list of implemented functions, in a box inside midMainContent */
{
 margin: 30px 0;
 -o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 70%;
}

/* jQuery */

p.jQTest
{
color: green;
border: 1 px solid green;
}

/*************************************************************************************/
/*             Elements of which the use needs to be examined further                */
/*             or kept for copying from.                                             */
/*************************************************************************************/

#midDemoIndexNav 	/* not used (yet) */
{

}

/*
#midBrowseNav
{
margin: 30px 0;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 40%;
height:100px;
overflow:auto;
}

#midUserNav
{
margin: 30px 0;
-o-box-shadow: 10px 10px 5px #888;
-icab-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 40%;
height:100px;
overflow:auto;
}
*/

#blank  		/* Comment */ 
{
}

/*
a.navxxxx,a.navxxxxNow {
	display:block;
	float:left;
	width:90px;
	height:90px;
	background: url("../images/yyyy.png");
	background-repeat:no-repeat;
}

a.navxxxx:link{
	background: url("../images/yyyy.png") 0 450px;
}

a.navxxxx:visited{
	background: url("../images/yyyy.png") 0 180px;
}

a.navxxxx:hover{
	background: url("../images/yyyy.png") 0 360px;
}

a.navxxxxNow {
	background: url("../images/yyyy.png") 0 90px;
}

a.navxxxx:active{
	background: url("../images/yyyy.png") 0 270px;
}

*/