/*	
_________________________________________________________________________________________
Studio-XL - Turnkey webdesign solutions, project management, domain and hosting services 
webmaster@studio-xl.com
http://studio-XL.com 	
_________________________________________________________________________________________ 
*/

* { margin: 0; }
        	 
body
{	font-weight: normal; font-size:12px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; line-height : 15px; color : #222b34; background:url(../images/bg.png) repeat-x top; background-color:#6f96ae; background-attachment: fixed; height:100%;  }

form
{	padding:0px; margin:0px; }

#MainMenu
{	float:right; margin:auto; margin-top:25px;}

#MainFooterDiv
{	width:100%; height:100px; left:0px; 
	position:fixed; 
	bottom:0px; background-image:url(../images/footer.png); background-position:center top;
}

.Spacer10px
{	margin:auto; clear:both; height:10px; width:100%; }

.Spacer15px
{	margin:auto; clear:both; height:15px; width:100%; }

.Spacer5px
{	margin:auto; clear:both; height:5px; width:100%; }
	
.Preview
{	padding-top:10px; color:#333333; font-family:Tahoma; font-size:11px; line-height:16px; margin:0px; }




h1
{	 
margin-top:35px; 
margin-left:100px; 
margin-bottom:10px; 
width:140px;
height:60px;
padding:0px;
}


h3
{	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; line-height:14px; padding:0px; margin-bottom:2px; font-weight:bold; width:100%;} 


img
{	border: 0px;}
	
img a, img a:active, img a:visited,  img a:hover 
{ 	border-bottom:0px; text-decoration:none; }

#fixme {
     /* IE 5.0/Win and other lesser browsers will use this */
     position: absolute; right: 0px; bottom: 0px; }

body > div#fixme {
     /* used by Netscape6+/Mozilla, Opera 5+, Konqueror, Safari, OmniWeb 4.5+, ICEbrowser */
     position: fixed; }

a:link, a:visited, a:active 
{	color:#f00; font-weight:bold; text-decoration:none; }
	
a:hover
{	color:#000; text-decoration:underline; }



 #ContentTD
{	background-image:url(../images/bg_service.png); background-repeat:no-repeat; background-position:center top; background-attachment: fixed;}


h2 {
  font-family:Tahoma;
  font-size:12px;
  line-height:16px;
  border-bottom:1px #666 dotted; 
  margin-bottom:15px;
  padding-top:10px;
  color:#666;
  font-style:normal;
  font-stretch:normal;
  font-weight:normal;

}

#wrapper {
  width: 335px;
  height:480px;
  margin: 0 auto;
}

#content {
  padding: 0 10px;
  background: url(images/content.png) repeat-y;
}

#content ul {
  float: left;
  display: block;
  width: 330px;
  margin: 0;
  padding: 0;
  background: url(images/networks.png) repeat;
  list-style: none;

}

#content li {
  float: left;
  height: 60px;
  width: 225px;
  position: relative;

}

#content a {
  font-size: 1em;
  color: #666;
  text-decoration: none;
  padding: 10px 0 5px;
  display: block;
  width: 225px;
  height: 45px;
  position: relative;
  z-index: 2;
}

a img {
  border: 0;
  margin: 0;
}


.fader {
  opacity: 0;
  -moz-opacity: 0;
  filter:alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #A4ADB7;
}

a:hover img {
  margin-left: 0px;
}

.clear {
  clear: left;
}

#datacontent {
  	padding: 0px;
	background:url(../images/bg_temp.png) no-repeat center top;	
	text-align:center;
}



.navigation
{
	text-align:center;
	margin:auto;
	width:100%;
	padding-top:2px;
	background:url(../images/menu_bg.png) no-repeat left top;
	
}

.navigation ul {
  list-style: none;
  margin: auto;
  padding: 0px;
  display: block;
  height: 30px;
  text-align:center;
  width:280px; overflow:hidden;
  padding-left:10px;
}

.navigation li {
  	float: left;
  	padding:5px;
	list-style:none;
	line-height:16px;
	padding-right:15px;
}

.navigation li a {
  text-decoration: none;
  font-size:9px;
  text-transform:uppercase;
  padding:3px;
  padding-right:5px;
  padding-left:5px;
  font-weight:bold;
  color:#777;
}


