@charset "utf-8";
/* CSS Document */


body
{
height: 100%; 
width: 100%;
text-align:center;
height: auto;
display: block;
}

p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}


p.big {line-height: 220%}

#wrapper
{
text-align:center;
height: 100%;
background: url(imgs/background1024.png) repeat-y top center scroll;
min-height:1800px;
z-index:0;
overflow: inherit;
}

#wrapper2
{
width:100%;
margin: 0 auto;
height: auto;
}

div
{
margin:0 auto;
text-align:center;
height: auto;
}

#wrapper_bottom
{
width:950px;
height:auto;
margin:0 auto;
text-align:center;
position: relative; 
}

#wrapper_home
{
	background: transparent;
	width: 916px;
	height:1600px;
	margin:0px auto;
	position:relative;
	 top: 0px; 
	 left: 15px;
	 z-index:0;
}

#wrapper_home_all
{ 
width:auto;
height:auto;
}

#header
{
background-image:url(imgs/header.png) ; 
height: 159px ; 
background-repeat:no-repeat; 
background-position:center;
margin-left:auto; 
margin-right:auto;
}
	
ul
{
list-style: none;
display:inline-block;
float:left;
}

ul.nav li 
{
display:inline-block;
float:left;
}

#nav
{
background-position:center;
height:56px;
width:616px;
clear: both;
position: relative;
margin:0 auto;
}

#nav a span {
	visibility: hidden;
	text-decoration: none;
}

#na a:hover {
	text-decoration: none;
}


a#nav_home span {
	 display: none; 
}

a#nav_home {
    margin-left: auto;
    margin-right: auto;
    display: block;
    background:url(imgs/nav/home.png) no-repeat;
	width: 103px;
    height: 56px;
	float:left;	
}

a#nav_home_selected:hover {
	background:url(imgs/nav/home_selected.png) no-repeat;
}

a#nav_home_selected span {
	 display: none; 
}

a#nav_home_selected {
    margin-left: auto;
    margin-right: auto;
    display: block;
    background:url(imgs/nav/home_selected.png) no-repeat;
	width: 103px;
    height: 56px;
	float:left;	
}

a#nav_home:hover {
	background:url(imgs/nav/home_over.png) no-repeat;
}

a#nav_download span { 
display: none; 
}

a#nav_download {
    margin-left: auto;
    margin-right: auto;
    display: block;
	background: url(imgs/nav/download.png) no-repeat;
	width: 156px;
    height: 56px;
	float:left;
}

a#nav_download:hover {
	background: url(imgs/nav/download_over.png) no-repeat;
}

a#nav_download_selected span { 
display: none; 
}

a#nav_download_selected {
    margin-left: auto;
    margin-right: auto;
    display: block;
	background: url(imgs/nav/download_selected.png) no-repeat;
	width: 156px;
    height: 56px;
	float:left;
}

a#nav_download_selected:hover {
	background: url(imgs/nav/download_selected.png) no-repeat;
}

a#nav_video span { 
display: none; 
}

a#nav_video {
    margin-left: auto;
    margin-right: auto;
    display: block;
	background: url(imgs/nav/video.png) no-repeat;
	width: 97px;
    height: 56px;
	float:left;	
}

a#nav_video:hover {
	background: url(imgs/nav/video_over.png) no-repeat;
}

a#nav_video_selected span { 
display: none; 
}

a#nav_video_selected {
    margin-left: auto;
    margin-right: auto;
    display: block;
	background: url(imgs/nav/video_selected.png) no-repeat;
	width: 97px;
    height: 56px;
	float:left;	
}

a#nav_video_selected:hover {
	background: url(imgs/nav/video_selected.png) no-repeat;
}



a#nav_team span { 
display: none; 
}

a#nav_team {
    margin-left: auto;
    margin-right: auto;
    display: block;
	background: url(imgs/nav/team.png) no-repeat;
	width: 108px;
    height: 56px;
	float:left;
}

a#nav_team:hover {
	background: url(imgs/nav/team_over.png) no-repeat;
}

a#nav_team_selected span { 
display: none; 
}

a#nav_team_selected {
    margin-left: auto;
    margin-right: auto;
    display: block;
	background: url(imgs/nav/team_selected.png) no-repeat;
	width: 108px;
    height: 56px;
	float:left;
}

