/*  MockType - Component Library
 *  (c) 2009-current Lammert Postma
 *
 *  version 0.1.0
 *
 *  MockType is freely distributable under the Creative Commons license.
 *  For details, see the MockType web site: http://www.mocktype.COM/
 *
 *--------------------------------------------------------------------------*/

/* ------------------------------------
	Reset
------------------------------------ */	
body,textarea	{	font-family:Tahoma, Geneva, sans-serif;	}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
.body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#000;}
a {color:#009cff;text-decoration:none;}
a:visited {color:#007cca;}
/* ------------------------------------
	GRID based on - http://blueprintcss.org
------------------------------------ */	
.group		{	float:left; width:100%; margin-bottom:10px;	}
#container 	{	width:960px;margin:0 auto; }
.showgrid 	{	background:url(grid.png); overflow:auto;}
div.column-1, div.column-2, div.column-3, div.column-4, div.column-5, div.column-6, div.column-7, div.column-8, div.column-9, div.column-10, div.column-11, div.column-12, div.column-13, div.column-14, div.column-15, div.column-16, div.column-17, div.column-18, div.column-19, div.column-20, div.column-21, div.column-22, div.column-23, div.column-24 {float:left;margin-right:10px;}
.last, div.last {margin-right:0;}
.column-1 {width:30px;}
.column-2 {width:70px;}
.column-3 {width:110px;}
.column-4 {width:150px;}
.column-5 {width:190px;}
.column-6 {width:230px;}
.column-7 {width:270px;}
.column-8 {width:310px;}
.column-9 {width:350px;}
.column-10 {width:390px;}
.column-11 {width:430px;}
.column-12 {width:470px;}
.column-13 {width:510px;}
.column-14 {width:550px;}
.column-15 {width:590px;}
.column-16 {width:630px;}
.column-17 {width:670px;}
.column-18 {width:710px;}
.column-19 {width:750px;}
.column-20 {width:790px;}
.column-21 {width:830px;}
.column-22 {width:870px;}
.column-23 {width:910px;}
.column-24, div.column-24 {width:950px;margin:0;}
.clear		{	clear:both;	}

.push-1 {margin-left:40px;}
.push-2 {margin-left:80px;}
.push-3 {margin-left:120px;}
.push-4 {margin-left:160px;}
.push-5 {margin-left:200px;}
.push-6 {margin-left:240px;}
.push-7 {margin-left:280px;}
.push-8 {margin-left:320px;}
.push-9 {margin-left:360px;}
.push-10 {margin-left:400px;}
.push-11 {margin-left:440px;}
.push-12 {margin-left:480px;}
.push-13 {margin-left:520px;}
.push-14 {margin-left:560px;}
.push-15 {margin-left:600px;}
.push-16 {margin-left:640px;}
.push-17 {margin-left:680px;}
.push-18 {margin-left:720px;}
.push-19 {margin-left:760px;}
.push-20 {margin-left:800px;}
.push-21 {margin-left:840px;}
.push-22 {margin-left:880px;}

.floatBefore	{	float:left;	}
img.floatBefore {	margin:0 10px 10px 0	}
.floatAfter		{	float:right;}
img.floatAfter {	margin:0 0 10px 10px;	}

/* ------------------------------------
	Start of components styles
------------------------------------ */	
/* ------------------------------------
||	Notifications
------------------------------------ */	

/* .error, .notice, .success 	{	padding:.8em;margin-bottom:1em;border:2px solid #ddd;	}*/	
.notice, .success 			{	padding:.8em;margin-bottom:1em;border:2px solid #ddd;	}
.error 						{	background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;border:2px solid #ddd;}
.errorlabel					{	background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;border:0px solid #ddd;}
.notice 					{	background:#FFF6BF;color:#514721;border-color:#FFD324;	}
.success 					{	background:#E6EFC2;color:#264409;border-color:#C6D880;	}
.error a 					{	color:#8a1f11;	}
.notice a 					{	color:#514721;	}
.success a 					{	color:#264409;	}
.notice ul, .success ul, .error ul	{	padding-left:15px;	}
/* ------------------------------------
||	tables
------------------------------------ */	
table 			{	margin-bottom:10px;width:100%; border-collapse:separate;border-spacing:0;	}
th 				{	font-weight:bold;						}
thead th 		{	background:#9fc9eb; text-align:left;	}
th, td, caption {	padding:4px 10px 4px 5px;		}
tr.even td 		{	background:#efefef;				}

/* selectable
------------------------------------ */	
table.selectable tbody tr:hover td		{	background-color:#ddd;	}
table.selectable tbody tr.selected td	{	background-color:#c2dcf1 !important;	}

/* ------------------------------------
||	menu-toc
------------------------------------ */	
ul.menu-toc			{	padding:0; margin:0; list-style-type:none; list-style-image:none;		}
ul.menu-toc a		{	font-size:13px; display:block; padding-left:15px; text-decoration:none;	}
ul.menu-toc a:hover	{	border-bottom:0;	}
ul.menu-toc a:hover	{	color:#000;	}
ul.menu-toc li		{	border-bottom:1px dotted silver; padding:5px 5px 5px 0;	}
ul.menu-toc li.active a, ul.menu-toc li.open ul li.active a, ul.menu-toc li.closed ul li.active a	
							{	color:#000; font-weight:bold;	}
ul.menu-toc li.closed a			{	color:#666; background:url(twistie-right.png) no-repeat right 3px;		}
ul.menu-toc li.closed a:hover	{	color:#000;	}
ul.menu-toc li.open a			{	color:#000; background:url(twistie-down.png) no-repeat right 3px;		}
ul.menu-toc li ul					{	margin-top:5px;	list-style-type:none; list-style-image:none; padding-left:0;		}
ul.menu-toc li ul li a				{	font-size:11px; padding-left:15px; 			}
ul.menu-toc li ul li:last-child		{	border-bottom:none; padding-bottom:0;		}
ul.menu-toc li.open ul li a, ul.menu-toc li.closed ul li a
								{	color:#279aea; background:none;		}
ul.menu-toc li.open ul li a:hover	{	color:#000;	}
/* ------------------------------------
||	menu-flyout
------------------------------------ */	
ul.menu-flyout			{	padding:0; margin:0; list-style-type:none; list-style-image:none; 			 	}
ul.menu-flyout a		{	font-size:13px; display:block; 	}
ul.menu-flyout a:hover	{	border-bottom:0;	}
ul.menu-flyout a:hover	{	color:#000;	}
ul.menu-flyout li		{	border-bottom:1px dotted silver; padding:5px 5px 5px 0; float:left; position:relative;	}
ul.menu-flyout li.active a, ul.menu-flyout li.open ul li.active a, ul.menu-flyout li.closed ul li.active a	
							{	color:#000; font-weight:bold;	}
ul.menu-flyout li.closed	{	background:url(twistie-right.png) no-repeat 5px 9px; padding-left:5px;		}
ul.menu-flyout li.closed a	{	padding-left:15px;	}
ul.menu-flyout li.open		{	background:url(twistie-down.png) no-repeat 5px 9px; padding-left:5px;		}
ul.menu-flyout li.open a	{	color:#000; background:url(twistie-down.png) no-repeat 182px 3px; padding-left:15px;		}
ul.menu-flyout li ul		{	
	position:absolute; 
	top:25px; 
	left:-4px; 
	width:125px; 
	background-color:#fff;  
	list-style-type:none; 
	list-style-image:none; 
	border:1px solid silver; 
	z-index:10; 
	padding-left:0; 
}
ul.menu-flyout li ul li					{	float:none;}
ul.menu-flyout li ul li a				{	font-size:11px; padding-left:15px; 		}
ul.menu-flyout li ul li:last-child		{	border-bottom:none; 					}
ul.menu-flyout li.open ul li a, ul.menu-flyout li.closed ul li a
										{	color:#279aea; background:none;		}
ul.menu-flyout li.open ul li a:hover	{	color:#000;	}
/* ------------------------------------
||	menu-row
------------------------------------ */	
ul.menu-row			{	padding:0; margin:0 0 10px 0; list-style-type:none; list-style-image:none; 						}
ul.menu-row li		{	float:left; margin-right:5px; padding-right:5px; border-right:1px solid #bbb;}
ul.menu-row li:last-child	{	margin:0; padding-right:0; border:0;		}
ul.menu-row li a			{	font-size:11px; display:block; 				}
ul.menu-row li.active a		{	color:#000; font-weight:bold;	}
ul.menu-row li:hreflike			{	font-size:11px; display:block; 				}
ul.menu-row li.active.hreflike		{	color:#000; font-weight:bold;	}
/* ------------------------------------
||	breadrumb
------------------------------------ */	
ul.breadcrumb		{	padding:0; margin:0 0 10px 0; list-style-type:none; list-style-image:none; float:left; }
ul.breadcrumb li	{	float:left; margin-right:5px; color:#999; font-size:11px; }
ul.breadcrumb li a	{	font-size:11px; display:block;  padding-right:15px; background:url(twistie-right.png) no-repeat right 3px; 				}
/* ------------------------------------
||	acoordion
------------------------------------ */	
.accordion	{	margin-bottom:10px;	}
.accordion dt, .accordion dt.open, .accordion dt.closed	{	
	border:1px solid #efefef; -moz-border-radius:2px; 
	padding:4px; 
	cursor:pointer; 
	padding-left:20px;	
	background:url(twistie-down.png) no-repeat 5px 8px #bbb; 
	color:#000;
	margin-bottom:1px;
}
.accordion dt.closed	{	background:url(twistie-right.png) no-repeat 5px 8px #DDD; color:#333; 	}
.accordion dt:hover		{	background-color:#bbb; color:#000	}
.accordion dd			{	padding:5px; margin:0 0 1px; 	}
.accordion dd.level1 				{	height:100px	}
.accordion dd.level1 ul				{	width:33%; float:left; margin:0; list-style-type:none; list-style-image:none; padding:0;	}
.accordion dd.level1 ul li			{	background-color:#f7f7f7; margin:0 1px 1px 0; padding:4px;			}
.accordion dd.level1 ul li:hover	{	background-color:#f00; color:#fff;	}
/* ------------------------------------
||	collapsible
------------------------------------ */	
.collapsible							{	margin-bottom:10px; width:99%;		}
.collapsible div:first-child			{	
	border:1px solid #cecece; -moz-border-radius:2px; 
	background-color:#ddd; 
	color:#000; 
	padding:2px 8px; 
	cursor:pointer;
	background:	url(twistie-right.png) no-repeat 5px #ddd; 
	padding-left:20px; 
}
.collapsible.open div:first-child:hover, .collapsible.closed div:first-child:hover		{	background-color:#bbb; }
.collapsible.open div:first-child		{	background:	url(twistie-down.png) no-repeat 5px #bbb;  }
.collapsible div:last-child				{	padding:4px 8px;	}
/* ------------------------------------
||	Tabs
------------------------------------ */	
/* tab-top
------------------------------------ */	
.tab-top, .tab-left, .tab-bottom{	margin-bottom:10px;	 position:relative;}

.tab-top ul.tabPanel 			{	list-style-type:none; list-style-image:none; margin:0; padding:0; float:left; position:relative; top:1px;				}
.tab-top ul.tabPanel li			{	padding:4px 7px 3px 7px; border:1px solid #000; border-bottom:0; float:left; background-color:#ddd; margin-right:1px;  	}
.tab-top ul.tabPanel li:hover	{	background-color:#bbb;								}
.tab-top ul.tabPanel li a		{	margin-right:1px; text-decoration:none; color:#000;	}
.tab-top ul.tabPanel li.open 	{	background-color:#fff; padding-bottom:4px;			}
.tab-top div.contentPanel		{	border:1px solid #000; clear:left; padding:10px; min-height:125px; overflow:auto; background-color:#fff;	}

/* tab-left
------------------------------------ */	
.tab-left ul.tabPanel 			{	list-style-type:none; list-style-image:none; margin:0; padding:0; float:left; position:relative; width:20%; 			}
.tab-left ul.tabPanel li		{	padding:4px 6px 4px 7px; border:1px solid #000; border-right:0; background-color:#ddd; margin-bottom:1px; position:relative; 	}
.tab-left ul.tabPanel li:hover	{	background-color:#bbb;								}
.tab-left ul.tabPanel li a		{	margin-right:1px; text-decoration:none; color:#000;	}
.tab-left ul.tabPanel li.open 	{	background-color:#fff; padding:4px 8px; left:1px; margin-left:-1px;	}
.tab-left div.contentPanel		{	border:1px solid #000; float:left; padding:10px; width:75%; min-height:200px; overflow:auto; background-color:#fff;}

/* tab-bottom
------------------------------------ */	
.tab-bottom							{	padding-bottom:26px;	}
.tab-bottom ul.tabPanel 			{	list-style-type:none; list-style-image:none; margin:0; padding:0; position:absolute; bottom:0;				}
.tab-bottom ul.tabPanel li			{	padding:3px 7px 4px 7px; border:1px solid #000; border-top:0; float:left; background-color:#ddd; margin-right:1px;  	}
.tab-bottom ul.tabPanel li:hover	{	background-color:#bbb;								}
.tab-bottom ul.tabPanel li a		{	margin-right:1px; text-decoration:none; color:#000;	}
.tab-bottom ul.tabPanel li.open 	{	background-color:#fff; padding-top:4px;	margin-top:-1px;		}
.tab-bottom div.contentPanel		{	border:1px solid #000; clear:left; padding:10px; min-height:125px; overflow:auto; background-color:#fff;	}
/* ------------------------------------
||	Carrousel
------------------------------------ */	
.carrousel						{	position:relative; border:1px solid silver; padding:10px 30px; margin-bottom:10px; 	}
.carrousel .carrouselFrame 		{	width:100%; position:relative; overflow:hidden;	}
.carrousel .carrouselFrame ul	{	overflow:hidden; position:relative; list-style-type:none; list-style-image:none; padding:0; margin:0;	}
.carrousel .carrouselFrame ul li{	float:left; padding-right:10px;	}
.carrouselLeft, .carrouselRight	{	position:absolute; left:5px; top:45%;	}
.carrouselRight					{	left:auto; right:5px;	}
/* ------------------------------------
||	infopanel
------------------------------------ */	
.infoPanel 	{	position:absolute; padding:10px 10px 0 10px; border:1px solid #bbb; background-color:#ddd; width:200px; }
/* ------------------------------------
||	loginBox
------------------------------------ */	
body .logShow 			{	display:none; }
body .logHide 			{	display:block; }
body.loggedIn .logShow 			{	display:block; }
body.loggedIn table.logShow 	{	display:table; }
body.loggedIn .logHide 			{	display:none; }


/* ------------------------------------
	MockTypeDock
------------------------------------ */	
#mtDock		{	
	position:absolute;
	top:-104px; left:20px;
	background:#000; 
	opacity:0.9; 
	z-index:999; 
	color:#fff; 
	-moz-border-radius:10px; -webkit-border-radius:10px; 
	width:200px;
	padding-top:15px;
}
#mtDock	h2			{	font-size:15px; color:#fff; margin:0; padding:10px; cursor:move; 	}
#mtDock	h2 a		{	color:#fff; text-decoration:none;}
#mtDock	h2 a em		{	color:#ff4800;	}
#mtDock	h2 a span	{	display:none; color:#999;	}
#mtDock	h2 a:hover span	{	display:inline; font-size:13px; }
#mtDock	h3			{	font-size:12px; color:#fff; margin:5px 0 0 0;	}
#mtDock dt			{	padding:1px 2px 1px 18px; background-position:3px 4px; background-color:#555; border:none; color:#fff; font-weight:normal;	}
#mtDock dt:hover	{	background-color:#666;	}
#mtDock dd			{	border-bottom:1px dotted #666;	}
#mtDock dd ul		{	list-style-type:circle; padding-left:20px;	}
#mtDock dd ul li a	{	font-size:11px; color:#fff;	}
#mtDock ul.dockSettings	{	list-style-type:none;	}
#mtInfo {
	position:absolute;
	top:100px; left:100px;
	background:#000; 
	opacity:0.9; 
	z-index:999; 
	color:#fff; 
	-moz-border-radius:10px; -webkit-border-radius:10px; 
	width:400px;
	padding:25px;
	cursor:move;
}
/* information panel
------------------------------------ */	
#mtInfo h2		{	color:#fff;		}
#mtInfo span	{	float:right;	}

/* Note
------------------------------------ */	
.mtNote			{	position:absolute; top:-8px; left:-8px;	}
.mtNote a		{	color:#000; text-decoration:none; font-size:10px;	}
.mtNote a em	{	
	display:none; 
	position:absolute; 
	padding:2px 4px !important; 
	background-color:#ff4800; 
	border:1px solid #f00; 
	left:12px;
	top:7px;
	font-size:11px;
	width:100px;
	color:#fff;
}
.mtNote a:hover em	{	display:block; 						}
.dockSelected		{	border:1px solid #ff4800; float:left; display:block; width:100%;	}
/* ------------------------------------
||	Forms
------------------------------------ */	
div.form{ padding-top:5px; padding-bottom:5px;  }
div.formcontainer{ text-align:center; padding:5px;border:3px solid #c0c7bb;-moz-border-radius:10px;-webkit-border-radius:10px; }

form					{	margin-bottom:10px; padding:0;	}
fieldset				{	border:0; padding:0; 			}
fieldset p				{ 	margin:0 0 10px 0; padding:0 0 10px 130px; border-bottom:1px dotted silver;  	}
fieldset p label 		{	display:block; margin-left:-130px; width:130px; float:left; color:#666; font-weight:normal		}

form.compact fieldset p			{ 	padding:0 0 10px 0; 		}
form.compact fieldset p label	{	margin-left:0; float:none; width:auto;	}

fieldset p ul										{	list-style-type:none; list-style-image:none; margin-left:0; float:left; 	}
fieldset p ul label	 								{	margin:0; width:auto; position:relative; float:none; font-weight:normal;	}
fieldset p.labelList ul li input[type="radio"]		{	position:relative; top:2px;		}
fieldset p.labelRow ul li							{	float:left; margin-right:15px;	}

fieldset legend			{	margin-bottom:10px;	}

textarea, input, select	{	
	margin:0;
	color: #000000; 
	border:1px solid #cfcfcf; 
	-webkit-border-radius:3px; -moz-border-radius:3px; 
	padding:4px;
	font-size:12px;	
}
input {height: 15px;}
textarea:focus, input:focus, select:focus, radio:focus
						{ 	border:1px solid #000; color:#000; 		}
.required textarea, .required input, .required select, .required radio	
						{ 	border:2px solid #ff0000; 				}
.required label			{	color:#f00;								}
.required span			{	display:block;	}
			

input[type="button"], input[type="submit"]		
	/*{	background-color:#ddd; border:1px solid #000; }*/
	{	background-color:#bbb; color:#000; cursor:pointer; cursor:hand;  border:1px solid; border-color:#CCCCCC #666666 #666666 #CCCCCC ;  height:22px;	
	background-repeat:no-repeat; background-position:center; }
input[type="button"]:hover, input[type="submit"]:hover	
	{	background-color:#bbb; color:#000; cursor:pointer; cursor:hand;  border:1px solid; 	}
input[type="button"]:onmousedown, input[type="submit"]:onmousedown
	{ border-color:#666666 #CCCCCC #CCCCCC #666666;}	

input[type="button"]:disabled, input[type="submit"]:disabled	
	{ color:#666666 ;  cursor: default; 	}
input[type="button"]:disabled:hover, input[type="submit"]:disabled:hover
	{ color: #666666 ; border-color:#CCCCCC #666666 #666666 #CCCCCC ;	}	
	
	
button{ padding:0px;}

.label-caption{ font-size:10px;}