/* huh! are you here ? I promise to reorganize my CSS as soon as I get some "free" time -) */
/* =============================================================================== 
 Design: elegant by Femi Hasani at www.vision.to for Vision.To CMS
/* =============================================================================== */
* {
	margin:0;
	padding:0;
}
body {
background:#EEE;
color:#777;
font:13px/20px  "Trebuchet MS", Verdana, Arial, Helvetica,  sans-serif !important;
margin:0;
padding:0;
}

/* =============================================================================== 
 LAYOUT CONTROL
/* =============================================================================== */
#wrapper {
margin:0 auto;
padding:0;
text-align:center;
width:100%;
background: url(elegant/bg.png) repeat-y top center;
}

#wrapper-2 {
margin:0 auto;
padding:0;
text-align:center;
width:902px;
/*background:#fff;*/
}

#innerwrapper {
margin:0 auto;
padding:0;
text-align:center;
width:900px;
background: #fff url(elegant/header_bg.png) no-repeat 0 0;
border:#ddd 1px solid;

}

#page-breadcrumbs, #user-info, #topmenu, #header, #footer, #content {
	clear:both;
}

#header {
margin:0;
text-align:center;
padding:0;
height:120px;
width:100%;

}

#header-left {

display:inline;
width:auto;
}
#header-right {
display:inline;
width:auto;

}

#content  form {
margin-bottom: 5px;
margin-top: 5px;
/*clear:both;*/
text-align:center;
  }

#content  table {
width:90%;
margin: 0 auto;
  }
.blocks-bottom {

height:auto !important;
margin:5px;
min-height:195px;
float:left;
width:29%;
padding:10px;
/*border: 1px solid #ccc;*/
background:url(elegant/bottom_blocks_bg.png) 0 0 no-repeat;
}

#footer {
width:100%;
/*height:180px;*/
margin: 0 auto 0 auto;
padding:10px;
text-align:center;
color:#777;
/*background:#333;*/
/*background: #333 url(elegant/passion.gif) no-repeat bottom right;*/
}
#footer a, #footer a:visited, #footer a:active, #footer a:hover {
	color:#777;
	text-decoration: underline;
}
#footer p {
	margin:5px;
}

#box-content {
float:left;
margin:0 auto;
padding:5px 10px;
}
#box-content ul {
	margin-left: 0;
	padding-left: 0;
	list-style: square inside !important;
}
#box-full {
margin:0 auto;
text-align:left;
padding:0;
width:100%;
}

#box-full form {
margin:0 auto;
text-align:center;
width:auto;
}

#box-left {
float:left;
padding:0 5px;
width:145px;
}

#box-right {
float:right;
padding:0 5px;
width:145px;

}
#box-bottom {
width:99%;
margin:0 auto;
padding:5px;
border-top:#444 1px dotted;
}
#content {

height:auto !important;
width:100%;
margin:0 auto;
padding:0;
min-height:370px;
text-align:left;
background:#fff;
color:#777;
/*border:#efefef 1px solid;*/

}


.col {
height:auto !important;
margin-bottom:20px;
min-height:370px;
}



.content-2 {
width:720px;
/*border:solid 1px #f00;*/

}

.content-3 {
width:450px;
/*border:solid 1px #000;*/
}


.full-content {
width:100%;
/*padding-left:40px !important;*/
padding:10px;
}

.clear {
clear:both;
}
/* =============================================================================== */
/* =============================================================================== */

#content ul {
list-style:none;
margin-left:0;
padding-left:0;
}

#content ul li li,#content ul li li li,#content ul li li li li,#related-pages a {
padding-left:5px;
}

h1 {
font-weight:400;
font-size:170%;
}
h2 {
font-weight:500;
font-size:130%;
}
h1#what-we-do {
margin:2px;
font-weight:300;
color:#444;
text-align:left;
font-size:200% !important;
line-height:40px;
}
div {
	margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
color:#777;
letter-spacing:0.1em;
margin:4px;
padding:0;
}

#content h2 {
color:#444;
font-size:130%;
font-weight:550;
}
#content h4 {
color:#444;
font-size:110%;
font-weight:400;
}
img {
border:none;
}

p,ul,ol,blockquote {
line-height:160%;
margin-top:0;
}
a{
color:#3b8cc8;
text-decoration: none;
}
a:visited {
color:#888;
text-decoration: none;
}
a:hover {
color:#8ec63d;
text-decoration:none;
}
a:focus {
color:#8ec63d;
text-decoration:none;
}
/* =============================================================================== 
 DESIGN SELECTOR - STYLE SWITCHER
/* =============================================================================== */
/* === DESIGN SELECOR by Femi Hasani www.vision.to === */
/* my simple css tooltip */
#designs .design-list a span {
display:none; 
padding:5px; 
margin-left:-165px; 
width:170px;
text-align:left;
}
#designs .design-list a:hover span {
display:inline; 
position:absolute;
top:15px;
left:0; 
background:#fefefe; 
border:1px solid #777; 
color:#333;
}