a#nav_team_selected:hover {
	background: url(imgs/nav/team_selected.png) no-repeat;
}


a#nav_feedback span { 
display: none; 
}

a#nav_feedback {
    margin-left: auto;
    margin-right: auto;
    display: block;
	background: url(imgs/nav/feedback.png) no-repeat;
	width: 152px;
    height: 56px;
	float:left;
}

a#nav_feedback:hover {
	background: url(imgs/nav/feedback_over.png) no-repeat;
}

a#nav_feedback_selected span { 
display: none; 
}

a#nav_feedback_selected {
    margin-left: auto;
    margin-right: auto;
    display: block;
	background: url(imgs/nav/feedback_selected.png) no-repeat;
	width: 152px;
    height: 56px;
	float:left;
}

a#nav_feedback_selected:hover {
	background: url(imgs/nav/feedback_selected.png) no-repeat;
}
/*with a dot in front* you define your own style*/


/*homepage video panel starts here*/


#wrap_home_vid
{background-position:center;
width:601px;
height:auto;
margin-right:auto;
margin-top:0;
margin-left:15px;
text-align:center;
float:left;
}

.panel_home_vid {
	position: relative;
	margin-top: 20px;
	font: 12px Verdana;
	width: 601px;
}

.panel_home_vid p {
	margin: 0 0 0 0;
	font-size: 12px;
	width: 601px;
}

.panel_home_vid_body {
	background: url(imgs/panel_home_vid/panel_body.png) repeat-y bottom left;
	width: 601px;
	text-align:center;
}

.panel_home_vid_body_video {
	width: 601px;
	padding-top: 80px;
	padding-bottom: 20px;
	text-align:center;
}

.panel_home_vid_body_textwrap {
	width:  500px;
	margin: 0 auto;
	position:relative;
}

.panel_home_vid_body_p {
	width: 450px;
	margin: 0 auto; /* works wonders for all browsers to centre align divs}*/
	position:static;
}

.panel_home_vid_body_p p
{
	text-align: justify;
	line-height: 120%;
	width:450px;
}

.panel_home_vid_top {
	background: url(imgs/panel_home_vid/panel_top.png) no-repeat;
	height: 46px;
	width: 601px;
}

.panel_home_vid_top div.panel_home_vid_head {
	background: url(imgs/panel_home_vid/panel_header.png) no-repeat;
	position: relative;
    width: 601px;
	height: 38px;
	top: 18px;
	padding-top: 40px;
	font-size: 15px;
	font-weight: bolder;
}

.panel_home_vid_top h1 {
	font-size: 15px;
	font-weight: bolder;
    text-align: center;
	width: 601px;
}



.panel_home_vid_bottom {
	background: url(imgs/panel_home_vid/panel_bottom.png) no-repeat;
	height: 38px;
	width: 601px;
}


.panel_home_vid_head h1 {
    position: absolute;
	float:left;
    left: 0px;
    top: 15px;
    width: 601px;
    height: 38px;
}

.panel_home_vid_head h1 span {
    display: none;
}

#xpanel_home_vid_picopoke .panel_home_vid_head h1 {
    background: url(imgs/headers/header_aboutpicopoke.png) no-repeat;
	margin-left:0px;
	width: 601px;	
}

p.homepageh2
{color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
text-align:left;}

/*homepage video panel ends here*/

.bodypad {
	clear: both;
    margin: 0;
    padding: 0;
}

.clear { clear: both; }

#footer{ color:#333333 ; background-color:#ECD672} 

/*homepage news panel starts here*/

#wrap_postit_home
{background-position:center;
width:300px;
height:auto;
margin-right:auto; 
text-align:center;
float:left;
}

.postit_home {
	position: relative;
	margin-top: 20px;
	font: 12px Verdana;
	width: 302px;
}

.postit_home p {
	margin: 0 0 0 0;
	font-size: 12px;
	width: 300px;
}

.postit_home_body {
	background: url(imgs/postit_home/postit_body.png) repeat-y bottom left;
	width: 300px;
	text-align:center;
}

.postit_home_body_textwrap {
	width:  280px;
	margin: 0 auto;
	padding-top:90px;
}

