div.loader{

margin-left:-1000px;


}

body {padding:0;background: url(tile.jpg) #e9eae4 repeat-x;}
#wrapper {text-align: left;margin: auto;width: 990px;}


#wrapper a.twitter{background:transparent url(images/tweet.gif) no-repeat center top;width:64px;height:36px;display:block;position:absolute;top:93px;z-index:10;margin: auto;}
#wrapper a.twitter span{display:none;}

#scroll {
	background:  #fff ;
	position:relative;
	height:580px;
	overflow:hidden;
	border:5px solid #CCC;
	width:990px;
	padding:0px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	
	
}
 
#tools {
	width:9999em;
	position:absolute;
	height:500px;
}
 
.tool {
	float:left;
	width:990px;
	height:500px;
	background-repeat:no-repeat;
	background-position:0 -40px;

}
 
.details {
	background-color:#fff;
	color:#666;
	float:left;
	font-size:18px;
	margin:370px 0 0 0;
	padding:20px 60px;
	width:525px;
	font-family: Tahoma, Geneva, sans-serif;font-size:22px;
}
 .details p {
	background-color:#fff;
	color:#666;
	float:left;
	font-size:13px;
	margin:-370px 0 0 -15px;
	padding:20px 0px;
	width:525px;
	font-family: Tahoma, Geneva, sans-serif; text-align:justify;
}

.demos {
	background-color:#fff;
	background-color:rgba(255, 255, 255, 0.8);
	border-left:0px solid #ddd;
	float:right;
	min-height:485px;
	padding:0 25px;
	width:272px;
	font-family: Tahoma, Geneva, sans-serif;color:#99cc33;font-size:17px;
	
}
 
.demos h2 {
	color:#99cc33;
	  font-size:22px;
	display:block;
	padding:0px 0;
	
}
.demos h6 {
	color:#99cc33;
	font-size:22px;
	display:block;
	padding:0px 0;
	text-align:justify;
	font-size:11px;
	margin-top:-5px;
	font-weight:lighter;
	
}
 
.demos a {
	color:#666;
	font-size:16px;
	text-decoration:none;
}
 
.demos p {
	margin:0 0 5px;
	background:transparent url(bullet.png) no-repeat scroll 0 2px;
	padding:2px 0 1px 25px;  font-size:13px;
}
 
#thumbs {
	background:url(navi.jpg) no-repeat;
	height:89px;
	position:absolute;
	top:0px;
	width:1000px;
	left:-8px;
}
 
.t a {
	background:transparent url(navi.jpg) no-repeat scroll -21px -90px;
	margin-left:11px;
	display:block;
	width:99px;
	float:left;
	height:89px;
	cursor:pointer;
}
 
.t a.active {
	cursor:default !important;
}
 
.navi {
	margin-left:314px;
	_margin-left:304px;
}
 
/* CSS sprite for the navigation */
#t0 		  { margin-left:20px; _margin-left:10px;}
#t0.active { background-position:-21px 0 !important; }
#t0:hover  { background-position:-21px -180px; }
#t0:active { background-position:-21px -270px; }
 
#t1			{ background-position:-325px -90px; }
#t1:hover 	{ background-position:-325px -180px; }
#t1:active	{ background-position:-325px -270px; }
#t1.active	{ background-position:-325px 0 !important; }
 
#t2			{ background-position:-435px -90px; }
#t2:hover 	{ background-position:-435px -180px; }
#t2:active	{ background-position:-435px -270px; }
#t2.active	{ background-position:-435px 0 !important; }
 
#t3			{ background-position:-545px -90px; }
#t3:hover 	{ background-position:-545px -180px; }
#t3:active	{ background-position:-545px -270px; }
#t3.active	{ background-position:-545px 0 !important; }
 
#t4			{ background-position:-655px -90px; }
#t4:hover 	{ background-position:-655px -180px; }
#t4:active	{ background-position:-655px -270px; }
#t4.active	{ background-position:-655px 0 !important; }
 
#t5			{ background-position:-765px -90px; }
#t5:hover 	{ background-position:-765px -180px; }
#t5:active	{ background-position:-765px -270px; }
#t5.active	{ background-position:-765px 0 !important; }
 