#designs {
float:right;
  padding:0;
  /*margin-top:50px;*/
  list-style:none;
  height:25px;
  position:relative;
  z-index:2002;
  width:125px;
  }
#designs img {
  border:0;
}

#designs li.top {
  display:block;
  float:none;
  text-align:left;
  padding:0 25px 0 5px;
  line-height:25px;
/*  background:url(elegant/select_bg.png) right 0 no-repeat;*/
  }
#designs li a {
  display:block;
 /* font-weight:bold;*/
/* text-transform: uppercase; */
  float:none;
  height:25px;
  width:125px;
   text-decoration:none;
   padding:0;
	color:#777;
   }

#designs .design-list {
  position:absolute;
  left:-999em;
  top:-999em;
  width:0;
  height:0;
  margin:0;
  padding:0;
  list-style:none;
  }

#designs li:hover {
  position:relative; 
  z-index:2002;
  }
#designs a:hover {
  position:relative;
   white-space:normal;
   z-index:2002;
   }

#designs :hover ul.design-list
{
  left:0;
  top:25px;/* to catch dropdown */
 /* background:#FFF;*/
  width:100%;
  height:auto;
  z-index:3003;
  }
#designs :hover ul.design-list li
{
  display:block;
  height:auto;
  position:relative;
  float:none;
  width:100px;
  text-align:center;
  margin: 2px 0;
  }
#designs :hover ul.design-list li a
{
  display:block;
  font-weight:normal;
  text-transform: none; 
  height:auto;
  width:100px;
  border:1px solid #888;
  text-decoration:none;
  padding:0;
  background:#FFF;

  }

#designs :hover ul.design-list li a:hover
{
  border:1px solid #777;
  }
/* === END DESIGN SELECOR by Femi Hasani === */


/* =============================================================================== 
 LOGO
 based on: http://www.vision.to/css-only-logo-rollover.php
/* =============================================================================== */
#logo {
float:left;

/*display:none;*
width:150px;
height:110px;
background: url(elegant/logo.png) 0 0 no-repeat;
*/
}
#logo a {
outline: none;/* get rid of dotted borders in FireFox */
 text-indent: -999em ;/* this moves the text outside of the screen area */
		display:block;
		width:150px;
        height:110px;
		background: url(elegant/logo.png) 0 0 no-repeat;
		text-decoration: none;
		}
	#logo a:hover {
		background-position: 0 -110px ;
		}

/* =============================================================================== 
 TOP MENU ("TABS")
based on:  http://www.vision.to/single-image-tabs-with-three-state-rollover.php

/* =============================================================================== */
#topmenu {
	overflow:hidden; /* wrap floats */
	height:28px; /* trips haslayout, wrap floats IE */
	list-style:none;
	/*background:url(elegant/buttons.png) 0 0 repeat-x;*/
	line-height:28px;
	/* text-transform:uppercase; */
	margin-left:0;
}

#topmenu li {
	display:inline;
}

#topmenu a {
  float:left;
  position:relative;
  padding-left:20px;
	padding-right:10px;
  margin-right:10px; /* adjust space between tabs ... */ 
  text-decoration:none;
	color:#888;
	background:url(elegant/buttons.png) 0 -45px no-repeat;
}

#topmenu a span {
  position:absolute;
  top:0;
  left:100%;
  width:10px;
  height:28px;
	background:url(elegant/buttons.png) -500px -45px no-repeat;
}

#topmenu .current a {
	color:#fff;
	background-position:0 -135px;
	background-color:#000;
	/*padding-left:25px;*/
}

#topmenu .current a span {
	background-position:-500px -135px;
}

#topmenu a:active,
#topmenu a:focus,
#topmenu a:hover {
	color:#FFF;
	background-position:0 -90px;
	background-color:#EEE;
	/*padding-left:25px;*/
}

#topmenu a:active span,
#topmenu a:focus span,
#topmenu a:hover span {
	background-position:-500px -90px;
}
/* ======= END TOP MENU ========= */

