/********************************
 * HORIZONTAL MENU *
 ********************************/
#appleNav li .drop {
	padding-right: 21px;
	background: url("../img/template/mainMenu/drop_dark.png") no-repeat
		135px center;
	text-shadow: 0 -1px 3px #202020;
}

#appleNav li:hover .drop {
	background: url("../img/template/mainMenu/drop.png") no-repeat 135px
		center;
	text-shadow: 0 -1px 3px #202020;
}

.dropdown_1column,.dropdown_2columns,.dropdown_3columns,.dropdown_4columns,.dropdown_5columns
	{
	margin: 0px auto;
	float: left;
	position: absolute;
	z-index: 999;
	left: -999em; /* Hides the drop down */
	text-align: left;
	padding: 10px 5px 10px 5px;
	border: 1px solid #777777;
	border-top: none;
	/* Gradient background */
	background: #F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE),
		to(#BBBBBB) );
	/* Rounded Corners */
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {
	width: 140px;
}

.dropdown_2columns {
	width: 280px;
}

.dropdown_3columns {
	width: 420px;
}

.dropdown_4columns {
	width: 560px;
}

.dropdown_5columns {
	width: 700px;
}

#appleNav li:hover .dropdown_1column,#appleNav li:hover .dropdown_2columns,#appleNav li:hover .dropdown_3columns,#appleNav li:hover .dropdown_4columns,#appleNav li:hover .dropdown_5columns
	{
	left: -1px;
	top: auto;
}

.col_1,.col_1s,.col_1b,.col_2,.col_2b,.col_3,.col_3b,.col_4,.col_5 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}

.col_1 {
	width: 130px;
}

.col_1s {
	width: 90px;
}

.col_1b {
	width: 170px;
}

.col_2 {
	width: 270px;
}

.col_2b {
	width: 310px;
}

.col_3 {
	width: 410px;
}

.col_3b {
	width: 450px;
}

.col_4 {
	width: 550px;
}

.col_5 {
	width: 690px;
}

#appleNav .menu_right {
	float: right;
	margin-right: 0px;
}

#appleNav li .align_right { /* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
	-webkit-border-radius: 5px 0px 5px 5px;
	border-radius: 5px 0px 5px 5px;
}

#appleNav li:hover .align_right {
	left: auto;
	right: -1px;
	top: auto;
}

#appleNav p,#menu h2,#menu h3,#menu ul li {
	text-shadow: none;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 21px;
	font-size: 12px;
	text-align: left;
	text-shadow: 1px 1px 1px #FFFFFF;
}

#appleNav h2 {
	text-shadow: none;
	font-size: 21px;
	font-weight: 400;
	letter-spacing: -1px;
	margin: 7px 0 14px 0;
	padding-bottom: 14px;
	border-bottom: 1px solid #666666;
	color: #000000;
}

#appleNav h3 {
	text-shadow: none;
	font-size: 14px;
	margin: 7px 0 14px 0;
	padding-bottom: 7px;
	border-bottom: 1px solid #888888;
}

#appleNav p {
	text-shadow: none;
	line-height: 18px;
	margin: 0 0 10px 0;
}

#appleNav li:hover div a {
	font-size: 12px;
	color: #444;
}

#appleNav li:hover div a:hover {
	color: #889826;
	text-decoration: none;
}

.strong {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.imgshadow { /* Better style on light background */
	background: #FFFFFF;
	padding: 4px;
	border: 1px solid #777777;
	margin-top: 5px;
	-moz-box-shadow: 0px 0px 5px #666666;
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}

.img_left { /* Image sticks to the left */
	width: auto;
	float: left;
	margin: 5px 15px 5px 5px;
}

#appleNav li .black_box {
	background-color: #333333;
	color: #eeeeee;
	text-shadow: 1px 1px 1px #000;
	padding: 4px 6px 4px 6px;
	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	/* Shadow */
	-webkit-box-shadow: inset 0 0 3px #000000;
	-moz-box-shadow: inset 0 0 3px #000000;
	box-shadow: inset 0 0 3px #000000;
}

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

#menu li ul li {
	font-size: 12px;
	line-height: 24px;
	position: relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding: 0;
	margin: 0;
	float: none;
	text-align: left;
	width: 130px;
}

#menu li ul li:hover {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