.postit_home_body_p {
	width: 240px;
	margin: 0 auto; /* works wonders for all browsers to centre align divs}*/
	position:static;
}

.postit_home_body_p p
{
	text-align: justify;
	line-height: 120%;
	width:240px;
}

.postit_home_top {
	background: url(imgs/postit_home/postit_top.png) no-repeat;
	height: 87px;
	width: 300px;
}

.postit_home_top div.postit_home_head {
	background: url(imgs/postit_home/postit_header.png) no-repeat;
	position: relative;
    width: 300px;
	height: 180px;
	top: 19px;
	padding-top: 30px;
	font-size: 15px;
	font-weight: bolder;
}


.postit_home_bottom {
	background: url(imgs/postit_home/postit_bottom.png) no-repeat;
	height: 77px;
	width: 300px;
}

.stylewhite {
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	text-align:left;
}

.stylewhitethin {
	color: #FFFFFF;
	text-align:left;
}


.centralise
{margin: 0 auto;
text-align:center;
}

a#playpicopoke span { display: none; }
a#playpicopoke {
    display: block;
	background: url(imgs/panel_home_vid/playpicopoke.png) no-repeat;
	width: 180px;
    height: 163px;
}

a#playpicopoke:hover {
	background: url(imgs/panel_home_vid/playpicopoke_over.png) no-repeat;
}

.playpicopokediv
{ z-index:2;
width: 180px;
    height: 163px;
top:100px;
right:0px;
position:absolute;
}
/*homepage news panel ends here*/ 


/*wide page starts here */

#wrapper_wide
{ background-position:center;
width:800px;
height:auto;
text-align:center;
margin:0 auto;
}

.panel_wide {
	position: relative;
	font: 12px Verdana;
	width: 800px;
	margin: 0 auto;
	text-align:center;
}

.panel_wide p {
	margin: 0 0 0 0;
	font-size: 12px;
	width: 800px;
}

.panel_wide_body {
	background: url(imgs/panel_wide/panel_body.png) repeat-y bottom left;
	width: 800px;
	text-align:center;
}

.panel_wide_body_textwrap {
	width:  800px;
	margin: 0 auto;
	padding-top:50px;
}

.panel_wide_body_p {
	width: 650px;
	margin: 0 auto; /* works wonders for all browsers to centre align divs}*/
	position:static;
}

.panel_wide_body_p p
{
	text-align: justify;
	line-height: 120%;
	width:650px;
}

.panel_wide_top {
	background: url(imgs/panel_wide/panel_top.png) no-repeat;
	height: 41px;
	width: 800px;
}

.panel_wide_top div.panel_wide_head {
	background: url(imgs/panel_wide/panel_header.png) no-repeat;
	position: relative;
    width: 800px;
	height: 57px;
	top: 18px;
	padding-top: 40px;
	font-size: 15px;
	font-weight: bolder;
}

.panel_wide_top h1 {
	font-size: 15px;
	font-weight: bolder;
    text-align: center;
	width: 800px;
}



.panel_wide_bottom {
	background: url(imgs/panel_wide/panel_bottom.png) no-repeat;
	height: 34px;
	width: 800px;
}


.panel_wide_head h1 {
    position: absolute;
	float:left;
    left: 0px;
    top: 15px;
    width: 800px;
    height: 38px;
	}

.panel_wide_head h1 span {
    display: none;
}

#xpanel_feedback .panel_wide_head h1 {
    background: url(imgs/headers/header_feedback.png) no-repeat;
	margin: 0 auto;
	width: 800px;	
}

#xpanel_thankyou .panel_wide_head h1 {
    background: url(imgs/headers/header_thankyou.png) no-repeat;
	margin: 0 auto;
	width: 800px;	
}


/*wide panel ends here*/

/*feedback panel starts here*/
#wrapper_feedback
{background-position:center;
width:750px;
height:auto;
margin: 0 auto;
text-align:center;
padding-top:35px;
padding-bottom:20px;
}

.panel_feedback {
	position: relative;
	margin-top: 20px;
	font: 12px Verdana;
	width: 750px;
}

.panel_feedback p {
	margin: 0 0 0 0;
	font-size: 12px;
	width: 750px;
}

.panel_feedback_body {
	background: url(imgs/panel_feedback/feedback_body.png) repeat-y bottom left;
	width: 750px;
	text-align:center;
}