#t6			{ background-position:-875px -90px; }
#t6:hover 	{ background-position:-875px -180px; }
#t6:active	{ background-position:-875px -270px; }
#t6.active	{ background-position:-875px 0 !important; }


/*** ART GALLERY STYLES ***/
#gallery {width:1020px; height:360px; position:relative; border:0px solid #ddd; background:#fff; margin:0px  0 0 -710px}
#gallery ul {list-style:none; padding:5px; margin:0; width:300px; float:right; height:450px; overflow:auto; margin-top:-40px;}
#gallery ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px 4px 0; border:1px solid #444; cursor:pointer;}
#gallery ul li img {display:block; width:50px; height:50px;}
#gallery ul li span {display:none; position:absolute; left:70px; top:335px; width:500px;font-family:verdana, arial, sans-serif; color:#06a; font-size:11px; line-height:15px; text-align:justify;}
#gallery ul li span b {color:#444;}

#gallery ul li.default {width:0; height:0; border:0;}
#gallery ul li.default i {position:absolute; left:0; top:0; width:545px; height:355px;}
#gallery ul li.default i img  {margin:-15px auto 0 0px; width:auto; height:auto; border:1px solid #fff; float:left;}

#gallery ul li.off {display:none;}

#gallery ul li.click {border-color:#fc0; background:#f8f8f8; cursor:default;}

#gallery ul li.click i {position:absolute; left:0; top:0; width:545px; height:355px;}

#gallery ul li.click i img {margin:-15px auto 0 60px;width:auto; height:auto; border:1px solid #fff;cursor:default;}

#gallery ul li.default span,
#gallery ul li.click span {display:block;}


/*** WEB STYLES ***/

#web {width:975px; height:360px; position:relative; border:0px solid #ddd; background:#fff; margin:0px  0 0 -710px}
#web ul {list-style:none; padding:5px; margin:0; width:255px; float:right; height:350px; overflow:auto;}
#web ul li {display:inline; width:50px; height:50px; float:left; margin:0 4px 4px 0; border:1px solid #444; cursor:pointer;}
#web ul li img {display:block; width:50px; height:50px;}
#web ul li span {display:none; position:absolute; left:60px; top:330px; width:550px;font-family:verdana, arial, sans-serif; color:#333333; font-size:11px; line-height:15px; text-align:left;}
#web ul li span b {color:#444;}
#web ul li span a {color:#333333; font-size:11px;}

#web ul li.default {width:0; height:0; border:0;}
#web ul li.default i {position:absolute; left:0; top:0; width:545px; height:355px;}
#web ul li.default i img  {margin:-15px auto 0 0px; width:auto; height:auto; border:1px solid #fff; float:left;}

#web ul li.off {display:none;}

#web ul li.click {border-color:#fc0; background:#f8f8f8; cursor:default;}

#web ul li.click i {position:absolute; left:0; top:0; width:545px; height:355px;}

#web ul li.click i img {margin:-15px auto 0 60px; width:auto; height:auto; border:1px solid #fff; }

#web ul li.default span,
#web ul li.click span {display:block;}

#MySpamTrap {display: none;}


/*** TWITTER STYLES ***/

