/* 0 BASIC TAGS */


table 
{
	background-color:White;
	border-collapse:collapse;
}

h1, h2, h3, h4 
{
	padding-top:10px;
	margin: 0;
	color:#2c4aa2;
	font-family:Sans-Serif;
}

#default h2
{
	padding-top:0px;
	font-size:14pt;
}
#default h3
{
	padding-top:0px;
	font-size:12pt;
}


a.DownloadButton
{
	height:30px;
	width:144px;
	background-image:url(Images/DownloadButton.jpg);
}


.page p
{
	padding:5px 10px 5px 10px;
	text-align:left;
}


ul
{
	
	list-style-image:url(Images/MyReflectionsBulletPoint.png);
	list-style-position:outside;
	
	
	line-height:1.5em;
	text-indent:0px;
	
}

hr 
{
	border: 0;
	border-top: 1px solid #505050;
	height: 1px;
}

a 
{
	text-decoration:none;
	color:#0000ff;
}



.customerTestimonialText
{
	
	background-image:url(Images/CustomerTestimonialSpeechBubbleBody.gif);
	padding-bottom:0px;
}

.customerTestName
{
	background-image:url(Images/CustomerTestimonialSpeechBubbleBottom.gif);
	background-position:top;
	background-repeat:no-repeat;
	padding-left:15px;
	padding-top:10px;
	padding-bottom:0px;
	height:20px;
	text-align:left;
	vertical-align:text-bottom;
	
}

a:hover 
{
	text-decoration:underline;
}


body 
{
	width:975px;
	/*position:relative;*/
	margin-top:0px;
	margin-bottom:0px;
	margin-left:auto;
	margin-right:auto;
	padding: 0;
	font-family: sans-serif;
	font-size:small;
	color:#666666;
	background-color:#dddad3;
	
	
}

/* Body Table */

.bodyTable
{
	border-collapse:collapse;
	padding: 0 0 0 0;
	/*border:*/
}
.bodyTableLeftEdge
{
	width:20px;
	background-image:url(Images/BodyShadowLeft.png);
	background-repeat:repeat-y;
	background-position:left;
}

.bodyTableRightEdge
{
	width:20px;
	background-image:url(Images/BodyShadowRight.png);
	background-repeat:repeat-y;
	background-position:right;
	
}

.bodyTableTopEdge
{
	height:10px;
	background-image:url(Images/shadowTop.png);
	background-repeat:repeat-x;
	

}
.bodyTableBottomEdge
{
	height:10px;
	background-image:url(Images/shadowBottom.png);
	background-repeat:repeat-x;
}

.bodyTableTopRightCorner
{
	height:4px;
	width:4px;
	background-image:url(Images/shadowTopRightCorner.png);
	background-repeat:no-repeat;
}
.bodyTableTopLeftCorner
{
	height:4px;
	width:4px;
	background-image:url(Images/shadowTopLeftCorner.png);
	background-repeat:no-repeat;
	background-position:right;
}
.bodyTableBottomRightCorner
{
	height:4px;
	width:4px;
	background-image:url(Images/shadowBottomRightCorner.png);
	background-repeat:no-repeat;
}
.bodyTableBottomLeftCorner
{
	height:4px;
	width:4px;
	background-image:url(Images/shadowBottomLeftCorner.png);
	background-repeat:no-repeat;
	background-position:right;
}


img {
	border-width: 0;
}


/* Header Menu */
.HeaderMenu 
{
	height:40px;
	background-image: url(Images/toolbar.png);
	
}
.HeaderMenubg 
{
	height:40px;
	background-image: url(Images/toolbar.png);
	 background-position:bottom;
	 padding: 0 0 0 0;
	
}

.StaticMenuStyle
{
	height:40px;
	width:80px;
	background-image: url(Images/toolbar.png);
	text-align:center;
	
}
.StaticMenuStyle a
{	
	background-image:none;
	 color:#666666;
	 font-weight:bolder;
}
.StaticMenuStyle a:visited
{
	background-image:none;

}