.panel_feedback_body_textwrap {
	width:  650px;
	margin: 0 auto;
	padding-top:30px;
}

.panel_feedback_body_p {
	width: 650px;
	margin: 0 auto; /* works wonders for all browsers to centre align divs}*/
	position:static;
	text-align:center;
}

.panel_feedback_body_p p
{ font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: justify;
	line-height: 120%;
	width:650px;
}

.panel_feedback_top {
	background: url(imgs/panel_feedback/feedback_top.png) no-repeat;
	height: 26px;
	width: 750px;
}

.panel_feedback_top div.panel_feedback_head {
	background: url(imgs/panel_feedback/feedback_over.png) no-repeat;
	position: relative;
    width: 750px;
	height: 49px;
	padding-top:40px;
	font-size: 15px;
	font-weight: bolder;
}

.panel_feedback_top h1 {
	font-size: 15px;
	font-weight: bolder;
    text-align: center;
	width: 750px;
}


.panel_feedback_bottom {
	background: url(imgs/panel_feedback/feedback_bottom.png) no-repeat;
	height: 26px;
	width: 750px;
}


.panel_feedback_head h1 {
    position: absolute;
	float:left;
    left: 0px;
    top: 15px;
    width: 750px;
    height: 38px;
	}

.panel_feedback_head h1 span {
    display: none;
}

form#feedback {
 color: #000000;
 border: 1px solid #999999;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 margin: 0 auto;
 }

#login .text {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 width: 100px;
 margin-right: 6px;

}

#login .buttons {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 background-color: #333333;
 color: #FFFFFF;
 margin-right: 6px;
}

/*feedback panel ends here*/
/*feedback form styling starts here*/
div.form_wrapper
{margin: 0 auto;
}

table.comments {
padding:20px;
margin: 0 auto;
text-align:center;
width:auto;
height:auto;
}

td.comments {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	vertical-align:top;
	text-align:left;
	padding:5px;
	width:389px;
	}

td.post {text-align: center;
border:none;
}


th.comments {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:right;
	vertical-align:top;
	padding:5px;
	width:254px;
	}

form.comments {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:left;
	}

input.comments {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:left;
	border:none;	
}

input.post {
	background: url(imgs/post/commentpost.png) no-repeat;
	width: 68px;
	height:32px;
	border:none;
	
}


textarea.comments{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:left;
	border:none;
	overflow:scroll;
	}
	
#imagedest
{text-align:left;
float:left;
height:120px;
width:157px;}

div.radiobuttons
{float:left;
text-align:left;
margin-left:20px;
width: 100px}

/*feedback form styling ends here*/
/* feedback page comments display section starts here */
.commentimage
{width:157px;
height:120px;
float:left;
}

.panel_feedback_body_textwraptwo {
	width:  600px;
	margin: 0 auto;
}

.commenttextwrapper
{width:597px;
height:auto;
float:left;
margin: 0 auto;
}

.commenttextbox
{width:100px;
height:auto;
float:left;
padding: 20px;
}

.comments_name
{height:auto;
width:auto;
padding:0;
margin:0;
}

p.comments_name
{font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:800;}

.comments_date
{height:auto;
width:auto;
padding:0;
padding-bottom:10px;
margin:0;
}

p.comments_date
{
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:100;
line-height:normal;
}
p.comments_text
{font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
} 

/* video page starts here*/

#wrap_video
{background-position:center;
width:601px;
height:auto;
margin: 0 auto;
text-align:center;
}

.panel_video {
	position: relative;
	margin-top: 20px;
	font: 12px Verdana;
	width: 601px;
}

.panel_video p {
	margin: 0 0 0 0;
	font-size: 12px;
	width: 601px;
}

.panel_video_body {
	background: url(imgs/panel_home_vid/panel_body.png) repeat-y bottom left;
	width: 601px;
	text-align:center;
}

.panel_video_body_video_all {
	width: 601px;
	padding-top: 50px;
	padding-bottom: 20px;
	text-align:center;
}

.panel_video_body_title{
	background:url(imgs/panel_home_vid/title.png) no-repeat;
	width:265px;
	height:31px;
	padding-top:5px;
	padding-bottom:8px;
	margin-bottom:25px;
	margin: 0 auto;
}