#appleNav li .greybox li {
	background: #F4F4F4;
	border: 1px solid #bbbbbb;
	margin: 0px 0px 4px 0px;
	padding: 4px 6px 4px 6px;
	width: 116px;
	line-height: 24px;
	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}

#appleNav li .greybox li:hover {
	background: #ffffff;
	border: 1px solid #aaaaaa;
	padding: 4px 6px 4px 6px;
	margin: 0px 0px 4px 0px;
}

#appleNav li .greenbox li {
	background: #eef4d3;
	border: 1px solid #90ac13;
	margin: 0px 0px 4px 0px;
	padding: 4px 6px 4px 6px;
	width: 116px;
	line-height: 24px;
	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}

#appleNav li .greenbox li:hover {
	background: #ffffff;
	border: 1px solid #aaaaaa;
	padding: 4px 6px 4px 6px;
	margin: 0px 0px 4px 0px;
}

#appleNav li .orangebox li {
	background: #ffcaa4;
	border: 1px solid #ba4c0e;
	margin: 0px 0px 4px 0px;
	padding: 4px 6px 4px 6px;
	width: 116px;
	line-height: 24px;
	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}

#appleNav li .orangebox li:hover {
	background: #ffffff;
	border: 1px solid #aaaaaa;
	padding: 4px 6px 4px 6px;
	margin: 0px 0px 4px 0px;
}

#appleNav li .redbox li {
	background: #f2abab;
	border: 1px solid #dc2727;
	margin: 0px 0px 4px 0px;
	padding: 4px 6px 4px 6px;
	width: 116px;
	line-height: 24px;
	/* Rounded Corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}

#appleNav li .redbox li:hover {
	background: #ffffff;
	border: 1px solid #aaaaaa;
	padding: 4px 6px 4px 6px;
	margin: 0px 0px 4px 0px;
}

.ui-dialog .ui-dialog-buttonpane {
	text-align: center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
}

#appleNav li .plus li {
	background: url("../img/template/mainMenu/plus.png") left 6px no-repeat;
	margin: 0px 0px 4px 0px;
	padding: 0px 0px 0px 21px;
	width: 540px;
}

#appleNav li .plus li:hover {
	background: url("../img/template/mainMenu/plus.png") left 6px no-repeat;
	padding: 0px 0px 0px 21px;
	margin: 0px 0px 4px 0px;
}

/************************
 * (VERTICAL) LEFT MENU *
 ************************/

/* menu */
#navMenu {
	
}

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

#navMenu li {
	display: inline;
}

#navMenu li span {
	background: transparent url('../img/template/navMenu/menuBg.png')
		repeat-x 0 0;
	display: block;
	/*
    border-left: 			1px solid #999;
    border-right: 			1px solid #999;
    */
}

#navMenu li span a {
	margin: 0 4px 0 4px;
	font-size: 11px;
	font-weight: bold;
	color: #888888;
	text-decoration: none;
	height: 20px;
	line-height: 20px;
	display: block;
}

#navMenu li span:hover {
	background-position: 0 -20px;
}

#navMenu li span.selected {
	background-position: 0 -40px;
}

#navMenu li span a.collapsed,#navMenu li span a.expanded {
	background: url('../img/template/navMenu/menuIcon.gif') no-repeat top
		right;
}

#navMenu li span a:hover,#navMenu li span.selected a {
	color: #676733;
}

#navMenu li span a.expanded {
	background-position: right -16px;
}

#navMenu li span:hover a.collapsed,#navMenu li span a.collapsed:hover {
	/*background-position:    right -16px;*/
	
}

#navMenu li span.selected a.expanded {
	background-position: right -32px;
}

/* Header & Footer */
#navMenu li.header,#navMenu li.footer {
	height: 10px;
	line-height: 10px;
}

#navMenu li.header span,#navMenu li.footer span {
	border: none;
}

#navMenu li.header span.left {
	background: url('../img/template/navMenu/headerLeft.gif') no-repeat top
		left;
}

#navMenu li.header span.right {
	background: url('../img/template/navMenu/headerRight.gif') no-repeat top
		right;
}

#navMenu li.footer span.left {
	background: url('../img/template/navMenu/footerLeft.gif') no-repeat
		bottom left;
}

#navMenu li.footer span.right {
	background: url('../img/template/navMenu/footerRight.gif') no-repeat
		bottom right;
}

/* subMenu */
#navMenu li ul {
	list-style: none;
}

#navMenu li ul li {
	display: inline;
}