.StaticHoverStyle
{
	height:40px;
	width:80px;
	background-image: url(Images/WebsiteMenuBarbutton.png);
	color:Black;
}


.StaticHoverStyle a
{
	 color:#666666;
}

.StaticHoverStyle a:hover
{
	 color:#666666;
	 text-decoration:none;
}

.StaticSelectedStyle
{
	height:40px;
	width:80px;
	background-image: url(Images/toolbarLight.png);
}



/* Accordion */
.accordionHeader
{
    border-bottom: 1px solid #d6d2c9;
	background-image: url(Images/FaqTabClosed.png);
    background-repeat:no-repeat;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
    text-align: left;
    height:20px;
}

.accordionHeader a
{
     color:#666666;
}
.accordionHeaderSelected a
{
    color:#666666;
    
}

#master_content .accordionHeader a
{
	color: #666666;
	background: none;
	text-decoration: none;
}

#master_content .accordionHeader a:hover
{
	background: none;
	
	text-decoration: underline;
}

.accordionHeaderSelected
{
    color: white;
	background-image: url(Images/FaqTabOpen.png);
	background-repeat:no-repeat;
    
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
    text-align: left;
    height:20px;
}



#master_content .accordionHeaderSelected a
{
	color: #000;
	background: none;
	text-decoration: none;
}

#master_content .accordionHeaderSelected a:hover
{
	background: none;
	text-decoration: underline;
}

.accordionContent
{
    background-color: #FFFFFF;
    border-top: none;
    padding: 5px;
    border-style: none solid solid solid;
    border-width: 1px;
    border-color: #d6d2c9;
    text-align: left;
}


.roundedboxt {clear:none;background: url(images/boxborder.gif) 0 0 repeat-x}/*width: 20em}*/
.roundedboxb {clear:none;background: url(images/boxborder.gif) 0 100% repeat-x}
.roundedboxl {clear:none;background: url(images/boxborder.gif) 0 0 repeat-y}
.roundedboxr {clear:none;background: url(images/boxborder.gif) 100% 0 repeat-y}
.roundedboxbl {clear:none;background: url(images/bl.gif) 0 100% no-repeat}
.roundedboxbr {clear:none;background: url(images/br.gif) 100% 100% no-repeat}
.roundedboxtl {clear:none;background: url(images/tl.gif) 0 0 no-repeat}
.roundedboxtr 
{
	background: url(images/tr.gif) 100% 0 no-repeat; 
	padding:10px;
	clear:none;
	} 

.tickList
{
	list-style-image:url(Images/Tick.png);
	list-style-position:outside;
	text-indent:0px;
	text-align:left;
}



/*Video Player*/
/* styling of the container. */ 
a.myPlayer { 
    display:block; 
    width: 458px; 
    height:347px;  
    text-align:center; 
    float:left; 
    border:1px solid #999; 
} 
 
/* play button */ 
a.myPlayer img { 
    margin-top:70px; 
    border:0px; 
} 
 
/* when container is hovered we alter the border color */ 
a.myPlayer:hover { 
    border:1px solid #000; 
}

p.CustTestimonialTextAlt
{
	background-color:#f7f6f4;
}

div.CustTestimonialPersonText
{
	font-weight:bold;
	text-align:right;
	
}

/* tooltip styling. uses a background image (a black box with an arrow) */ 
span.tooltip 
{     
	background:url(Images/black_arrow_big.jpg) no-repeat scroll 0 0;
	font-size:12px;     
	height:160px;     
	padding:10px;     
	width:310px;     
	font-size:14px;     
	display:none;     
	color:#fff; 
}

/* tutorial CSS */
div.Videos {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 690px;	
	height:380px;	
	
	
	/* custom decorations */
	padding:10px 0px 10px 0px;	
}

div.Videos div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
}

/* single scrollable item */
div.Videos div.items div {
	float:left;
	/* custom decoration */
	width:700px;
	height:380px;
}

div.Examples {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 690px;	
	height:380px;	
	/* custom decorations */
	padding:10px 0px 10px 0px;	
}

div.Examples div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
}

/* single scrollable item */
div.Examples div.items div {
	float:left;
	/* custom decoration */
	width:700px;
	height:380px;
}