.navigation li a:hover {
  color:#000;
}

.navigation li a.selected {
  color:#F00;
}



#datacontent .panels {
  width:330px;
  padding-bottom:0px;
}

#datacontent .panelsInner {
  overflow: hidden;
}

#datacontent .panel {
  padding:0px;
  height:320px;
  text-align:left;
  padding-right:30px;
  padding-left:25px;
}

.panel #about1
{
	width:100%;
	height: 150px; 
	clear:both;
	margin:auto;
	border:0px;
	background:url(../images/divider.png) repeat-x bottom;	
}
	
.panel #about2
{
	width:160px; height:150px; float:left; margin:0px; padding-top:10px;
	font-family:Tahoma; font-size:11px; color:#666;
}

.panel #about3
{
	width:95px; height:150px; float:right; margin:0px; padding-top:10px; 
}
	
#about2 p
{
		font-family:Tahoma; font-size:11px; color:#666;
		clear:both;
}

.panel #about4
{
	height:25px; clear:both; margin:0px; margin-top:15px; color:#999; font-size:10px; font-weight:bold; float:right; 
}

.panel #aboutdivider
{
	height:5px; clear:both; margin:auto; text-align:center;  background:url(../images/divider.png) repeat-x bottom;	
}

.panel #aboutSocial
{
	 padding-top:20px; clear:both; margin:auto; text-align:center;
}

.SocialIcon
{
	float:left; width:38px; height:32px;  margin-right:15px; margin:0px; padding:0px;
	}
	
#aboutSocial ul
	{
		list-style:none;
		padding:0px;
		margin:0px;
		text-align:center;
		padding-left:30px;
		}
		
#MagentoIcon
{
	background:url(../images/menu/magento.png) no-repeat center top;}
		
#aboutSocial ul li
{
	margin:0px;
	padding:0px;
	float:left;
	margin-right:5px;}
		
#aboutSocial ul li a
{	
background:url(../images/menu/linkedin.png) no-repeat top;
width:32px;
height:32px;
float:left;
	}
	
#aboutSocial ul li a.MagentoIcon
{
	background:url(../images/menu/magento.png) no-repeat top;
}
	
#aboutSocial ul li a:hover
{	background:url(../images/menu/linkedin.png) no-repeat bottom;}
	
#aboutSocial ul li a#MagentoIcon
{	background:url(../images/menu/magento.png) no-repeat top;}

#aboutSocial ul li a:hover#MagentoIcon
{	background:url(../images/menu/magento.png) no-repeat bottom;}

#aboutSocial ul li a#YouTubeIcon
{	background:url(../images/menu/youtube.png) no-repeat top;}

#aboutSocial ul li a:hover#YouTubeIcon
{	background:url(../images/menu/youtube.png) no-repeat bottom;}

#aboutSocial ul li a#PicasaIcon
{	background:url(../images/menu/picasa.png) no-repeat top;}

#aboutSocial ul li a:hover#PicasaIcon
{	background:url(../images/menu/picasa.png) no-repeat bottom;}

#aboutSocial ul li a#TwitterIcon
{	background:url(../images/menu/twitter.png) no-repeat top;}

#aboutSocial ul li a:hover#TwitterIcon
{	background:url(../images/menu/twitter.png) no-repeat bottom;}

#aboutSocial ul li a#SkypeIcon
{	background:url(../images/menu/skype.png) no-repeat top;}

#aboutSocial ul li a:hover#SkypeIcon
{	background:url(../images/menu/skype.png) no-repeat bottom;}


.servicesList ul
{
	padding-left:20px;
	clear:both;
	padding-top:20px;

	} 

.servicesList ul li a
{
	padding-left:25px;
	background:url(../images/tick_tack.png) no-repeat 0px -18px;
	}
	
.servicesList ul li a:link, .servicesList ul li a:active, .servicesList ul li a:visited
{	
		color:#999;
		font-weight:normal;
}
	
.servicesList ul li a:hover
{
	background:url(../images/tick_tack.png) no-repeat 0px -2px;
	text-decoration:none;
	color:#444;
	font-weight:normal;
	}	
	
