/**
 * "Phare Avec Julie" CSS file
 *
 * @author MADs
 * @email contact@madsgraphics.com
 */

/**
 * Reset
 */
* {
	padding: 0;
	margin: 0;
	vertical-align: baseline;
	line-height: 1.35em;
}

p {
	margin-bottom: 1em;
}

#menu li,
#submenu-actions li {
	list-style-type: none;
}


/**
 * Containers
 */
body {
	background: #66ccff url(../img/skin/background.jpg) center top repeat-x;
	font-family: 'Arial', 'Helvetica', 'Sans-Serif';
	font-size: 13px;
}

#container {
	width: 950px;
	margin: 0 auto;
	background: url(../img/skin/container.jpg) 0 0 repeat-y;
	position: relative;
}


/**
 * Header
 */
#header {
	width: 950px;
	height: 570px;
}

#header h1 {
	width: 100%;
	height: 100%;
	text-indent: -5000px;
	background: url(../img/skin/header.jpg) 0 0 no-repeat;
}

#hang {
	display: none;
}

#need-you {
	position: absolute;
	right: 0px;
	top: 230px;
	width: 225px;
	height: 125px;
}

#need-you a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -5000px;
	background: url(../img/skin/need-you.jpg) right top no-repeat;
	outline: none;
}

#need-you a:hover {
	background-position: 0 -125px;
}

/**
 * Menu
 */
#menu {
	float: left;
	width: 200px;
	padding-left: 70px;
}

#menu li a {
	display: block;
	height: 100px;
	text-indent: -5000px;
	outline: none;
	background-image: url(../img/skin/menu.png);
	/* Position for the anim' */
	margin-bottom: -20%;
}

#menu-01 a {
	background-position: 0 0;
}

#menu-02 a {
	background-position: 0 -100px;
}

#menu-03 a {
	background-position: 0 -200px;
}

#menu-04 a {
	background-position: 0 -300px;
}

#menu-05 a {
	background-position: 0 -400px;
}

#menu-06 a {
	background-position: 0 -500px;
}

#menu-07 a {
	background-position: 0 -600px;
}


/**
 * Widgets
 */
#widgets {
	float: right;
	width: 260px;
	margin-top: -119px; /* Align the widget bar */
}

.widget {
	width: 260px;
	background: url(../img/skin/widget.jpg) right bottom no-repeat;
}

.widget .title {
	height: 70px;
	width: 300px;
	text-indent: -5000px;
	margin-left: -40px; /* Adjust the left side */
}

.widget .content {
	padding: 1em 20px 10px 25px;
	font-size: 0.8em;
	color: #3399cc;
}

.widget .action {
	font-weight: bold;
	margin-bottom: 0.2em;
}

.widget .action a {
	font-size: 1.2em;
	color: #006699;
}

.widget .date {
	font-style: italic;
	margin-bottom: 0.5em;
}

.widget .date,
.widget .desc {
	padding-left: 1em;
}


/**
 * Widgets titles
 */
#widget-01 h3 {
	background: url(../img/skin/widget_01.jpg) right top no-repeat;
}


/**
 * Main / Content
 */
#main {
	padding: 0 270px 0 275px;
}

.page {
	margin-top: 20px;
}

.page .content {
	text-align: justify;
	color: #006699;
}

.page .content a {
	color: #006699;
}

/**
 * Pages titles
 */
.page .title {
	width: 405px;
	height: 80px;
	margin-bottom: 1em;
	text-indent: -5000px;
}

#histoire h2 {
	background: url(../img/skin/notre_histoire.jpg) 0 0 no-repeat;
}

#missions h2 {
	background: url(../img/skin/nos_missions.jpg) 0 0 no-repeat ;
}


#actions-futur h2 {
	background: url(../img/skin/actions_futur.jpg) 0 0 no-repeat;
}

#actions-past h2 {
	background: url(../img/skin/actions_past.jpg) 0 0 no-repeat;
}

