body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
}

p {font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#666;}
h1 {font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#666;}

body{
	/* Setting default text color, background and a font stack */
	color:#999;
	font-size:13px;
	background: #f2f2f2;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#0D1721;
	background-image:url(img/marketing-toolkit-main-background.jpg);
	background-position:top center;
	background-repeat:no-repeat;
	margin:0px;
	padding:0px;
}


#gallery{
	 border:1px solid #999;
	margin:0 0 0 300px;
	width:490px;
	overflow:hidden!important;
	position:relative;
	
}

#slides{
	/* This is the slide area */
	height:693px;
	
	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:490px;
	overflow:hidden!important;
	position:relative;
}

.slide{
	float:left;
}



#menu{
	/* This is the container for the thumbnails */
	float:left;
	height:693px;
	
	width:200px
	
}

#content-list{
	/* This is the container for the thumbnails */
	margin:15px 0 0 0;
	float:left;
	height:594px;
	width:240px;
	border:1px solid #999;
	overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}





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

li{
	/* Every thumbnail is a li element */
	width:220px;
	height:30px;
	padding:15px 0 0 5px;
	background-image:url(img/page-link-background.jpg);
	background-repeat:repeat-x;
	list-style:none;
	overflow:none;
	text-decoration:none;
	
}



#content{
	/* Every thumbnail is a li element */
	width:225px;
	list-style:none;
	overflow:none;

}


li.inact:hover{
	

}

li.act,li.act:hover{

}

li.act a{
color:#000;
}

li.act a:hover{
text-decoration:none;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	
}

li a{

}

a img{
	border:none;
	text-decoration:none;
}


/* The styles below are only necessary for the demo page */

.video {text-align:center;}

#main{
	/* The main container */	
	margin:15px auto;
	text-align:left;
	
	width:640px;
	background-color:#FFF;
	padding:15px 20px 25px 20px;
	

}

#zoom-gallery-text{
	text-align:left;
	
}


#header{
	/* The main container */

	margin:0px auto;
	text-align:left;
	width:850px;
	vertical-align:bottom;
}

#download{
	/* The main container */
	padding:0px 0 0 0;
	margin:0px auto;
	text-align:right;
	width:850px;

}

.clear{
	clear:both;
}





#logo{
	float:left;
}

#help{
	cursor:help;
	float:right;
}







a, a:visited {
	color:#FFF;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}




#dialog-zoom {
  background:#FFF; 
  width:850px; 
  height:800px;
  padding:0px;
  display:none;
  overflow:auto;
    cursor:pointer;

}

#dialog-help {
  background:#FFF; 
  width:400px; 
  height:630px;
  padding:25px;
  display:none;
  overflow:hidden;
    cursor:pointer;

}



.window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:440px;
  display:none;
  z-index:9999;
  padding:0px;
    cursor:pointer;

}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:6930;
  background-color:#000;
  display:none;
  cursor:pointer;
}

#back{float:left; position:absolute; top:50%; left: 285px; height:10em; margin-top:-5em }
#next{float:right; position:absolute; top:50%; left: 820px; height:10em; margin-top:-5em}


#back:hover{padding:2px 2px 0 0;}
#next:hover{padding:2px 2px 0 0;}

#separator{float:left; position:absolute; left: 270px; }


#zoom-icon{
position:absolute;
z-index:4000;
top: 660px;
left:755px;
}

.text {padding:10px 0px 0px 5px; text-align:left; font-size:14px; font-weight:bold;}
.text a {color:#333333;}
.text a:hover {color:#C00;}