p.panel_video_body_title_p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
text-align:center;
width:265px;
height:31px;
padding-top:2px;
}


.panel_video_body_videoframe{
	width: 601px;
	text-align:center;
	height:auto;
}

.panel_video_body_textframe{
	width: 400px;
	margin: 0 auto;
	margin-top:15px;
	margin-bottom:40px;
	height:auto;
}

.panel_video_body_emoticon{
	width: 230px;
	margin: 0 auto;
	margin-top:10px;
	margin-bottom:0px;
	height:auto;
}

.panel_video_body_screenshot{
	width: 420px;
	margin: 0 auto;
	padding-top:20px;
	padding-bottom:10px;
	height:auto;
	text-align:center;
	margin: 0 auto;
}

.panel_video_body_screenshot_emoticon{
	width: 140px;
	margin: 0 auto;
	padding-top:20px;
	padding-bottom:30px;
	height:60px;
	text-align:center;
	margin: 0 auto;
}

.moopoot
{height:60px;
width:60px;
float:left;
padding:5px;
}

p.panel_video_body_textframe_p{
	width: 400px;
	text-align:left;
	height:auto;
	line-height:150%;
}


.panel_video_top {
	background: url(imgs/panel_home_vid/panel_top.png) no-repeat;
	height: 46px;
	width: 601px;
}

.panel_video_top div.panel_video_head {
	background: url(imgs/panel_home_vid/panel_header.png) no-repeat;
	position: relative;
    width: 601px;
	height: 38px;
	top: 18px;
	padding-top: 40px;
	font-size: 15px;
	font-weight: bolder;
}

.panel_video_top h1 {
	font-size: 15px;
	font-weight: bolder;
    text-align: center;
	width: 601px;
}



.panel_video_bottom {
	background: url(imgs/panel_home_vid/panel_bottom.png) no-repeat;
	height: 38px;
	width: 601px;
}


.panel_video_head h1 {
    position: absolute;
	float:left;
    left: 0px;
    top: 15px;
    width: 601px;
    height: 38px;
}

.panel_video_head h1 span {
    display: none;
}

#xpanel_download .panel_video_head h1 {
    background: url(imgs/headers/header_download.png) no-repeat;
	margin-left:0px;
	width: 601px;	
}

#xpanel_video .panel_video_head h1 {
    background: url(imgs/headers/header_video.png) no-repeat;
	margin-left:0px;
	width: 601px;	
}

/* video page ends here*/
/* news page ends here*/

.newsbox_wrapper
{
text-align:left;
height:auto;
width:240px;
}

.newstextbox
{
width:240px;
height:auto;
padding-top:20px;
padding-bottom:30px;
}

.news_head
{height:auto;
width:240px;
padding:0;
margin:0;
}

p.news_head
{font-size:14px;
font-weight:800;
text-align: left;}

.news_date
{height:auto;
width:240px;
padding:0;
margin:0;
}

p.news_date
{
font-size:9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:100;
line-height:normal;
text-align:left;
}
p.news_text
{font-size:12px;
text-align:left;
} 

.news_links_box
{
width:240px;
height:auto;
padding-top:10px;
padding-bottom:20px;
text-align:left;
font-size:12px;
}

a.news_links:link {font-family:Verdana, Arial, Helvetica, sans-serif; color: red; text-decoration: none; }
a.news_links:visited {font-family:Verdana, Arial, Helvetica, sans-serif; color: red; text-decoration: none; }
a.news_links:hover {font-family:Verdana, Arial, Helvetica, sans-serif; color: maroon; text-decoration: none; }
a.news_links:active {font-family:Verdana, Arial, Helvetica, sans-serif; color: red; text-decoration: none;  } 