.tweet, .query {
  font-family: Tahoma, Geneva, sans-serif;
  font-size:13px;
  color: #669933; }
  .tweet .tweet_list, .query .tweet_list {
    -webkit-border-radius: .5em;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #fafafa; }
    .tweet .tweet_list .awesome, .tweet .tweet_list .epic, .query .tweet_list .awesome, .query .tweet_list .epic {
      text-transform: uppercase; }
    .tweet .tweet_list li, .query .tweet_list li {
      overflow-y: auto;
      overflow-x: hidden;
      padding: .5em; }
      .tweet .tweet_list li a, .query .tweet_list li a {
        color: #000;  font-size: 100%;  color: #666666;}
    .tweet .tweet_list .tweet_even, .query .tweet_list .tweet_even {
      background-color: #e9eae4; }
    .tweet .tweet_list .tweet_avatar, .query .tweet_list .tweet_avatar {
      padding-right: .5em;
      float: left; }
      .tweet .tweet_list .tweet_avatar img, .query .tweet_list .tweet_avatar img {
        vertical-align: middle; }


 /*** FORM STYLES ***/
#mask {
	background:#fff ;
	background-position:-160px -9px;
}
 
form.expose {
		padding:20px;
	margin: -300px 0 0 0;
	text-align:center;
	width:350px;
	-moz-border-radius:4px;
}
 

label, input,textarea {
	display: block;
	width: 240px;
	float: left;
	margin-bottom: 10px;
}

 
label {
	text-align: right;
	width: 75px;
	padding-right: 20px;
	font-size:13px;
}
 
br {
	clear: left;
}

form.expose input[type=button],
form.expose input[type=reset],
form.expose input[type=submit],
form.expose button
{
	-webkit-border-radius: .4em;
	-moz-border-radius: .4em;
	border-radius: .4em;
	background-color: #fafafa;
	border: 1px solid #ddd;
	color: #666;
float: right;
	padding: .15em .4em;
	margin: 0 .3em;
	width: 100px;
}

form.expose span				{ width: 420px;  float: right; color:#000; }

form.expose select				{ width: 150px;   color:#000; }
form.expose input[type=submit]:hover,
form.expose input[type=reset]:hover,
form.expose input[type=button]:hover,
form.expose button:hover
{
	background-color: #ffd;
}


/* main vertical scroll */
	#main {
		
		overflow:hidden;
		height: 500px;
		margin:-6px  0 0 10px;
		float:left;
		
	}
	
	/* root element for pages */
	#pages {
		position:absolute;
		height:20000em;
	}
	
	/* single page */
	.page {
		padding:10px;
		height: 500px;
		background:#fff ;
		overflow:hidden;
		width:650px;
	}

	/* root element for horizontal scrollables */
	.scrollable {
		position:relative;
		overflow:hidden;
		width: 660px;
		height: 450px;
		float:left;
	}
	
	/* root element for scrollable items */
	.scrollable .items {
		width:20000em;
		position:absolute;
		clear:both;
	}
	
	/* single scrollable item */
	.item {
		float:left;
		cursor:pointer;
		width:660px;
		height:450px;
		padding:10px;
	}
	.item span{
		clear:both;line-height:normal;}
	

.commentbox{

width: 240px;
padding: 5px;
margin-left:710px;
margin-top:245px;
line-height:normal;
text-align:left;
position: absolute;
overflow:hidden;
z-index:100;
}
.commentbox li {
	list-style-position:outside;
	list-style-type:circle;
	
	}
	

	
	/* main navigator */
	
	#main_navi {
		width:230px; height:250px;  border:0px solid #ddd;  margin:30px  25px 0 0px;float:right;
		z-index:-100;
	}
	
	#main_navi li {
		display:inline; width:50px; height:50px; float:left; margin:0 4px 4px 0; border:1px solid #444; cursor:hand;
	}
	
	#main_navi li:hover {
		background-color:#444;
	}
	
	#main_navi li.active {
		background-color:#555;
	}
	
	#main_navi img {
		display:block; width:50px; height:50px;
	}
	
	#main_navi strong {
		display:block;
	}
	
	#main div.navi1 {
			margin-left:270px;
			margin-top:-10px;
			list-style-type:circle;

		cursor:pointer;
	}
	
#main { left:30px;  width:500px;font-family:verdana, arial, sans-serif; color:#999; font-size:11px; line-height:0px; text-align:justify;}
#main a{ color:#99cc33; text-decoration:none;font-size:13px;}


/*********** navigator ***********/


/* position and dimensions of the navigator */
.navi1 {

	width:150px;
	height:20px;
}


/* items inside navigator */
.navi1 a {
	width:16px;
	height:16px;
	float:left;
	margin:3px;
	background:url(images/navigator2.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi1 a:hover {
	background-position:0 -16px;      
}

/* active state (current page state) */
.navi1 a.active {
	background-position:0 -16px;     
}