#navMenu li ul li span {
	background: transparent url('../img/template/navMenu/submenuBg.png')
		repeat-x 0 0;
	display: block;
}

#navMenu li ul li span a {
	margin-left: 10px;
	color: #000;
	font-weight: normal;
	font-size: 11px;
	height: 16px;
	line-height: 16px;
}

#navMenu li ul li span:hover {
	background-position: 0 -16px;
}

#navMenu li ul li span.selected:hover {
	background-image: none;
}

#navMenu li ul li span:hover a,#navMenu li ul li span.selected a {
	color: #ff9900;
	font-weight: bold;
}

/********************************
 * (VERTICAL) STEP BY STEP MENU *
 ********************************/
div.stepByStepMenu {
	font-size: 14px;
	padding: 2px;
}

div.stepByStepMenu span.title {
	font: inherit;
	display: block;
	margin: 0 0 4px 28px;
	line-height: 24px;
}

div.stepByStepMenu div.num_0_next,div.stepByStepMenu div.num_1_next,div.stepByStepMenu div.num_2_next,div.stepByStepMenu div.num_3_next,div.stepByStepMenu div.num_4_next,div.stepByStepMenu div.num_5_next,div.stepByStepMenu div.num_6_next,div.stepByStepMenu div.num_7_next,div.stepByStepMenu div.num_8_next,div.stepByStepMenu div.num_9_next,div.stepByStepMenu div.num_0_done,div.stepByStepMenu div.num_1_done,div.stepByStepMenu div.num_2_done,div.stepByStepMenu div.num_3_done,div.stepByStepMenu div.num_4_done,div.stepByStepMenu div.num_5_done,div.stepByStepMenu div.num_6_done,div.stepByStepMenu div.num_7_done,div.stepByStepMenu div.num_8_done,div.stepByStepMenu div.num_9_done,div.stepByStepMenu div.num_0_current,div.stepByStepMenu div.num_1_current,div.stepByStepMenu div.num_2_current,div.stepByStepMenu div.num_3_current,div.stepByStepMenu div.num_4_current,div.stepByStepMenu div.num_5_current,div.stepByStepMenu div.num_6_current,div.stepByStepMenu div.num_7_current,div.stepByStepMenu div.num_8_current,div.stepByStepMenu div.num_9_current
	{
	float: left;
	display: block;
	height: 24px;
	width: 24px;
	clear: left;
}

div.stepByStepMenu div.num_0_next,div.stepByStepMenu div.num_1_next,div.stepByStepMenu div.num_2_next,div.stepByStepMenu div.num_3_next,div.stepByStepMenu div.num_4_next,div.stepByStepMenu div.num_5_next,div.stepByStepMenu div.num_6_next,div.stepByStepMenu div.num_7_next,div.stepByStepMenu div.num_8_next,div.stepByStepMenu div.num_9_next
	{
	background: transparent
		url('../img/template/pictos/numbers/nums_white.gif') no-repeat top
		left;
}

div.stepByStepMenu div.num_0_done,div.stepByStepMenu div.num_1_done,div.stepByStepMenu div.num_2_done,div.stepByStepMenu div.num_3_done,div.stepByStepMenu div.num_4_done,div.stepByStepMenu div.num_5_done,div.stepByStepMenu div.num_6_done,div.stepByStepMenu div.num_7_done,div.stepByStepMenu div.num_8_done,div.stepByStepMenu div.num_9_done
	{
	background: transparent
		url('../img/template/pictos/numbers/nums_gray.gif') no-repeat top left;
}

div.stepByStepMenu div.num_0_current,div.stepByStepMenu div.num_1_current,div.stepByStepMenu div.num_2_current,div.stepByStepMenu div.num_3_current,div.stepByStepMenu div.num_4_current,div.stepByStepMenu div.num_5_current,div.stepByStepMenu div.num_6_current,div.stepByStepMenu div.num_7_current,div.stepByStepMenu div.num_8_current,div.stepByStepMenu div.num_9_current
	{
	background: transparent
		url('../img/template/pictos/numbers/nums_blue.gif') no-repeat top left;
}

div.stepByStepMenu div.num_0_next,div.stepByStepMenu div.num_0_done,div.stepByStepMenu div.num_0_current
	{
	background-position: 0 0;
}

div.stepByStepMenu div.num_1_next,div.stepByStepMenu div.num_1_done,div.stepByStepMenu div.num_1_current
	{
	background-position: 0 -24px;
}