#topmenu, #page-breadcrumbs, #designs {
	font-weight:bold;
}
/* =============================================================================== 
 BREADCRUMBS
/* =============================================================================== */
#page-breadcrumbs {
margin:0;
width:100%;
color:#EEE;
background:#444;
float:left;
padding:0;
/*background:#777;*/
text-align:left;
height:30px;
background: url(elegant/breadcrumbs.png) repeat-x left top;
}

#page-breadcrumbs a, #page-breadcrumbs a:visited, #page-breadcrumbs a:active {
	color:#EEE;
display:inline-block;
line-height:30px;
	/* font-weight:700; */
	text-decoration: none;
	padding:0 5px 0 20px;
	background:url(elegant/breadcrumbs.png) no-repeat left -30px;
}
#page-breadcrumbs a:hover{
	color:#FFF;
	text-decoration: none;
	background:url(elegant/breadcrumbs.png) no-repeat left -60px;
}
#page-breadcrumbs #u-are-here a {
	color:#FFF;
	text-decoration: none;
	background:url(elegant/breadcrumbs.png) no-repeat left -90px;
}
#page-breadcrumbs ul li {
border:none;
display:inline;
list-style:none;
margin-left:0;
padding-left:5px;
}

#page-breadcrumbs ul {
border:none;
display:inline;
margin-left:0;
padding-left:0;

}
/* ============================================= */

/* =============================================================================== 
 RELATED PAGES
/* =============================================================================== */
#related-pages ul {
border:none;
display:inline;
margin-left:0;
padding-left:0;
}

#related-pages {
margin:0 auto 2px;
padding:3px;
text-align:center;
}

#related-pages ul li {
border:none;
display:inline;
list-style:none;
margin-left:0;
padding-left:3px;
}


/* ================================================= */
/* =============================================================================== 
 MAIN LINKS  Contact Sitemap  etc ...
/* =============================================================================== */
#mainlinks {
	margin: 0 auto;
	text-align: right;
	color: #777;
	padding: 5px;
}

#mainlinks a {padding-left: 5px;color:#333; text-decoration:none;}
#mainlinks a:hover, #mainlinks a.selected { padding-left: 5px;color:#444;text-decoration:underline; }

#mainlinks ul {
	margin-left: 0;
	margin-top:0;
	padding-left: 0;
	display: inline;
	border: none;
}

#mainlinks ul li {
	margin-left: 0;
	padding-right: 3px;
	border: none;
	list-style: none;
	display: inline;
}


/* =============================================================================== */
/* FLYOUT MENU
/* =============================================================================== */
/*based on : http://qrayg.com/learn/code/cssmenus */
/* Root = Vertical, Secondary = Vertical */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
  margin: 0;
  border: 0 none;
margin-left:-2px;
  padding: 0;
  width: 100%; /*For KHTML*/
  list-style: none;
  z-index:8000;
 line-height:25px;
 color:#777;
}

ul#navmenu-v:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-v li {
  float: left; /*For IE 7 lack of compliance*/
  display: block !important; /*For GOOD browsers*/
  display: inline; /*For IE*/
  position: relative;
}

/* Root Menu */
ul#navmenu-v a, ul#navmenu-v a:visited {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  display: block;
  background: #fafafa;
  color: #777;
 /*line-height:25px;*/
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu-v a.selected,
ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
  background: #444;
  color: #fff;
}

/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
  background: #444;
  color: #fff;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
  background: #777;
  color: #fff;
}

/* 3rd Menu */
ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
  background: #444;
  color: #fff;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
   background: #777;
  color: #fff;
}

/* 4th Menu */
ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
  background: #444;
  color: #fff;
}

/* 4th Menu Hover */
ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
 background: #777;
  color: #fff;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
  display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
  display: block;
}
/* =============================================================================== */
/* END FLYOUT MENU
/* =============================================================================== */


#validatorlinks {
margin: 0 auto;
	overflow:hidden; /* wrap floats */
	width:425px; /* trips haslayout, wraps floats in IE */
   /*	background:url(elegant/validator_buttons.png) 0 0 no-repeat;        */
}

#validatorlinks li {
	position:relative;
	float:left;
	width:80px;
	height:15px;
	overflow:hidden;
	
    margin-right:3px;
}

#validatorlinks a {
	position:absolute;
	/*
		There's a bug where IE won't re-render position changes unless an
		items display state changes, so we set inline here, which gets
		overridden by the absolute positioning anyways. Then we change
		it to block in the hover state
	*/
	
	display:inline;
	top:0;
	left:0;
	width:80px;
	height:60px;
	overflow:hidden;
	text-indent:-999em;
	text-decoration:none;
	outline:none;
	background:url(elegant/validator_buttons.png) 0 0 no-repeat;
}


