/* Template RULES (tranche n°2) */

/* left column includes #guidance and #menu_rules
    (only way to keep them stacked while keeping the "natural" HTML order: menu before content) */
#left_column {
	width: 326px;
	margin: 6px 32px 30px 0;
}


/* Guidance on the left, above */
#guidance { font-weight: bold; }

#guidance div { padding: 0 0 4px 16px; }

#guidance p { margin: 0; }

/* Menu on the left
     #menu_rules      */
#menu_rules {
	float: left;
	width: 301px;
}

#menu_rules h3 {
	font-size: 1.667em;
	color: #4B4B4B; /* by default, should be overridden below */
	min-height: 26px;
	margin: 0 5px 0.2em 9px;
	padding-left: 37px;
	padding-top: 4px;
}
#menu_rules h3 span {
	font-size: 0.9em;
	font-weight: normal;
}

	/* Each title has its icon and color */
#menu_rules #title1 h3 { color: #4B76FF; background: url(/about/rules/media/rules_info.png) left top no-repeat; }
#menu_rules #title2 h3 { color: #B1AF89; background: url(/about/rules/media/rules_puppet.png) left top no-repeat; }
#menu_rules #title3 h3 { color: #EFCE06; background: url(/about/rules/media/rules_camera.png) left top no-repeat; }
#menu_rules #title4 h3 { color: #9BD547; background: url(/about/rules/media/rules_money.png) left top no-repeat; }
#menu_rules #title5 h3 { color: #F43D42; background: url(/about/rules/media/rules_home.png) left top no-repeat; }

#menu_rules ul { margin: 8px 0 33px 0; }

#menu_rules li {
	font-size: 1.2em;
	color: #4B4B4B;
	padding-left: 23px;
}

#menu_rules ul a { color: #4B4B4B; }

	/* Styling the current page in the menu */
#menu_rules .active {
	font-weight: bold;
	background: url(/about/rules/media/icon_arrow_beigewhite.png) 5px top no-repeat;
}
	/* The active item is colored according to the title it belongs to,
		same thing for the (:hover)ed links */
#menu_rules #title1 .active, #menu_rules #title1 a:hover { color: #4B76FF; }
#menu_rules #title2 .active, #menu_rules #title2 a:hover { color: #B1AF89; }
#menu_rules #title3 .active, #menu_rules #title3 a:hover { color: #EFCE06; }
#menu_rules #title4 .active, #menu_rules #title4 a:hover { color: #9BD547; }
#menu_rules #title5 .active, #menu_rules #title5 a:hover { color: #F43D42; }



/* Pub is already OK: 23px from the left of the page and 23px from #links */


/* Links (below or left to pub)
 	(must work with two variants)
	2nd rule annihilates margin-left for both so 1st rule (more specific) brings back
	the correct margin-left when #links is on the left under menu */
#left_column #links {
	margin-top: 15px;
	margin-left: 30px; /* 30 and not 23px because width: 286, not 301px */
}
#links {
	margin-left: 0;
}

	/* 301px is too wide: now 286px */
.frame_lightbeige_286_out {
	color: white;
	background: url(/about/rules/media/frame_lightbeige_286_top.png) 0 0 no-repeat;
	float: left;
	width: 286px;
	margin: 0 0 12px 23px;
	padding-top: 11px;
}
.frame_lightbeige_286_in {
	background: url(/about/rules/media/frame_lightbeige_286_bottom.png) left bottom no-repeat;
	padding: 0px 16px 8px 32px;
}

#links, #links .frame_lightbeige_286_in { background-color: #B5B390; }

#links p.first_link { margin: 0 0 0.8em 0; }

#links p { color: #4B4B4B; }

#links p a {
	color: white;
	font-weight: bold;
}



/* Main content on the right 
	 #content_rules           */

.frame_lightbeige_2col_out {
	background: #D4D3BF url(/about/rules/media/frame_lightbeige_2col_top_temp.png) left top no-repeat;
	float: left;
	width: 610px;
	margin: 6px 13px 30px 0;
	padding-top: 9px;
}

.frame_lightbeige_2col_in {
	background: url(/about/rules/media/frame_lightbeige_2col_bottom_temp.png) left bottom no-repeat;
	padding-bottom: 10px;
}

.frame_lightbeige_2col_out h2, .frame_lightbeige_2col_out h3, .frame_lightbeige_2col_out h4 {
	color: #6F6C3C;
	margin: 1em 10px 0.2em 25px;
}

.frame_lightbeige_2col_out h2 img { vertical-align: bottom; }

.frame_lightbeige_2col_out h2 {
	font-size: 1.667em;
	margin-top: 0;
}

.frame_lightbeige_2col_out h3 {
	font-size: 1.333em;
	clear: both;
}
.frame_lightbeige_2col_out h4 {
	font-size: 1.2em;
	clear: both;
}

.frame_lightbeige_2col_out p {
	color: #4B4B4B;
	padding: 0 10px 0 25px;
}

.frame_lightbeige_2col_out p a {
	color: white;
	font-weight: bold;
}

.frame_lightbeige_2col_out p.trick {
	text-align: center;
	font-weight: bold;
	color: #4B4B4B;
	background-color: #B1AF89;
	float: right;
	width: 200px;
	margin-right: 40px;
	padding: 16px 25px;
}

/* Table: yellow  */

/* =TODO: 
		 - pas de border-left sur les th de gauche
		 - pas de border-top sur les th du haut
		 - un gris un peu plus clair que 4B?
		 - des border en image pour du pointillé? Tester avec dashed et dotted avant (pas de dotted sur IE6 ...)
	Idée - publi-like: pas de border-top du tout car le sens de lecture est vertical !?!
		 */

table {
	border-collapse: collapse;
	order-top: 3px double black;
	margin: 0 12px;
}

caption {
	font-style: italic;
	caption-side: bottom;
	padding: 6px;
}

/* size of cells */
tr th, tr td { height: 4.7em; }
th.left_top { width: 22%; }
th { width: 15%; }

/* colors, borders and text style */
th {
	color: white;
	background-color: #EFCE06;
}

td {
	font-size: 0.915em;
	text-align: center;
	background-color: white;
	padding: 6px 2px;
}

td span {
	color: #EFCE06;
	font-weight: bold;
}

th, td { border-left: 1px solid #4B4B4B; }
th, td { border-top: 1px dotted #4B4B4B; }

.heading_top th { border-left: 1px solid #4B4B4B;	border-top: none; border-bottom: 3px double #4B4B4B; }
th.left_top, th { border-left: none;	}

.cartoon_class { font-size: 1em; }

/* special link with background */
#rules .link_bg {
	background: darkred url(/common/media/linkbg_red_left.png) 0 0 no-repeat;
	float: right;
	min-height: 22px;
	margin: 0 12px 9px 0;
	padding: 0 0 0 3px;
}

#rules .link_bg a {
	font-weight: bold;
	color: white;
	background: darkred url(/common/media/linkbg_red.png) top right no-repeat;
	display: block;
	min-height: 20px;
	padding: 2px 16px 0 3px;
}

/* ----------------------------- */
/*       Added 03/01/2008        */
/*                               */
/* ----------------------------- */

/* #right_column already exists in another template with 3 instructions.
	float: left; is also needed here.
	margin-left: sth; must be zeroed
	width: 301px must be changed to 610px (same width as its child #rules_content) */
#right_column {
	loat: none;
	margin: 0;
	width: 610px;
}