/*
=========================================
Designed & Developed by Leo Design Studio
Author: Leo Jeyapathy
Tel: + 91 988 4000 855
E-mail: leodesignstudio@gmail.com
Web: http://www.leodesignstudio.com/
=========================================
*/

img, div {
	behavior: url(iepngfix/iepngfix.htc);
}

/*****************CSS GLOBAL********************/
* {
	padding: 0;
	margin: 0;
}
body {
	background-color:#000000;
	}
#bodymain {
	background:#000000 url(../images/bg.jpg) no-repeat center top;
	color:#FFFFFF;
	font:12px Arial, Helvetica, sans-serif;
	}
p {
	line-height:16px;
	padding-bottom:10px;
}
a:active {
	outline: none;
} /* for firefox, remove border around links during on click */
a:focus {
	-moz-outline-style: none;
}/* for firefox, remove border around links during on click */
a {
	outline:none;
	text-decoration:none;
	color:#FFFFFF;
}
a:hover{
	color:#FFD800;
	cursor:pointer;
}

img {
	border:none;
}
li {
	line-height:18px;
}
ul{
padding-left:15px;
margin-left:15px;}
.spacer {
	padding-top:20px;
}

.floatL { float:left}
.floatR { float:right}
.overH	{ overflow:hidden}
.clear	{ clear:both}

.Wid620 { width:620px;}
.Wid305 { width:305px;}
.Wid295 { width:295px;}
.Wid400 { width:470px;}

.MarT20 { margin-top:20px}
.MarB20 { margin-bottom:20px}
.MarB30 { margin-bottom:30px}
.MarR12 { margin-right:12px;}

.PadB30	{ padding-bottom:30px}
.PadB5	{ padding-bottom:5px}

/*****************MAIN********************/
.enter_sprite{ display:block; width:850px; height:480px; background:url(../images/enter_sprite.jpg) no-repeat;}
.enter_sprite.main{ background-position:0px 0px;}
.enter_sprite:hover.main{ background-position:0px -480px; cursor:pointer;}

#container_header, #container_content, #container_top, #container_footerwidth {
	width:940px;
	margin:0px auto;
}

.center{ width:500px; margin:0px auto}

#container_footer {
	width:100%;
	background-color:#000000;
	/*height:457px;*/
	height:60px;
	float:left;
}
#container_top {
	height:25px;
}
#container_header {
	height:140px;
}
#container_flash {
	height:500px;
	padding-bottom:15px;
}

#flash{ width:692px; height:437px; margin:42px auto 0px auto;}

#container_content {
	margin-top:15px;
}
#container_work {
width:940px;
padding-top:20px;
}
#container_footerwidth {
		padding-top:13px;
}
#container_footerwidth_img{
background:url(../images/footerdoor.jpg) no-repeat;
	background-position:center;
	width:940px;
	height:400px;
}
#logo {
	width:300px;
	float:left;
	padding:0px;
	padding-top:40px;
}
#menu {
	float:right;
	padding:0px;
	padding-top:51px;
	text-align:right;
	font:bold 26px Arial, Helvetica, sans-serif;
	font-weight:bold;
}

ul.main_menu li{
	list-style:none;
	float:left;
	color: #FFFFFF;
	padding:13px;
	background-color:#131313;
}

ul.main_menu li a{ display:block; float:left; background:url(../images/menu.png) no-repeat; height:14px; overflow:hidden}
ul.main_menu li a span{ visibility:hidden}
ul.main_menu li a.home	{ width:45px; background-position:-15px -13px}
ul.main_menu li a:hover.home, ul.main_menu li a.home.active	{ background-position:-15px -53px}
ul.main_menu li a.about	{ width:52px; background-position:-87px -13px}
ul.main_menu li a:hover.about, ul.main_menu li a.about.active	{ background-position:-87px -53px}
ul.main_menu li a.work	{ width:46px; background-position:-166px -13px}
ul.main_menu li a:hover.work, ul.main_menu li a.work.active	{ background-position:-166px -53px}
ul.main_menu li a.photo	{ width:113px; background-position:-242px -13px}
ul.main_menu li a:hover.photo, ul.main_menu li a.photo.active	{ background-position:-242px -53px}
ul.main_menu li a.contact{ padding-right:0px; margin-right:0px; width:71px; background-position:-383px -13px}
ul.main_menu li a:hover.contact, ul.main_menu li a.contact.active	{ background-position:-383px -53px}