#validatorlinks a:hover {
	display:block; /* see "#validatorlinks a" for explanation */
	top:-15px;
	
}

#validatorlinks .selected a,
#validatorlinks a:active,
#validatorlinks a:focus {
	top:-15px;
}

#button-css a {
	background-position:-80px 0;
}

#button-rss a {
	background-position:-160px 0;
}

#button-atom a {
	background-position:-240px 0;
}
#button-xml a {
	background-position:-320px 0;
}

/* =============================================================================== 
 ROUNDED CORNERS, SHADOWS, DECORATIONS
 Based on: http://battletech.hopto.org/html_tutorials/eightcorners/template.html
/* =============================================================================== */




/* =============================================================================== 
 DIVERSE STYLING
/* =============================================================================== */

#a-report {
border:1px solid #333;
height:20px;
margin:10px auto 0;
padding:10px;
width:94%;
}

#a-report h1 {
color:#229ee5;
margin:0;
}


#sitemap ul li ul li, ul li ul li{
	/*margin-left:10px !important;*/
}

#construction {
border:1px solid #777;
margin:10px auto 0;
padding:10px;
width:90%;
}

#construction h1 {
color:#333;
margin:0;
}

#e-report h1,.pageerror h1,#page-info h1,#a-report h1 {
font-size:130%;
font-weight:400;
margin:0.5em;
}

#e-report,.pageerror {
border:2px solid red;
color:#229ee5;
margin:10px auto 0;
padding:1em;
width:94%;
}

#user-info a {
color:#ccc;
text-decoration:underline;
}

.edit a {
color:#f00;
}

.search-highlight {
background-color:#333;
border:1px solid #777;
color:#333;
font-weight:700;
padding:3px;
}

.search-titles,.search-titles a {
color:#333;
font-size:20px;
font-weight:400;
margin:2px;
text-decoration:underline;
}

.under-construction {
color:#333;
font-size:26px;
margin:5px;
padding:10px;
text-align:center;
width:94%;
}
#user-info {
color:#333;
background:#fff;
font-style:italic;
padding:3px;
text-align:center;
text-decoration:none;
}
/* my simple css tooltip */
span.pconstruction {
display:none; 
padding:5px; 
margin-left:20px; 
width:150px;
}
a:hover span.pconstruction{
display:inline; 
position:absolute;
top:-30px;
left:10px; 
background:#ffffe1; 
border:2px solid #f00; 
color:#333;
}
	
	
.image-preloader, .flash-button , .nocomment{
display:none;
}
a {
    outline: none;/* fix dotted borders in FireFox */
}
/* design elegant Beta by www.visio.to Femi Hasani */

.image-preloader {
display:none;
}

.toplink {
	width:96%;
	padding-right:10px;
	text-align:right;
	clear:both;
}

a[target="_blank"] {
display:inline-block;
line-height:18px;
background:url(elegant/window.png)  center right no-repeat;
padding-right:20px;
} 

#top-bar {
width:100%;
background:#444 url(elegant/bar.png) repeat-x center center;
height:30px;
margin:5px auto;
margin-top:-10px;
text-align:center;
line-height:30px;
color:#FFF;
}
.copyright {
width:100%;
background:#444 url(elegant/bar.png) repeat-x center center;
/*font-weight:700;*/
height:30px;
margin:5px auto;
text-align:center;
line-height:30px;
color:#FFF;
/*text-transform:uppercase;*/
/*background: url(elegant/footer_bg.png) repeat-x center center;*/
}
.copyright a, copyright a:visited, .copyright a:active, .copyright a:hover {
	color:#FFF !important;
	text-decoration: underline;
}
#validatorlinks, #powered {
	text-align:center;font-size:80%;
}
/* dynamic background */
#layout-bg-0 {

		background: url(elegant/welcome.png) no-repeat fixed;
} 
#layout-bg-1 {

		background: url(elegant/products.png) no-repeat fixed; 

}
#layout-bg-2 {

		background: url(elegant/services.png) no-repeat fixed; 

}
#layout-bg-3 {

		background: url(elegant/about.png) no-repeat fixed; 

}
#layout-bg-4 {

		background: url(elegant/tutorials.png) no-repeat fixed; 

}
#layout-bg-5 {

		background: url(elegant/links.png) no-repeat fixed; 

}
#layout-bg-6 {
		background:  url(elegant/articles.png) no-repeat fixed; 

}
#layout-bg-7 {
		background:  url(elegant/digital_art.png) no-repeat fixed; 

}

.passion {
	background: url('/images/art/passion.jpg') no-repeat left top; margin: 0pt auto;
}