#contact h2 {
	background: url(../img/skin/rejoignez-nous.jpg) 0 0 no-repeat;
}

#links h2 {
	background: url(../img/skin/links.jpg) 0 0 no-repeat;
}

#staff h2 {
	background: url(../img/skin/staff.jpg) 0 0 no-repeat;
}

/**
 * Missions : Accordion system
 */
#missions dd {
	/*
	 * Mask the content of the missions for the script
	 */
	display: none;
}

#missions dt,
#staff dt.subtitle {
	padding: 33px 13px 13px 40px;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background: url(../img/skin/sub_box_title.jpg) 0 0 no-repeat;
	cursor: pointer; /* Specify the click action */
}

#missions dd {
	padding: 0 30px;
}


/**
 * Staff
 */
#staff dt {
	cursor: auto;
}

#staff dd {
	padding: 0 30px;
}

.members dt {
	margin-top: 1em;
	border-bottom: 1px dotted #3399cc;
	font-weight: bold;
}

.members dt a {
	text-decoration: none;
}

.members dt span.function {
	font-weight: normal;
	font-size: 0.9em;
	font-style: italic;
}

.members dd {
	margin: 0.5em 0 1em;
	font-size: 0.9em;
}

.members dd img {
	width: 96px;
	height: 96px;
	float: right;
	margin: 0 0 5px 15px;
}


/**
 * Actions - Submenu
 */
#submenu-actions {
	float: right;
	width: 270px;
	margin: -131px -269px 0 0; /* align with the background */
}

#submenu-actions a {
	display: block;
	background: url(../img/skin/submenu_actions.jpg);
	text-indent: -5000px;
	outline: none;
}

#submenu-ical a {
	height: 70px;
}

#submenu-actions-01 a {
	height: 65px;
	background-position: 0 -70px;
}

#submenu-actions-01 a:hover,
#actions-futur #submenu-actions-01 a {
	background-position: -270px -70px;
}

#submenu-actions-02 a {
	height: 65px;
	background-position: 0 -135px;
}

#submenu-actions-02 a:hover,
#actions-past #submenu-actions-02 a {
	background-position: -270px -135px;
}


/**
 * Actions
 */
.action-name {
	font-weight: bold;
	font-size: 1.2em;
	height: 35px;
	background: url(../img/skin/stars.jpg) 0 0 no-repeat;
	padding-left: 40px;
	margin-bottom: 0.5em;
}

.action-name .date {
	font-weight: normal;
	font-size: 0.7em;
	font-style: italic;
}

.action-content {
	margin-left: 35px;
	border-bottom: 2px solid #3399cc;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

.comment-trigger {
	margin: 0.5em 0;
	font-weight: bold;
	background: url(../img/skin/mini_cloud.jpg) 0 0 no-repeat;
	height: 25px;
	line-height: 25px;
	padding-left: 35px;
}

.comments dl {
	/*
	 * Hide the comments for the script
	 */
	display: none;
	/* */
	margin-left: 2em;
	padding-left: 1em;
	border-left: 1px dotted #3399cc;
}

.comments dt {
	font-weight: bold;
	border-bottom : 1px dotted #3399cc;
	padding-bottom: 0.2em;
	margin-bottom: 0.2em;
}

.comments dt a {
	color: #006699;
	text-decoration: none;
}

.comments .date {
	font-weight: normal;
	font-size: 0.8em;
	font-style: italic;
	color: #3399cc;
}

.comments dd {
	margin-bottom: 2em;
	padding-left: 1.5em;
	font-size: 0.9em;
}

.comments .input {
	margin-top: 0.5em;
}

.comments label {
	float: left;
	width: 70px;
	margin-right: 10px;
	text-align: right;
	font-size: 11px;
}

.comments input,
.comments textarea {
	width: 210px;
}

.comments .button {
	margin-top: 1em;
	margin-left: 80px;
}

.warning {
	padding-bottom: 0.5em;
	text-align: center;
	color: red;
}


/**
 * Tooltip
 */
#tooltip {
	position: absolute;
	width: 250px;
	color: #fff;
	font-size: 11px;
	background-color: #006699;
	border: 1px #fff solid;
}