img            {border:none;}
img.abc       {border:2px dashed; border-color:transparent; }
img.abc:hover {border:2px dashed ; border-color: #999999;  } 

img.screenshot       {border:2px solid; border-color:transparent; }
img.screenshot:hover {border:2px solid; border-color:#FFFFFF;  } 

p
{
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

div
{
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}


/* team page starts here----- 
when u do absolute positioning, its like as if taking the element out of the div. just give a height to the (relative) div which is the parent of the absolute ones (the container div to all the absolute content) */

#wrapper_team /*<-- wraps 8 boxes 
1.<div class = wrapper div></div>
   2.<div class = div with relative pos></div>
      3.team contents with absolute pos*/
{
top: 0px; 
left: 0px; 
width:952px;
height:1250px;
text-align:center;
margin: 0 auto;
position: relative;
}

.team_memberbox
{
text-align:center;
margin: 0 auto;
background:transparent;
}

.linkfont
{
font-size:10px;
}
/*kevin panel starts here http://reference.sitepoint.com/css/z-index/demo */

.image_kevin
{
  position: absolute;
  z-index:3;
  background: url(teampanel/polaroid_images/polaroid_kevin.png) no-repeat;
  width:187px;
  height:197px;
  left:18px;  /* <-- customise here*/
  top:15px;
}

.header_kevin /* <-- do not customise*/
{  
  position: absolute;
  z-index:2;
  background: url(teampanel/profile_header/profileheader_kevin.png) no-repeat;
  top:10px;
  width:379px;
  height:33px;
}

.profilepanel_kevin
{
  position: absolute;
  z-index:1;
  background: url(teampanel/images/teampanelfull.png) no-repeat;
  width:379px;
  height:189px;
  top:40px;  /* <-- customise here*/
  left:85px;  /* <-- customise here*/
}

.quote_kevin
{
position:absolute;
  z-index:4;
  width:200px;
  height:50px;
  top:80px;  /* <-- customise here*/
  left: 140px;  /* <-- customise here*/
  }

.link_kevin

{
	position:absolute;
	z-index:6;
	width:250px;
	height:20px;
	top: 141px;  /* <-- customise here*/
	left: 120px;  /* <-- customise here*/
}
 
/*kevin panel ends here */
/*karkin panel starts here http://reference.sitepoint.com/css/z-index/demo */

.image_karkin
{
  position:absolute;
  z-index:3;
  background: url(teampanel/polaroid_images/polaroid_karkin.png) no-repeat;
  width:190px;
  height:197px;
  left:765px;  /* <-- customise here*/
  top:15px;
}

.header_karkin /* <-- do not customise*/
{
  position:absolute;
  z-index:2;
  top: 10px;
  background: url(teampanel/profile_header/profileheader_karkin.png) no-repeat;
  width:379px;
  height:33px;
}

.profilepanel_karkin
{
  position:absolute;
  z-index:1;
  
  background: url(teampanel/images/teampanelfull.png) no-repeat;
  width:379px;
  height:189px;
   top:30px;  /* <-- customise here*/
  left:480px;  /* <-- customise here*/
}

.quote_karkin
{
position:absolute;
  z-index:4;
  width:200px;
  height:50px;
  top: 70px;  /* <-- customise here*/
  left: 55px;  /* <-- customise here*/
  }

.link_karkin

{
position:absolute;
z-index:6;
width:280px;
height:20px;
top: 140px;  /* <-- customise here*/
left: 30px;  /* <-- customise here*/
}

/*karkin panel ends here */
/*clara panel starts here http://reference.sitepoint.com/css/z-index/demo */

.image_clara
{
  position:absolute;
  z-index:3;
  background: url(teampanel/polaroid_images/polaroid_clara.png) no-repeat;
  width:201px;
  height:208px;
  left:285px;  /* <-- customise here*/
  top:255px;
}

.header_clara /* <-- do not customise*/
{
  position:absolute;
  z-index:2;
  top: 10px;
  background: url(teampanel/profile_header/profileheader_clara.png) no-repeat;
  width:379px;
  height:33px;
}

.profilepanel_clara
{
	position:absolute;
	z-index:1;
	background: url(teampanel/images/teampanelfull.png) no-repeat;
	width:379px;
	height:189px;
	top:280px;  /* <-- customise here*/
	left:20px;  /* <-- customise here*/
}

.quote_clara
{
position:absolute;
  z-index:4;
  width:200px;
  height:50px;
  top: 80px;  /* <-- customise here*/
  left: 70px;  /* <-- customise here*/
  }

.link_clara

{
position:absolute;
z-index:6;
width:280px;
height:20px;
top: 140px;  /* <-- customise here*/
left: 40px;  /* <-- customise here*/
}
 
/*clara panel ends here */
/*jesse panel starts here http://reference.sitepoint.com/css/z-index/demo */

.image_jesse
{
  position:absolute;
  z-index:3;
  background: url(teampanel/polaroid_images/polaroid_jesse.png) no-repeat;
  width:168px;
  height:181px;
  left:505px;  /* <-- customise here*/
  top:240px;
}

.header_jesse /* <-- do not customise*/
{
  position:absolute;
  z-index:2;
  top: 10px;
  background:url(teampanel/profile_header/profileheader_jesse.png) no-repeat;
  width:379px;
  height:33px;
}

.profilepanel_jesse
{
  position:absolute;
  z-index:1;
  
  background: url(teampanel/images/teampanelfull.png) no-repeat;
  width:379px;
  height:189px;
  top:275px;  /* <-- customise here*/
  left:570px;  /* <-- customise here*/
}

.quote_jesse
{
	position:absolute;
	z-index:4;
	width:200px;
	height:50px;
	top: 80px;  /* <-- customise here*/
	left: 125px;  /* <-- customise here*/
  }

.link_jesse

{
position:absolute;
z-index:6;
width:280px;
height:20px;
top: 140px;  /* <-- customise here*/
left: 95px;  /* <-- customise here*/
}
 
/*jesse panel ends here */

/*munir panel starts here http://reference.sitepoint.com/css/z-index/demo */

.image_munir
{
  position:absolute;
  z-index:3;
  background: url(teampanel/polaroid_images/polaroid_munir.png) no-repeat;
  width:173px;
  height:182px;
  left:25px;  /* <-- customise here*/
  top:500px;
}

.header_munir /* <-- do not customise*/
{
  position:absolute;
  z-index:2;
  top: 10px;
  background: url(teampanel/profile_header/profileheader_munir.png) no-repeat;
  width:379px;
  height:33px;
}

.profilepanel_munir
{
  position:absolute;
  z-index:1;
  
  background: url(teampanel/images/teampanelfull.png) no-repeat;
  width:379px;
  height:189px;
  top:535px;  /* <-- customise here*/
  left:90px;  /* <-- customise here*/
}

.quote_munir
{
position:absolute;
  z-index:4;
  width:200px;
  height:50px;
  top: 80px;  /* <-- customise here*/
  left: 120px;  /* <-- customise here*/
  }

.link_munir

{
position:absolute;
z-index:6;
width:320px;
height:20px;
top: 140px;  /* <-- customise here*/
left: 45px;  /* <-- customise here*/
}
 
/*munir panel ends here */

/*vincent panel starts here http://reference.sitepoint.com/css/z-index/demo */

.image_vincent
{
  position:absolute;
  z-index:3;
  background: url(teampanel/polaroid_images/polaroid_vincent.png) no-repeat;
  width:181px;
  height:190px;
  left:500px;  /* <-- customise here*/
  top:498px; 
}

.header_vincent /* <-- do not customise*/
{
  position:absolute;
  z-index:2;
  top: 10px;
  background: url(teampanel/profile_header/profileheader_vincent.png) no-repeat;
  width:379px;
  height:33px;
}

.profilepanel_vincent
{
  position:absolute;
  z-index:1;
  
  background: url(teampanel/images/teampanelfull.png) no-repeat;
  width:379px;
  height:189px;
  top:535px;   /* <-- customise here*/
  left:580px;  /* <-- customise here*/
}

.quote_vincent
{
position:absolute;
  z-index:4;
  width:220px;
  height:50px;
  top: 80px;  /* <-- customise here*/
  left: 120px;  /* <-- customise here*/
  }

.link_vincent

{
position:absolute;
z-index:6;
width:200px;
height:20px;
top: 140px;  /* <-- customise here*/
left: 160px;  /* <-- customise here*/
}
 
/*vincent panel ends here */


/*yixin panel starts here http://reference.sitepoint.com/css/z-index/demo */

.image_yixin
{
  position:absolute;
  z-index:3;
  background: url(teampanel/polaroid_images/polaroid_yixin.png) no-repeat;
  width:187px;
  height:195px;
  left:285px;  /* <-- customise here*/
  top:750px;
}

.header_yixin /* <-- do not customise*/
{
  position:absolute;
  z-index:2;
  top: 10px;
  background: url(teampanel/profile_header/profileheader_yixin.png) no-repeat;
  width:379px;
  height:33px;
}

.profilepanel_yixin
{
  position:absolute;
  z-index:1;
  background: url(teampanel/images/teampanelfull.png) no-repeat;
  width:379px;
  height:189px;
  top:780px;  /* <-- customise here*/
  left:25px;  /* <-- customise here*/
}

.quote_yixin
{
position:absolute;
  z-index:4;
  width:200px;
  height:50px;
  top: 80px;  /* <-- customise here*/
  left: 50px;  /* <-- customise here*/
  }

.link_yixin

{
position:absolute;
z-index:6;
width:280px;
height:20px;
top: 140px;  /* <-- customise here*/
left: 30px;  /* <-- customise here*/
}
 
/*yixin panel ends here http://reference.sitepoint.com/css/z-index/demo */
/*tyas panel starts here http://reference.sitepoint.com/css/z-index/demo */

.image_tyas
{
  position:absolute;
  z-index:3;
  background: url(teampanel/polaroid_images/polaroid_tyas.png) no-repeat;
  width:168px;
  height:182px;
  left:785px;  /* <-- customise here*/
  top:760px; 
}

.header_tyas /* <-- do not customise*/
{
  position:absolute;
  z-index:2;
  top: 10px;
  background:  url(teampanel/profile_header/profileheader_tyas.png) no-repeat;
  width:379px;
  height:33px;
}

.profilepanel_tyas
{
  position:absolute;
  z-index:1;
  
  background: url(teampanel/images/teampanelfull.png) no-repeat;
  width:379px;
  height:189px;
  top:790px;   /* <-- customise here*/
  left:500px;  /* <-- customise here*/
}

.quote_tyas
{
position:absolute;
  z-index:4;
  width:200px;
  height:50px;
  top: 70px;  /* <-- customise here*/
  left: 60px;  /* <-- customise here*/
  }

.link_tyas

{
position:absolute;
z-index:6;
width:280px;
height:20px;
top: 140px;  /* <-- customise here*/
left: 30px;  /* <-- customise here*/
}
/*tyas panel ends here */
/*gambit panel starts here http://reference.sitepoint.com/css/z-index/demo */

.header_gambit /* <-- do not customise*/
{
  position:absolute;
  z-index:2;
  top: 10px;
  background:  url(teampanel/profile_header/profileheader_gambit.png) no-repeat;
  width:379px;
  height:33px;
}

.quote_gambit
{
position:absolute;
  z-index:4;
  width:310px;
  height:50px;
  top: 60px;  /* <-- customise here*/
  left: 35px;  /* <-- customise here*/
  }

.profilepanel_gambit
{
	position:absolute;
	z-index:1;
	background: url(teampanel/images/teampanelfull.png) no-repeat;
	width:379px;
	height:189px;
	top:1010px;   /* <-- customise here*/
	left:280px;  /* <-- customise here*/
}

.link_gambit

{
position:absolute;
z-index:6;
width:220px;
height:47px;
top: 100px;  /* <-- customise here*/
left: 80px;  /* <-- customise here*/
}

a#credits_gambit span { display: none; }
a#credits_gambit {
    margin-left: auto;
    margin-right: auto;
    display: block;
	background: url(teampanel/images/credits_gambit.png) no-repeat;
	width: 220px;
    height: 47px;
}

a#credits_gambit:hover {
	background: url(teampanel/images/credits_gambit_over.png) no-repeat;
}

 
/*gambit panel ends here */
a.profile_links:link {font-family:Verdana, Arial, Helvetica, sans-serif; color: white; text-decoration: none; }
a.profile_links:visited {font-family:Verdana, Arial, Helvetica, sans-serif; color: white; text-decoration: none; }
a.profile_links:hover {font-family:Verdana, Arial, Helvetica, sans-serif; color: #CCCCCC; text-decoration: none; }
a.profile_links:active {font-family:Verdana, Arial, Helvetica, sans-serif; color: white; text-decoration: none;  } 

#footer
{ width: auto;
height:50px;
background: transparent;
z-index:auto;
display:block
}

.empty
{ width: 700px;
height:120px;
padding-right: 20px;
background: transparent;
z-index:auto;
display:block;
right:20px;
}

/* lightbox css*/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover  */display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }