/*
      Created by Surajit KAYAL of WEBmagix

	  E-Mail: SurajitKayal@WEBmagix.co.in
	  
*/


body {
	/* background-color:#FFF; */
	/* background: url(images/graybg.jpg) top no-repeat #FFF; */
	/* background: url(images/page_bg.jpg) top right no-repeat #FFF; */
	background: url(images/bg-main.jpg) top center no-repeat #FFF;
	background-attachment: fixed;
	color:#333;
	font-family: Helvetica,sans-serif;
	font-size:12px;
	line-height:23px;
	margin:0;
	padding:0;
}
* { padding: 0; margin: 0; }

a:hover, a:active, a:focus {
   outline: none;
   -moz-outline-style: none;
}
img {
	border: none;
	vertical-align: middle;
}
em a {
	color:#999;
	text-decoration: none;
	border-bottom: 1px dotted #C7C7C7;
	font-family: Georgia;
	font-size: 13px;
}
em a:hover {
	color:#4DAEFF;
	text-decoration: none;
	border-bottom: 1px dotted #4DAEFF;
}
#wrapper { 
	 margin: 0 auto;
	 width: 960px;
	 border: 0;
	 /* margin-left: 150px; */
}


#feedback a {
	background: url(images/feedback.png) no-repeat;
	float: right;
	height: 220px;
	width: 103px;
	position: absolute;
	z-index: 2000;
	right: 0;
}
#feedback a:hover {
	background: url(images/feedback_hover.png) no-repeat;
	float: right;
	height: 220px;
	width: 103px;
	position: absolute;
	z-index: 2000;
	right: 0;
}

/* LEFT */
#leftcolumn { 
	 color: #999;
	 border: 0;
	 /* background: #FFF; */
	 background: none;
	 margin: 10px 5px 10px 0px;
	 padding: 6px;
	 width: 240px;
	 float: left;
}

#webmagix_logo {
	border: 0;
	background: none;
	width: 200px;
	height: 80px;
	margin-bottom: 24px;
}

/* RIGHT */
#rightcolumn { 
	 float: right;
	 color: #999;
	 border-left: 0px dotted #ccc;
	 background: none;
	 margin: 10px 0px 10px 0px;
	 padding: 6px;
	 height: 100%;
	 width: 678px;
	 display: inline;
	 position: relative;
}

#menu {
	border-bottom: 0;
	margin-top: 32px;
	color: #000;
	font-family: Georgia;
	text-transform: uppercase;
}
#intro {
	margin-top: 38px;
	font-size: 1.72em;
	line-height: 36px;
	color: #999;
}
#intro em a {
	font-size: 1.02em;
	color: #999;
}
#intro em a:hover {
	color:#4DAEFF;
	border-bottom: 0;
}
#secondrow #recentwork {
	height: 200px;
	width: 420px;
	margin-top: 28px;
	float: left;
}
#secondrow #work {
	border: 1px solid #DBDBDB;
	height: 200px;
	width: 420px;
	margin-top: 8px;
	float: left;
}

#work #pin1 {
	background: url(images/pin1.png) no-repeat;
	height: 32px;
	width: 32px;
	position: absolute;
	margin: -8px 0 0 16px;
	z-index: 2000;
}
#work #pin2 {
	background: url(images/pin2.png) no-repeat;
	height: 32px;
	width: 32px;
	position: absolute;
	margin: -8px 0 0 378px;
	z-index: 2000;
}
#secondrow #tweet {
	height: 200px;
	width: 240px;
	margin-top: 28px;
	float: right;
}
#secondrow #posts {
	border: 0;
	height: 200px;
	width: 240px;
	margin-top: 8px;
	float: right;
}

h4 {
	color: #4DAEFF;
	font-size:14px;
	font-family: Georgia;
	font-style: italic;
}
#tweet h4 {
	color: #BFBFBF;
}