#tooltip h3 {
	margin: 5px 5px 2px;
}

#tooltip div {
	margin: 0 5px 5px;
	text-align: justify;
}




/**
 * Partenaires
 */
#links table {
	border-spacing: 10px;
}

#links td {
	width: 120px;
	height: 100px;
	text-align: center;
	vertical-align: middle;
}

#links td.empty {
	background: url(../img/skin/medium_cloud.jpg) center center no-repeat;
}

#links td .partner {
	display: block;
	margin-top: 0.5em;
	font-size: 0.8em;
}

/**
 * Contact
 */
#adhesion_title {
	width: 405px;
	height: 60px;
	background: url(../img/skin/donate.jpg) 0 0 no-repeat;
	text-indent: -5000px;
	margin: 1em 0;
}

#adhesion_content fieldset {
	border: 1px dotted #3399cc;
	padding: 1em;
	margin: 1em 0;
}

#adhesion_content legend {
	background: #fff url(../img/skin/mini_cloud.jpg) 0 0 no-repeat;
	height: 25px;
	line-height: 25px;
	font-weight: bold;
	padding: 0 5px 0 40px;
}

#adhesion_content .input {
	margin-bottom: 0.5em;
}

#adhesion_content #coor label {
	float: left;
	width: 70px;
	text-align: right;
	margin-right: 10px;
	font-size: 11px;
}

#adhesion_content #coor input,
#adhesion_content #coor textarea {
	width: 280px;
}

#adhesion_content #don input {
	margin-right: 10px;
}


/**
 * Notre réseau - widget
 */
#widget-02 {
	margin-top: 20px;
}

#widget-02 .title {
	background: url(../img/skin/widget_02.jpg) right top no-repeat;
	margin-left: 0px !important;
	text-indent: 0px !important;
	width: 260px !important;
}

#widget-02 .title span {
	display: block;
	padding: 42px 65px 0 25px;
	font-family: 'Comic Sans Ms';
	font-size: 16px;
	font-weight: bold;
	color: #fff;
}

#widget-02 .title a {
	color: #fff;
	text-decoration: none;
}

#widget-02 a:hover {
	text-decoration: underline;
}

#widget-02 .content {
	margin-left: -5px;
	text-align: justify;
}

#widget-02 .desc {
	padding-left: 0px;
	font-size: 1.1em;
}

#widget-02 .desc ul {
	padding-bottom: 1em;
}

#widget-02 .desc ul li {
	list-style-position: inside;
	list-style-type: square;
	margin-left: 1em;
}

#widget-02 .link {
	display: block;
	text-align: center;
	margin: 1em 0;
	color: #3399cc;
	text-decoration: none;
	font-size: 1.1em;
	font-weight: bold;
}

#widget-02 .content img {
	width: 96px;
	height: 96px;
	float: right;
	margin: 0 0 5px 15px;
}

#widget-02 dt {
	font-size: 1.2em;
	font-weight: bold;
	border-bottom: 1px dotted #3399cc;
	margin-bottom: 0.2em;
}

#widget-02 .function {
	font-size: 0.8em;
	font-style: italic;
	font-weight: normal;
	padding-left: 0.5em;
}

#widget-02 dt a {
	color: #3399cc;
	text-decoration: none;
}

#widget-02 dd {
	padding-left: 1em;
	margin-bottom: 1.5em;
}


/**
 * Footer
 */
#footer {
	clear: both; /* Restore the container height */
	padding: 70px 190px 10px 170px;
	text-align: center;
	font-size: 0.8em;
	color: #3399cc;
}

#footer a {
	color: #3399cc;
	text-decoration: none;
}

#footer a:hover {
	border-bottom: 1px dotted #3399cc;
}