.panel ul li
	{
	padding:0px;
	padding-top:10px;
	list-style:none;
	margin:0px;
	font-size:11px;
	font-family:Tahoma, Geneva, sans-serif;
	color:#888; text-align:left;
	}

.StudioWork	
{
	padding:0px;
	margin:0px;}
	
.StudioWork ul li
{
	padding:0px;
	margin:0px;}
	
label
{
	font-family:Tahoma; font-size:10px; font-weight:bold; color:#999; text-transform:lowercase; margin:0px; padding:0px; clear:both; margin-top:10px; display:block;
}

.inputtext1
{
	border:1px solid #999; text-indent:25px; color:#666; overflow:hidden;  background-color:#CCC; margin:0px; height:20px; width:265px; line-height:18px; padding:0; padding-top:2px; background:url(../images/menu/user-silhouette.png) no-repeat 3px 3px;
}

.inputtext2
{
	border:1px solid #999; text-indent:25px; color:#666; overflow:hidden;  background-color:#CCC; margin:0px; height:20px; width:265px; line-height:18px; padding:0; padding-top:2px; background:url(../images/menu/mail.png) no-repeat 3px 3px;
}

.inputtext3
{
	border:1px solid #999; text-indent:25px; color:#666; overflow:hidden;  background-color:#CCC; margin:0px; height:20px; width:265px; line-height:18px; padding:0; padding-top:2px; background:url(../images/menu/folder-horizontal.png) no-repeat 3px 3px;
}

.inputtextlarge
{
	border:1px solid #999; color:#666; overflow:hidden;  background-color:#CCC; margin:0px; width:265px; line-height:18px; padding:0; padding-top:2px; 
}

.submit
{
	background:#ccc;
	padding:3px;
	width:265px;
	line-height:12px;
	font-family:Tahoma;
	font-size:10px;
	color:#666;
	font-weight:bold;
	border:1px solid #999;
	text-transform:uppercase;
	display:block;
	margin:0px;
	cursor:pointer;}
	
	
 /* Lightbox - JQuery  modal window */  
 #mask {  
   position:absolute;
   top:0px;
   left:0px;
   z-index:9000;  
   background-color:#000;  
   display:none;  
 }  
     
 #boxes .window {  
   position:absolute;  
   width:561px;  
   display:none;  
   z-index:9999;  

 }  
   
   
 #boxes #explain1 {  
   width:561px;   
 }  
 
 .modalheader
 {
	 display:block;
	 margin:auto;
	 background:url(../images/header.png) no-repeat top center;
	 height:40px;
	 width:561px;}
	 
 .modalfooter
 {
	 display:block;
	 margin:auto;
	 background:url(../images/footer_modal.png) no-repeat bottom center;
	 height:50px;
	 width:561px;
	 text-align:center;}
	 
.close_modal1	 
	{display: block;
	margin:auto;
	width:100px;
	height:25px;
	padding-top:25px;
	overflow:hidden;
	}
	
.close_modal2
	{display: block;
	margin:auto;
	width:40px;
	height:25px;
	overflow:hidden;
	float:right;
	}	
 
.modalinner
{
	display:block;
	padding:0px;
	padding-right:20px;
	padding-left:20px;
	background-color:#ddd;
	color:#777;}
  /* Lightbox - JQuery  modal window */  

.modalinner ul
{
	padding-top:7px;
	}
	
.modalinner h2
{
	font-family:"Trebuchet MS";
	font-size:18px;
	padding-bottom:3px;
	}
	
.modalinner ul li
	{
		padding:5px;
		padding-left:25px;
		font-family:"Trebuchet MS";
		background:url(../images/tick.png)  no-repeat 0px 4px;
		color:#444;
	}

#projectsNote	
{
	text-align:center;
	margin:auto;

	padding:0px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#888;
	display:block;

}
	
.StudioWork li a
{
	width:270px;
	height:66px;
	display:block;
	margin:auto;
	overflow:hidden;
	background:url(../images/menu/project1.png) no-repeat center bottom;
	padding:0px;
	margin-left:5px;	
}

.StudioWork li a:hover
{
	background:url(../images/menu/project1.png) no-repeat  0 -2px;
		padding:0px;
}