#left_float {
	float:left;
}
#right_float {
	float:right;
}
.left_float {
	float:left;
}
.right_float {
	float:right;
}
#home_splitter, #home_splitter3 {
	width:313px;
	height:360px;
	float:left;
	position:relative;
}
#home_splitter2 {
	width:298px;
	height:360px;
	padding-left:15px;
	float:left;
	position:relative;
}
.work_splitter, .work_splitter3 {
	width:313px;
	float:left;
	position:relative;
}
.work_splitter2 {
	width:298px;
	padding-left:6px;
	padding-right:8px;
	float:left;
	position:relative;
}
.splitter_header{
background-color:#ffd800;
}
.splitter_header2{
background-color:#ffd800;
padding-top:20px;
}

h1
{
padding-left:5px;
font:normal 27px Arial, Helvetica, sans-serif;
font-weight:bold;
letter-spacing:-1px;
color:#0D0D0D;
background-color:#ffd800;
}
h2
{
width:290px;
height:25px;
padding-left:5px;
font:normal 22px Arial, Helvetica, sans-serif;
font-weight:bold;
letter-spacing:-1px;
color:#0D0D0D;
background-color:#FFD800;
}
h3
{
padding-left:5px;
font:normal 30px Arial, Helvetica, sans-serif;
font-weight:bold;
letter-spacing:-1px;
color:#ffd800;
background-color:#000000;
}
h4
{
padding-left:5px;
font:normal 26px Arial, Helvetica, sans-serif;
font-weight:bold;
letter-spacing:-1px;
color:#ffffff;
}
h5
{
font:normal 24px Arial, Helvetica, sans-serif;
font-weight:bold;
letter-spacing:-1px;
color:#ffffff;
position:absolute;
}

.inner_header{
width:940px;
background-color:#000000;
}

.dotted{
background: url(../images/dotted.jpg) repeat-x;
height:1px;

}