div.stepByStepMenu div.num_2_next,div.stepByStepMenu div.num_2_done,div.stepByStepMenu div.num_2_current
	{
	background-position: 0 -48px;
}

div.stepByStepMenu div.num_3_next,div.stepByStepMenu div.num_3_done,div.stepByStepMenu div.num_3_current
	{
	background-position: 0 -72px;
}

div.stepByStepMenu div.num_4_next,div.stepByStepMenu div.num_4_done,div.stepByStepMenu div.num_4_current
	{
	background-position: 0 -96px;
}

div.stepByStepMenu div.num_5_next,div.stepByStepMenu div.num_5_done,div.stepByStepMenu div.num_5_current
	{
	background-position: 0 -120px;
}

div.stepByStepMenu div.num_6_next,div.stepByStepMenu div.num_6_done,div.stepByStepMenu div.num_6_current
	{
	background-position: 0 -144px;
}

div.stepByStepMenu div.num_7_next,div.stepByStepMenu div.num_7_done,div.stepByStepMenu div.num_7_current
	{
	background-position: 0 -168px;
}

div.stepByStepMenu div.num_8_next,div.stepByStepMenu div.num_8_done,div.stepByStepMenu div.num_8_current
	{
	background-position: 0 -192px;
}

div.stepByStepMenu div.num_9_next,div.stepByStepMenu div.num_9_done,div.stepByStepMenu div.num_9_current
	{
	background-position: 0 -216px;
}

/* WRAPPER */
#wrapper {
	width: 1020px;
	margin: 40px auto;
}

/* CONTENT */
#content {
	margin-top: 50px;
}

#content p {
	font: 14px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial,
		Verdana, sans-serif;
	color: #333333;
	line-height: 18px;
	margin: 15px auto;
	width: 800px;
}

#content p a {
	color: #0088CC;
	text-decoration: none;
}

#content p a:hover {
	text-decoration: underline;
}

/* APPLE STYLE NAVIGATION MENU */
#appleNav {
	position: relative;
	margin-top: 5px;
	list-style: none;
	/* Lucinda Grande is the font used on the website from Apple. */
	font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial,
		Helvetica, sans-serif;
	letter-spacing: -0.5px;
	font-size: 13px;
	/* We want to add the shadow to the complete navigation menu. In order to do that, we'll need to set
    the correct width and height, and also the correct borders, in order to create the perfect drop shadow */
	width: 1020px;
	height: 34px;
	padding: 0px 0px 0px 0px;
	background-color: 	#262723;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	/* Gradient http://gradients.glrzad.com/ */
	background-image: linear-gradient(bottom, rgb(97, 90, 94) 6%,
		rgb(0, 0, 0) 69%, rgb(163, 163, 163) 92% );
	background-image: -o-linear-gradient(bottom, rgb(97, 90, 94) 6%,
		rgb(0, 0, 0) 69%, rgb(163, 163, 163) 92% );
	background-image: -moz-linear-gradient(bottom, rgb(97, 90, 94) 6%,
		rgb(0, 0, 0) 69%, rgb(163, 163, 163) 92% );
	background-image: -webkit-linear-gradient(bottom, rgb(97, 90, 94) 6%,
		rgb(0, 0, 0) 69%, rgb(163, 163, 163) 92% );
	background-image: -ms-linear-gradient(bottom, rgb(97, 90, 94) 6%,
		rgb(0, 0, 0) 69%, rgb(163, 163, 163) 92% );
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.06, rgb(97,
		90, 94) ), color-stop(0.69, rgb(0, 0, 0) ),
		color-stop(0.92, rgb(163, 163, 163) ) );
}

#appleNav li {
	display: block;
}