/* single item */
#Categories div {
	float:left;
	width:800px;
	height:300px;
	border-left:1px solid #333;
	cursor:pointer;
}
 
/* style when mouse is over the item */
#Categories div.hover {
	background-color:#f6f7ee;	
}
 
/* style when element is active (clicked) */
#Categories div.active {
	background-color:#d8dcc5;
	cursor:default;
}
 
#Categories h3, #Categories p, #Categories span {
	margin:13px;		
	font-family:"bitstream vera sans";
	font-size:13px;
}
 
#Categories h3 em {
	font-style:normal;
	color:yellow;
}

#Categories {	
	position:absolute;
	width:20000em;	
	clear:both;
	border:1px solid #222;
}

/* this makes it possible to add next button beside scrollable */
div.Videos {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(Images/left.png) no-repeat;
	float:left;
	margin:43px 10px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(Images/right.png);
	clear:right;	
}
/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(Images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 	


div.VideoScroller {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 400px;	
	height:200px;	
	
	
	/* custom decorations */
	padding:10px 0;	
	border:1px outset #ccc;
	background-color:Fuchsia;				
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.VideoScroller div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin-left:10px;
}

/* single scrollable item */
div.VideoScroller div.items div {
	float:left;
	
	/* custom decoration */
	text-align:center;
	width:400px;
	height:200px;
	font-size:30px;
	font-family: 'bitstream vera sans';
	border:1px outset #ccc;
	background-color:Orange;
	margin-right: 20px;	
	-moz-border-radius:5px;
}

/* active item */
div.VideoScroller div.items div.active {
	border:1px inset #ccc;		
	background-color:#fff;
}





/* this makes it possible to add next button beside scrollable */
div.VideoScroller {
	float:left;	
}



/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	border-bottom:1px solid #dddad3;	
	height:30px;
	width:900px;
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background: url(Images/BeigeTabs.png) no-repeat -420px 0;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 134px;
	text-align:center;	
	text-decoration:none;
	color:#666666;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -420px -31px;	
	color:#fff;	
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -420px -62px;		
	cursor:default !important; 
	color:#666666 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s 			{ background-position: -553px 0; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l 			{ background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover 	{ background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl 			{ background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 	{ background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


ul.NaviList
{
	left:0;
	list-style:none;
	cursor:pointer;
	line-height:2.2em;
	text-align:left;
	margin-left:0px;
}

ul.NaviList li
{
	background-image:url(Images/ThinBeigeButton.png);
	background-position:center;
	background-repeat:no-repeat;
	
	width:200px;
	height:25px;
	text-align:center;
	padding-bottom:5px;
}
html>body ul.NaviList li {margin-left:-35px;}

ul.NaviList li:hover
{
	text-decoration:underline;
}

div.panes
{
	border-bottom:1px solid #dddad3;
	border-left:1px solid #dddad3;
	border-right:1px solid #dddad3;
	width:900px;		
}
td.VideoNavLinks
{
	 vertical-align:text-top;
	 width:300px;
}

td.VideoDescription
{
	 width:255px;
	 vertical-align:text-top;
}

td.ExampleDisplay
{
	background-color:#fff;
}



/* Overlay */

/* the overlayed element */
div.overlay {
	
	/* growing background image */
	background-image:url(Images/overlay/white.png);
	
	/* dimensions after the growing animation finishes  */
	width:600px;
	height:600px;		
	
	/* initially overlay is hidden */
	display:none;
	
	/* some padding to layout nested elements nicely  */
	padding:55px;
}

/* default close button positioned on upper right corner */
div.overlay div.close {
	background-image:url(Images/overlay/close.png);
	position:absolute;
	right:5px;
	top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}


/* black */
div.overlay.black {
	background:url(Images/overlay/transparent.png) no-repeat !important;
	color:#fff;
}

/* petrol */
div.overlay.petrol {
	background:url(Images/overlay/petrol.png) no-repeat !important;
	color:#fff;
}

div.black h2, div.petrol h2 {
	color:#ddd;		
}