a.More{ overflow:hidden; display:block;background:#fff url(../images/more.gif) no-repeat; width:49px; height:13px;}
a:hover.More{ background-color:#ffd800}

.recent_proj{ display:block; width:287px; height:85px; background:url(../images/recent_work.jpg) no-repeat; margin-bottom:30px}
.recent_proj.Project1{ background-position:0px 0px}
.recent_proj:hover.Project1{ background-position:0px -95px}
.recent_proj.Project2{ background-position:0px -190px}
.recent_proj:hover.Project2{ background-position:0px -285px}

.footer_line{
background:url(../images/footer_line.jpg) repeat-x center top;
height:7px;
width:100%;
}

.about_photo{ display:block; width:144px; height:219px; background:url(../images/leo.jpg) no-repeat; margin-bottom:2px; margin-top:5px;}
.about_photo.Photo{ background-position:0px 0px}
.about_photo:hover.Photo{ background-position:-144px 0px}

/*****************Font Styles********************/
.top_txt {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:normal;
	color:#999999;
	padding:0px;
	margin-top:8px;
}
.footer_txt {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:normal;
	color:#999999;
	padding:0px;
}
a.top_footer:link, a.top_footer:visited, a.top_footer:active {
	font: normal normal 10px Arial, Helvetica, sans-serif;
	color: #999999;
	margin-top:8px;
	text-decoration: none;
}
a.top_footer:hover {
	font: normal normal 10px Arial, Helvetica, sans-serif;
	color: #ffd800;
	margin-top:8px;
	text-decoration: none;
}
a.about:link, a.about:visited, a.about:active {
	font: normal normal 12px Arial, Helvetica, sans-serif;
	color: #ffd800;
	text-decoration: none;
	cursor:pointer;
}
a.about:hover {
	font: normal normal 12px Arial, Helvetica, sans-serif;
	color: #ffffff;
	text-decoration: none;
	cursor:pointer;
}
a.work:link, a.work:visited, a.work:active {
	font: normal normal 12px Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	text-decoration: none;
	cursor:pointer;
}
a.work:hover {
	font: normal normal 12px Arial, Helvetica, sans-serif;
	color: #ffd800;
	text-decoration: none;
	cursor:pointer;
}


/*****************Accordion-starts********************/
.applemenu {
	margin: 10px 0;
	padding: 0;
	width: 100%; /*width of menu*/
	border: 0px solid #9A9A9A;
}
.applemenu div.silverheader a {
	background:#5d5d5c url(../images/silvergradient.gif) 95% 6px no-repeat;
	font: normal bold 12px Arial, Helvetica, sans-serif;
	color: white;
	display: block;
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	padding: 5px 0;
	padding-left: 8px;
	text-decoration: none;
	margin-top:2px;/*border: 1px solid #4f86ad;*/
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active {
	color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover {
	background:#484848 url(../images/silvergradientover.gif) 95% 6px no-repeat;
	color: white;
}
.applemenu div.submenu { /*DIV that contains each sub menu*/
	/*background: #CCCCCC;*/
	padding: 5px;/*height: 300px;*/ /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}
/*

/*****************Contact Form********************/

.contact_form {
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact_form li {
	list-style: none;
	margin: 0 0 8px 0;
	padding: 0;
}

form {
	margin: 0;
	padding: 0;
}

.input_box {
	width: 98%;
	margin: 0;
	padding: 5px 0 5px 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #949494;
	background: #202020;
	border: 0;
	/*border: 1px solid #6f6f6f;*/
}

select {
	background: #202020;
	border: 1px solid #2d2d2d;
}

.input_textbox {
	width: 98%;
	height: 120px;
	margin: 0;
	padding: 5px 0 5px 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #949494;
	background: #202020;
	border: 0;
}

.input_button {
	width: auto;
	height: auto;
	margin: 0;
	padding: 3px 4px 3px 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #949494;
	background: #202020;
	border: 0;
}

input:-moz-read-write, textarea:-moz-read-write {
-moz-user-modify:read-write !important;
}
:focus { outline: 0; }

/* ### Footer ### */
.Community li{ list-style:none; float:left; margin-left:5px;}
.Community li a{ display:block; height:16px; width:16px; float:left; background:url(../images/icon_footer.gif) no-repeat}
.Community li a.Facebook		{ background-position:0px 0px}
.Community li a:hover.Facebook	{ background-position:0px -17px}
.Community li a.Linkedin		{ background-position:-29px 0px}
.Community li a:hover.Linkedin	{ background-position:-29px -17px}
.Community li a.Tweeter			{ background-position:-58px 0px}
.Community li a:hover.Tweeter	{ background-position:-58px -17px}
.Community li a.Blog			{ background-position:-87px 0px}
.Community li a:hover.Blog		{ background-position:-87px -17px}

/* ### Works ### */
.webA{display: block; width:295px; height:150px; background:url(../images/work_web.jpg) no-repeat;}
.web1 { background-position:0px -150px}
a:hover.web1 { background-position:0px 0px}
.web2 { background-position:0px -450px}
a:hover.web2 { background-position:0px -300px}
.web3 { background-position:0px -750px}
a:hover.web3 { background-position:0px -600px}
.web4 { background-position:0px -1050px}
a:hover.web4 { background-position:0px -900px}
.web5 { background-position:0px -1350px}
a:hover.web5 { background-position:0px -1200px}
.web6 { background-position:0px -1650px}
a:hover.web6 { background-position:0px -1500px}
.web7 { background-position:0px -1950px}
a:hover.web7 { background-position:0px -1800px}
.web8 { background-position:0px -2250px}
a:hover.web8 { background-position:0px -2100px}
.web9 { background-position:0px -2550px}
a:hover.web9 { background-position:0px -2400px}
.web10 { background-position:0px -2850px}
a:hover.web10 { background-position:0px -2700px}
.web11 { background-position:0px -3150px}
a:hover.web11 { background-position:0px -3000px}
.web12 { background-position:0px -3450px}
a:hover.web12 { background-position:0px -3300px}
.webB{display: block; width:295px; height:150px; background:url(../images/work_webB.jpg) no-repeat;}
.web13 { background-position:0px -150px}
a:hover.web13 { background-position:0px 0px}
.web14 { background-position:0px -450px}
a:hover.web14 { background-position:0px -300px}
.web15 { background-position:0px -750px}
a:hover.web15 { background-position:0px -600px}
.web16 { background-position:0px -1050px}
a:hover.web16 { background-position:0px -900px}
.web17 { background-position:0px -1350px}
a:hover.web17 { background-position:0px -1200px}
.web18 { background-position:0px -1650px}
a:hover.web18 { background-position:0px -1500px}
.web19 { background-position:0px -1950px}
a:hover.web19 { background-position:0px -1800px}
.web20 { background-position:0px -2250px}
a:hover.web20 { background-position:0px -2100px}
.web21 { background-position:0px -2550px}
a:hover.web21 { background-position:0px -2400px}
.web22 { background-position:0px -2850px}
a:hover.web22 { background-position:0px -2700px}
.web23 { background-position:0px -3150px}
a:hover.web23 { background-position:0px -3000px}
.web24 { background-position:0px -3450px}
a:hover.web24 { background-position:0px -3300px}
.web25 { background-position:0px -3750px}
a:hover.web25 { background-position:0px -3600px}
.web26 { background-position:0px -4050px}
a:hover.web26 { background-position:0px -3900px}

.uid{display: block; width:295px; height:150px; background:url(../images/work_ui.jpg) no-repeat;}
.uid1 { background-position:0px -150px}
a:hover.uid1 { background-position:0px 0px}
.uid2 { background-position:0px -450px}
a:hover.uid2 { background-position:0px -300px}
.uid3 { background-position:0px -750px}
a:hover.uid3 { background-position:0px -600px}

.fla{display: block; width:295px; height:150px; background:url(../images/work_flash.jpg) no-repeat;}
.fla1 { background-position:0px -150px}
a:hover.fla1 { background-position:0px 0px}
.fla2 { background-position:0px -450px}
a:hover.fla2 { background-position:0px -300px}
.fla3 { background-position:0px -750px}
a:hover.fla3 { background-position:0px -600px}

.art{display: block; width:295px; height:150px; background:url(../images/work_art.jpg) no-repeat;}
.art1 { background-position:0px -150px}
a:hover.art1 { background-position:0px 0px}
.art2 { background-position:0px -450px}
a:hover.art2 { background-position:0px -300px}
.art3 { background-position:0px -750px}
a:hover.art3 { background-position:0px -600px}
.art4 { background-position:0px -1050px}
a:hover.art4 { background-position:0px -900px}
.art5 { background-position:0px -1350px}
a:hover.art5 { background-position:0px -1200px}
.art6 { background-position:0px -1650px}
a:hover.art6 { background-position:0px -1500px}


.ill{display: block; width:295px; height:150px; background:url(../images/work_illustration.jpg) no-repeat;}
.ill1 { background-position:0px -150px}
a:hover.ill1 { background-position:0px 0px}
.ill2 { background-position:0px -450px}
a:hover.ill2 { background-position:0px -300px}
.ill3 { background-position:0px -750px}
a:hover.ill3 { background-position:0px -600px}
.ill4 { background-position:0px -1050px}
a:hover.ill4 { background-position:0px -900px}
.ill5 { background-position:0px -1350px}
a:hover.ill5 { background-position:0px -1200px}
.ill6 { background-position:0px -1650px}
a:hover.ill6 { background-position:0px -1500px}
.ill7 { background-position:0px -1950px}
a:hover.ill7 { background-position:0px -1800px}
.ill8 { background-position:0px -2250px}
a:hover.ill8 { background-position:0px -2100px}
.ill9 { background-position:0px -2550px}
a:hover.ill9 { background-position:0px -2400px}
.ill10 { background-position:0px -2850px}
a:hover.ill10 { background-position:0px -2700px}
.ill11 { background-position:0px -3150px}
a:hover.ill11 { background-position:0px -3000px}
.ill12 { background-position:0px -3450px}
a:hover.ill12 { background-position:0px -3300px}
.ill13 { background-position:0px -3750px}
a:hover.ill13 { background-position:0px -3600px}
.ill14 { background-position:0px -4050px}
a:hover.ill14 { background-position:0px -3900px}
.ill15 { background-position:0px -4350px}
a:hover.ill15 { background-position:0px -4200px}
.ill16 { background-position:0px -4650px}
a:hover.ill16 { background-position:0px -4500px}
.ill17 { background-position:0px -4950px}
a:hover.ill17 { background-position:0px -4800px}
.ill18 { background-position:0px -5250px}
a:hover.ill18 { background-position:0px -5100px}

.logo{display: block; width:295px; height:150px; background:url(../images/work_logo.jpg) no-repeat;}
.logo1 { background-position:0px -150px}
a:hover.logo1 { background-position:0px 0px}
.logo2 { background-position:0px -450px}
a:hover.logo2 { background-position:0px -300px}
.logo3 { background-position:0px -750px}
a:hover.logo3 { background-position:0px -600px}
.logo4 { background-position:0px -1050px}
a:hover.logo4 { background-position:0px -900px}
.logo5 { background-position:0px -1350px}
a:hover.logo5 { background-position:0px -1200px}
.logo6 { background-position:0px -1650px}
a:hover.logo6 { background-position:0px -1500px}
.logo7 { background-position:0px -1950px}
a:hover.logo7 { background-position:0px -1800px}
.logo8 { background-position:0px -2250px}
a:hover.logo8 { background-position:0px -2100px}
.logo9 { background-position:0px -2550px}
a:hover.logo9 { background-position:0px -2400px}


.cs{display: block; width:295px; height:150px; background:url(../images/work_cs.jpg) no-repeat;}
.cs1 { background-position:0px -150px}
a:hover.cs1 { background-position:0px 0px}
.cs2 { background-position:0px -450px}
a:hover.cs2 { background-position:0px -300px}
.cs3 { background-position:0px -750px}
a:hover.cs3 { background-position:0px -600px}


/* ### Photography ### */
.photoA{display: block; width:295px; height:150px; background:url(../images/photography_animals.jpg) no-repeat;}
.photo1 { background-position:0px -150px}
a:hover.photo1 { background-position:0px 0px}
.photo2 { background-position:0px -450px}
a:hover.photo2 { background-position:0px -300px}
.photo3 { background-position:0px -750px}
a:hover.photo3 { background-position:0px -600px}
.photo4 { background-position:0px -1050px}
a:hover.photo4 { background-position:0px -900px}
.photo5 { background-position:0px -1350px}
a:hover.photo5 { background-position:0px -1200px}
.photo6 { background-position:0px -1650px}
a:hover.photo6 { background-position:0px -1500px}
.photo7 { background-position:0px -1950px}
a:hover.photo7 { background-position:0px -1800px}
.photo8 { background-position:0px -2250px}
a:hover.photo8 { background-position:0px -2100px}
.photo9 { background-position:0px -2550px}
a:hover.photo9 { background-position:0px -2400px}
.photo10 { background-position:0px -2850px}
a:hover.photo10 { background-position:0px -2700px}
.photo11 { background-position:0px -3150px}
a:hover.photo11 { background-position:0px -3000px}
.photo12 { background-position:0px -3450px}
a:hover.photo12 { background-position:0px -3300px}
.photoN{display: block; width:295px; height:150px; background:url(../images/photography_nature.jpg) no-repeat;}
.photo1 { background-position:0px -150px}
a:hover.photo1 { background-position:0px 0px}
.photo2 { background-position:0px -450px}
a:hover.photo2 { background-position:0px -300px}
.photo3 { background-position:0px -750px}
a:hover.photo3 { background-position:0px -600px}
.photo4 { background-position:0px -1050px}
a:hover.photo4 { background-position:0px -900px}
.photo5 { background-position:0px -1350px}
a:hover.photo5 { background-position:0px -1200px}
.photo6 { background-position:0px -1650px}
a:hover.photo6 { background-position:0px -1500px}
.photo7 { background-position:0px -1950px}
a:hover.photo7 { background-position:0px -1800px}
.photo8 { background-position:0px -2250px}
a:hover.photo8 { background-position:0px -2100px}
.photo9 { background-position:0px -2550px}
a:hover.photo9 { background-position:0px -2400px}
.photo10 { background-position:0px -2850px}
a:hover.photo10 { background-position:0px -2700px}
.photo11 { background-position:0px -3150px}
a:hover.photo11 { background-position:0px -3000px}
.photo12 { background-position:0px -3450px}
a:hover.photo12 { background-position:0px -3300px}
.photoM{display: block; width:295px; height:150px; background:url(../images/photography_misc.jpg) no-repeat;}
.photo1 { background-position:0px -150px}
a:hover.photo1 { background-position:0px 0px}
.photo2 { background-position:0px -450px}
a:hover.photo2 { background-position:0px -300px}
.photo3 { background-position:0px -750px}
a:hover.photo3 { background-position:0px -600px}
.photo4 { background-position:0px -1050px}
a:hover.photo4 { background-position:0px -900px}
.photo5 { background-position:0px -1350px}
a:hover.photo5 { background-position:0px -1200px}
.photo6 { background-position:0px -1650px}
a:hover.photo6 { background-position:0px -1500px}
.photo7 { background-position:0px -1950px}
a:hover.photo7 { background-position:0px -1800px}
.photo8 { background-position:0px -2250px}
a:hover.photo8 { background-position:0px -2100px}
.photo9 { background-position:0px -2550px}
a:hover.photo9 { background-position:0px -2400px}
.photo10 { background-position:0px -2850px}
a:hover.photo10 { background-position:0px -2700px}
.photo11 { background-position:0px -3150px}
a:hover.photo11 { background-position:0px -3000px}
.photo12 { background-position:0px -3450px}
a:hover.photo12 { background-position:0px -3300px}
.photoM2{display: block; width:295px; height:150px; background:url(../images/photography_misc2.jpg) no-repeat;}
.photo1 { background-position:0px -150px}
a:hover.photo1 { background-position:0px 0px}
.photo2 { background-position:0px -450px}
a:hover.photo2 { background-position:0px -300px}
.photo3 { background-position:0px -750px}
a:hover.photo3 { background-position:0px -600px}
.photo4 { background-position:0px -1050px}
a:hover.photo4 { background-position:0px -900px}
.photo5 { background-position:0px -1350px}
a:hover.photo5 { background-position:0px -1200px}
.photo6 { background-position:0px -1650px}
a:hover.photo6 { background-position:0px -1500px}
.photo7 { background-position:0px -1950px}
a:hover.photo7 { background-position:0px -1800px}
.photo8 { background-position:0px -2250px}
a:hover.photo8 { background-position:0px -2100px}
.photo9 { background-position:0px -2550px}
a:hover.photo9 { background-position:0px -2400px}
.photo10 { background-position:0px -2850px}
a:hover.photo10 { background-position:0px -2700px}
.photo11 { background-position:0px -3150px}
a:hover.photo11 { background-position:0px -3000px}
.photo12 { background-position:0px -3450px}
a:hover.photo12 { background-position:0px -3300px}





/* ### Left Scrolling Menu ### */
#menu1 a {
	color:#FFFFFF;
	background-color:#333333;
	text-decoration:none;
	text-indent:1ex;
}
#menu1 a:active {
	color:#FFFFFF;
	text-decoration:none;
}
#menu1 a:hover {
	color:#000000;
	background-color:#ffd800;
}
#menu1 a:visited {
	text-decoration:none;
}

/*****************END OF CSS********************//*