#pageheader {
	margin-top: 38px;
	font-weight: bold;
	font-family: Georgia;
	height: 38px;
}
#pageheader span {
	color: #69D6FF;
	font-size: 14px;
}

#pagecontentleft {
	border: 0;
	float: left;
	width: 480px;
}
#psmall {
	color: #696969;
	font-size: 11px;
	line-height: 18px;
	margin-top: 12px;
}
#psmall:hover{
	background: #69D6FF;
	color: #FFF;
	padding: 2px;
	-moz-border-radius: 5px;
}
#pagecontentright {
	border: 0;
	float: right;
	width: 180px;
}
#pagecontentrightpartner {
	border: 0;
	float: right;
	width: 190px;
}
#prightsmall {
	color: #696969;
	font-size: 11px;
	line-height: 18px;
	margin-top: 12px;
	border-bottom: 1px dotted #ccc;
	padding: 4px;
}
#prightsmall span{
	color: #4DAEFF;
}

#partners #partpic {
	float: left;
	border: 1px solid #EFEFEF;
	width: 94px;
	height: 84px;
	background: #EFEFEF;
}
#partners #partpicB {
	float: left;
	border: 1px solid #c1c1c1;
	height: 38px;
	width: 93px;
	background: #EFEFEF;
}
#partners #partinfo {
	color: #999;
	float: left;
	width: 360px;
	padding: 6px;
	padding-left: 12px;
	margin-bottom: 22px;
}
#partinfo span {
	color: #696969;
	font-family: Georgia;
	font-weight: bold;
	font-style: italic;
}
/* Footer */

#footer {
	background: url(images/h4.gif) repeat-x;
	border-top: 1px solid #D9D9D9;
	width: 974px;
	height: 42px;
	margin: 0 auto; 
	clear: both;
	font-size: 11px;
 }

#flink {
	color: #999;
	float: left;
	padding: 8px 0 0 12px;
}
#flink a {
	color: #696969;
	text-decoration: none;
}
#flink a:hover {
	color: #69D6FF;
	border-bottom: 1px solid #69D6FF;
}
#copy {
	padding: 8px 12px 0;
	float: right;
	color: #666;
}

#copy a {
	color: #333;
}

#copy a:hover {
	color: #69D6FF;
}

/* Extended footer */
#quote {
	border: 0;
	color: #777;
	width: 960px;
	height: 36px;
	font-family: Georgia;
	clear: both;
	margin: 0 auto;
	font-style: italic;
	text-align: center;
	padding-top: 12px;
	padding-bottom: 24px;
}

#quote em {
	font-size: 10px;
	font-weight: bold;
	color: #4DAEFF;
}

.webmagix {
	font-weight: bold;
	font-family: Georgia;
}


/************* LEFT PANEL *************/

.panel {
position: absolute;
top: 160px;
left: 0;
display: none;
background: url(images/panel-trans.png) repeat;
border:1px solid #111111;
width: 740px;
height: auto;
padding: 30px 30px 30px 130px;
z-index: 3000;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #fff;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #4DAEFF;
text-decoration: none;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #f5f5f5;
text-decoration: none;
}

.panel h4 {
	color: #f5f5f5;
}

.panel #badge {
	background: url(images/wp01.png) no-repeat;
	border: 0;
	width: 100px;
	height: 100px;
	position: absolute;
	float: right;
	left: 6px;
	top: 6px;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 160px; left: 0;
color:#fff;
width: 103px;
height: 220px;
background: url(images/panel-open.png) left no-repeat;
display: block;
z-index: 3000;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 160px; left: 0;
color:#fff;
background: url(images/panel-hover.png) left no-repeat;
display: block;
}

a.active.trigger {
background: url(images/panel-opened2.png) left no-repeat;
position: absolute;
left: 902px;
}

.columns{
clear: both;
width: 100%;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 240px;
line-height: 22px;
}

.colcenter{
float: left;
width: 240px;
line-height: 22px;
}

.colright{
float: right;
width: 240px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}