li.drop,li.nodrop {
	display: block;
	float: left;
	border-right: 1px solid #5d5d5d;
	border-left: 1px solid #929292;
	width: 120px;
	height: 34px;
	background-color: 	#262723;
	/* Gradient http://gradients.glrzad.com/ */
	background-image: linear-gradient(bottom, rgb(97, 90, 94) 6%,
		rgb(0, 0, 0) 69%, rgb(163, 163, 163) 92% );
	background-image: -o-linear-gradient(bottom, rgb(97, 90, 94) 6%,
		rgb(0, 0, 0) 69%, rgb(163, 163, 163) 92% );
	background-image: -moz-linear-gradient(bottom, rgb(97, 90, 94) 6%,
		rgb(0, 0, 0) 69%, rgb(163, 163, 163) 92% );
	background-image: -webkit-linear-gradient(bottom, rgb(97, 90, 94) 6%,
		rgb(0, 0, 0) 69%, rgb(163, 163, 163) 92% );
	background-image: -ms-linear-gradient(bottom, rgb(97, 90, 94) 6%,
		rgb(0, 0, 0) 69%, rgb(163, 163, 163) 92% );
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.06, rgb(97,
		90, 94) ), color-stop(0.69, rgb(0, 0, 0) ),
		color-stop(0.92, rgb(163, 163, 163) ) );
}

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
li.drop:hover,li.nodrop:hover {
	background-image: linear-gradient(bottom, rgb(0, 0, 0) 6%,
		rgb(189, 189, 189) 69%, rgb(74, 77, 73) 92% ); background-image :
	-o-linear-gradient( bottom, rgb( 0, 0, 0) 6%, rgb( 189, 189, 189) 69%,
	rgb( 74, 77, 73) 92%); background-image : -moz-linear-gradient( bottom,
	rgb( 0, 0, 0) 6%, rgb( 189, 189, 189) 69%, rgb( 74, 77, 73) 92%);
	background-image : -webkit-linear-gradient( bottom, rgb( 0, 0, 0) 6%,
	rgb( 189, 189, 189) 69%, rgb( 74, 77, 73) 92%); background-image :
	-ms-linear-gradient( bottom, rgb( 0, 0, 0) 6%, rgb( 189, 189, 189) 69%,
	rgb( 74, 77, 73) 92%); background-image : -webkit-gradient( linear,
	left bottom, left top, color-stop( 0.06, rgb( 0, 0, 0)), color-stop(
	0.69, rgb( 189, 189, 189)), color-stop( 0.92, rgb( 74, 77, 73)));
	box-shadow: inset 0 0 2px 2px #535353;
	background-image: -o-linear-gradient(bottom, rgb(0, 0, 0) 6%,
		rgb(189, 189, 189) 69%, rgb(74, 77, 73) 92% );
	background-image: -moz-linear-gradient(bottom, rgb(0, 0, 0) 6%,
		rgb(189, 189, 189) 69%, rgb(74, 77, 73) 92% );
	background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0) 6%,
		rgb(189, 189, 189) 69%, rgb(74, 77, 73) 92% );
	background-image: -ms-linear-gradient(bottom, rgb(0, 0, 0) 6%,
		rgb(189, 189, 189) 69%, rgb(74, 77, 73) 92% );
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.06, rgb(0,
		0, 0) ), color-stop(0.69, rgb(189, 189, 189) ),
		color-stop(0.92, rgb(74, 77, 73) ) );
}

/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
li.drop:active,li.nodrop:active {
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F),
		color-stop(0.5, #383838), color-stop(0.51, #434343),
		color-stop(1, #555555) );
	background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%
		, #555555 100%);
	background-color: #383838; /* Fallback */
	-moz-box-shadow: inset 0 1px 2px 2px #000;
	-webkit-box-shadow: inset 0 1px 2px 2px #000;
	box-shadow: inset 0 1px 2px 2px #000;
}

a.drop,.nodrop a {
	color: white;
	text-decoration: none;
	text-align: center;
	display: block;
	line-height: 34px;
	outline: none;
}

/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left.
We also remove the borders, since they don't need them. */
#appleNav li:first-child {
	-moz-border-radius: 5px 0 0 0px;
	-webkit-border-radius: 5px 0 0 0px;
	border-radius: 5px 0 0 0px;
	border-left: none;
}

/* The first child image - the logo - has to be centered. Because of the image dimensions, we manually need to shift it a bit. */
#appleNav li:first-child a img {
	vertical-align: middle;
	margin-top: -2px;
}

#appleNav li:last-child {
	-moz-border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;
	border-right: none;
	/* The width of the last menu item (search bar) is bigger than the others */
	width: 174px;
}

#appleNav .menu_right {
	float: right;
	margin-right: 0px;
}

#appleNav .searchbar {
	width: 140px;
	height: 20px;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 20px;
	padding-right: 20px;
}

#appleNav .lastblock {
	border-right: #929292 1px solid;
}

#appleNav ul {
	-moz-padding-start: 0px;
	-webkit-padding-start: 0px;
	padding-start: 0px;
	padding-left: 0px;
	margin-left: 0px;
}