/***************************************************************************
 *                                 page.css
 *                            -------------------
 *
 *  Begin       	    : 	19/02/07
 *  Copyright	        : 	(C) gunth.be
 *  Author	         	: 	Gauthier Dumont
 *	Version				:	1
 *
 ***************************************************************************/

/**
 *	General Style
 */
	
#inscription label,#contact label,#mdp label,#linkForm label,#profil label,#photoComForm label,#contentPage label{ width:200px;}
#adminForm label{ width:142px}
#inscription p,#contact p,#news p,#mdp p,#linkForm p,#convoc p,#profil p,#photoComForm p,#contentPage p,#adminForm p{ margin-top:10px;}
#birthday img,#date img{ margin-right:10px;}
#photo a img,#containerImg img,#album .imagethumb img,#myAlbum #vieuwer img, .photoMyAlbum{padding:2px; border:2px solid #E5EAEE;}
#contact,#mapCamp,#mdp,#member,#liens,#news,#galerie,#album,#staff,#usersProfil,#profil,#myAlbum,#calendar,#photo,#convoc,#rssContent,#contentPage,#login,#retrieveProfil,#adminForm, #sitemap, #administration, #forgot{padding:10px;}
#atffc{ display:none}

/**
 *	Home
 */

#flashNews{ font-size:12px; margin:0 20px 20px 0; padding: 0 0 0 10px;}
	#flashNews h1{color:#F00}

.boxHome{ float:left; margin:0 20px 20px 0; width:436px; min-height:200px; padding:0 0 0 10px;}
	.boxHome img{ vertical-align:middle}
		.boxHome #titleContent h1{ display:block; width:350px; float:left}
		.boxHome #titleContent #rssBox{ float:left; width:20px; padding:7px 0 0 0}
		.boxHome #titleContent #rssBox img{ border:none;}
		.boxHome #lastNews{ padding:0;}
			.boxHome #lastNewsTxt{ margin-top:5px; padding:0 0 0 2px; line-height:17px;}
.littleBoxHome{float:left; margin:0 0 20px 0; width:300px; padding:0 0 0 5px; }
		.littleBoxHome ul li{list-style-image:url(/Design/Images/SiteImages/bullet_green.gif);}
	.littleBoxHome img{padding:2px; border:2px solid #E5EAEE}
	.littleBoxHome div{margin-top:3px;}
	.littleBoxHome div div{ margin:0; padding:0 0 0 5px;}
.boxLargeHome{margin:0 20px 20px 0; padding:0 0 0 10px;}	

#newsList{margin:10px 0 50px 460px; min-height:120px; _height:120px; padding:0; *margin-bottom:0px}	
	#newsList dt strong{color:#66F}
	#newsList dt.selected{ font-weight:bold}
	#newsList dt img{ border:none}
	#newsList dt a{display:block; cursor:pointer}
	.sectionPage #newsList dd{ margin-top:176px}
	#newsList dd{margin:134px 0 0 -458px; width:365px; position:absolute; top:0; clear:both; line-height:17px}
		#newsList dd span.postBy{ display:block; background:url(/Design/Images/SiteImages/sprite.png) -0px -1320px no-repeat; padding:2px 0 2px 20px}
		#newsList dd img{border:2px solid #E5EAEE; float:left; margin-right:10px; padding:2px;}
	#newsList dt{padding:0; margin:0px; clear:both; cursor:pointer}
	    #newsList dt span{display:block; float:left; padding:0px; margin-bottom:5px; *margin-bottom:0px}
	        #newsList dt span img{ margin:2px 10px 0 0}

#fedeList{}
	#fedeList li{ margin:0; list-style:none; background:url(/Design/Images/SiteImages/sprite.png) no-repeat -0px -351px; padding:5px 0 0 20px}
	#fedeList strong{ color:#66F }

#date{margin-top:10px}
	#date li{list-style:none; background:url(/Design/Images/SiteImages/sprite.png) -0px -680px no-repeat; margin-bottom:5px; padding:2px 0 0 22px;}
	#date strong{ color:#66F}
	
#birthday{}
	#birthday li{list-style:none; margin-bottom:5px; padding:0;}	

/**
 *	Inscription
 */

#inscription{ padding:0 10px;}
	#inscription h1{ margin-top:20px;}
	#inscription .hr1{ margin:15px 0 10px 0;}
	.blockINscription{ float:left; width:300px;}
/**
 *  Login
 */
	
#login{}
    #login img{border:none}
    #bgContent #login .input-validation-error{ float:none}
    #login h2{ margin-bottom:10px}
    #connection{ width:380px; margin-right:30px; float:left}
        #login #connection input {border:2px solid #E2E2E2; padding:2px; width:150px; padding-left:20px}
            #login #connection input#username{ background:url(/Design/Images/SiteImages/sprite.png) no-repeat 5px -1076px}
            #login #connection input#password{ background:url(/Design/Images/SiteImages/sprite.png) no-repeat 5px -516px}
        #login #connection input:focus{border:2px solid #2D83DA;}
        #login #connection p{ margin-bottom:10px}
            #login #connection p span{ display:block; margin-left:80px}
        #login #connection label{ display:block; width:80px}
        #login #connection #remember{ *padding-bottom:15px}
        #login #connection #remember label{width:200px; margin-bottom:15px}
        #login #connection #remember input{ position:absolute; margin-top:-1px; *margin-top:-3px; width:auto; padding:0px}
            #login #connection #remember label span{ position:absolute; margin:4px 0 0 0; *margin: 18px 0 0 -172px;}
    #login #inscription{ width:300px; float:left}
        #login #inscription ul{ margin:10px 0;}
            #login #inscription ul li{list-style:none; padding-left:20px; background:url(/Design/Images/SiteImages/sprite.png) no-repeat 0px -355px;}
            
/**
 *  Retrieve Profil
 */
 
#forgot #forgotLogin,#forgot #forgotPassword{ float:left; width:350px;}
#forgot #forgotLogin p,#forgot #forgotPassword p{ height:35px; margin-top:10px}
#forgot #forgotLogin img,#forgot #forgotPassword img{ margin:-4px 0 0 80px;}
#forgot #forgotLogin label,#forgot #forgotPassword label{ display:block; width:80px}
#forgot #forgotLogin input,#forgot #forgotPassword input{ width:200px}
#forgot .mediumBtn{ margin-left:80px}
 
/**
 *	Contact
 */

#contact .label{ float:left; width:200px;}
#contact .clr{ margin-top:7px;}
#contact textarea{ width:438px; height:300px; padding:5px; border:2px solid #E2E2E2; padding:2px}
	
/**
 *	Camps
 */

#mapContainer{ height:540px; padding:2px; border:2px solid #E5EAEE}
#insertMapCanvas{ height:300px;}
	
/**
 *	Membre
 */

#member table{ margin-bottom:10px;}
	#member th{ background:#91b5c3; color:#fff; padding:5px; font-family:Verdana, Arial, Helvetica, sans-serif}
	#member td{ padding:5px; text-align:center}
	#member td a.extLink img{ width:17px; height:17px; background:url(/Design/Images/SiteImages/sprite.png) -0px -1039px  no-repeat;}
#member img{ border:none;}
#userList{padding-top:10px}
    #userList img {width:17px; height:17px;}
        #userList img.edit{background:url(/Design/Images/SiteImages/sprite.png) -0px -1518px no-repeat; padding:0 5px}
        #userList img.delete{background:url(/Design/Images/SiteImages/sprite.png) -0px -1599px no-repeat;}
        #userList img.valide{background:url(/Design/Images/SiteImages/sprite.png) 2px -876px no-repeat;}
#searchUser{}
    .searchUserName{float:left; margin-right:15px; padding:10px; width:279px; height:150px; border:1px solid #6B8A9C}
        .searchUserName .small{ width:270px;}
    .searchSection{float:left; padding:10px; border:1px solid #6B8A9C; width:420px; height:150px}
        .searchSection .left{ float:left}
        .searchSection .blockButton{padding:10px 0 0 0;}
        .searchSection select{width:115px; height:90px}
        .searchOr{float:left; padding:45px 60px 0 60px}
    #searchUser span{ display:block; margin-top:5px; line-height:18px}
    #searchUser p{ padding-bottom:5px; font-weight:bold}
    .mediumBtn{ margin-right:10px}
    #member .status{cursor:help}

/**
 *	Lien
 */

.lien{ margin-bottom:10px;}
#responcePost{ color:#F00; font-weight:bold; padding-left:200px;}

/**
 *	News
 */

#news{line-height:17px;}
    #news .postBy{ background:url(/Design/Images/SiteImages/sprite.png) -0px -1320px no-repeat; padding:2px 0 2px 20px}
	#news .content img{border:2px solid #E5EAEE; float:left; margin-right:10px; padding:2px;}
	#news .content:after{content:"."; display:block; height: 0; clear: both; visibility: hidden; line-height:0px; font-size:1px;}
	#news ul{ padding-left:40px; margin:0;}
		#news li{ padding:0; list-style-image:url(/Design/Images/SiteImages/bullet_green.gif);}
	
/**
 *	Galerie Photo
 */
 
#galerie .album{ margin:10px 0; float:left; width:243px; padding-left:10px;}
	#galerie .album .title{ text-align:center; padding-right:14px; margin-bottom:5px}
	#galerie .album .thumbnail{-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); float:left; width:208px; padding-bottom:11px; background:url(/Design/Images/SiteImages/imageBottomShadow.jpg) bottom no-repeat;}
	#galerie .album .rotation{-webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg);}
		#galerie .album .thumbnail img{padding:2px; margin-top:5px; border:2px solid #E5EAEE}
	#galerie .newAlbum{background:url(/Design/Images/SiteImages/new.png) no-repeat; height:64px; width:64px; position:absolute; margin:5px 0 0 144px}
	#galerie .album .infoAlbum{float:left; width:220px;}
		#galerie .album .infoAlbum .descAlbum{ margin-bottom:10px; color:#000; min-height:35px; max-height:85px; margin-top:7px}
		#galerie .album .infoAlbum div{ margin-top:5px; color:#727272}
		#galerie .album .infoAlbum img{ vertical-align:middle}
		#galerie .album .infoAlbum .albumDate { background:url(/Design/Images/SiteImages/sprite.png) -0px -680px no-repeat; padding:0 0 2px 20px}
		#galerie .album .infoAlbum .albumGallery { background:url(/Design/Images/SiteImages/sprite.png) -0px -40px no-repeat; padding:0 0 2px 20px}
		#galerie .album .infoAlbum .download { background:url(/Design/Images/SiteImages/sprite.png) -0px -800px no-repeat; padding:0 0 2px 20px}
	.imagethumb{padding-bottom:11px; background:url(/Design/Images/SiteImages/imageBottomShadow.jpg) bottom no-repeat;}
	
	#galerie .album .thumbnail .adminTools,#album .imagethumb .adminTools{ background:#fff; margin:7px 0 0 2px}
	    #galerie .album .thumbnail .adminTools a img, #album .imagethumb .adminTools a img{ margin:9px 0 0 3px; border:none}
    
    .gallerie .form2column.right #uploadifyUploader{margin-top:0}
	
/**
 *	Photos
 */

#photo #containerImg{margin:0 auto; text-align:center}
    #photo #containerImg .adminTools{ margin:3px 0 0 14px; padding:0 4px; }
	#addToMyAlbum{ background:url(/Design/Images/SiteImages/sprite.png) -0px -240px no-repeat; padding-left:20px;}
	#linkAddComment a{ background:url(/Design/Images/SiteImages/sprite.png) -0px -600px no-repeat; height:16px; width:120px; display:block; padding-left:20px;}
				
	#ratingBar{ text-align:center; margin:10px 0; padding:0;}
        #ratingBar form{ margin-left:233px; padding-bottom:35px}
    #ratingBar #loader{ background:url(/Design/Images/SiteImages/indicator.gif) center center no-repeat; position:absolute; height:32px; display:none; width:32px; margin:0 0 0 130px; }
			
	#linkAddComment{ float:left; width:378px; text-align:left}
	#linkAddAlbum{ float:left; width:378px; text-align:right}
	#addCom{ margin:5px 0}
		#addCom textarea{ width:300px; height:100px; padding:5px}
		
	#comContainer{ border:1px solid #e9e9e9; padding:10px 10px 0 10px; margin:10px 0 5px 0;}
		#comContainer div{ margin-bottom:10px;}
			#comContainer .comment{ font-size:12px;}
			.timeAdd{ color:#999;}
			.infoUserM{ border-left:5px solid #3399FF; padding-left:5px}
				.infoUserM .loginUser{ color:#3399FF; font-weight:bold}
			.infoUserF{ border-left:5px solid #FF99D8; padding-left:5px}
				.infoUserF .loginUser{ color:#FF99D8; font-weight:bold}
			#noComment{ text-align:center;}
	#indicComment{ height:150px; width:100%}
	#rateForm input{ display:none}
	
	#album .imagethumb{width:231px;}
	#album .imagethumb .adminTools{ margin:3px 0 0 14px; padding:0 4px; }
		#album .imagethumb{-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform:rotate(-5deg);}
		#album .rotation{-webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform:rotate(5deg);}
		
/**
 *	Agenda
 */

#calendar{}
    #calendar #navNextPrev{padding:10px 0}
    #calendar .meeting{margin-top:12px; float:left; width:540px}
        #calendar .meeting .adminTools{ margin-left:500px}
        #calendar .date{ float:left;}
            #calendar .date div{ background:url(/Design/Images/SiteImages/calendar.jpg) no-repeat; height:49px; width:45px; float:left}
            #calendar .date div.clr{ float:none; background:none; height:0; width:0;}
                #calendar .date .startDate{ margin-right:10px}
                #calendar .date div span{ display:block}
                #calendar .date div span.hour{ color:#fff; text-align:center; margin-top:4px;}
                #calendar .date div span.day{ color:#666; font-size:22px; font-weight:bold; text-align:center}
        #calendar .content{ float:left; margin-left:10px; width:430px}
            #calendar .content .title{margin-bottom:10px; font-weight:bold;}
    #calendar .clr{ margin-top:5px}
    #calendar #left #navNextPrev { padding:0}            
        #calendar #left #navPrev {width:234px;}
        #calendar #left #navNext {width:240px;}
    
    #calendar .selectedDate{ background:#000; color:#fff}
    #calendar #nextEvent{ float:left}
    #calendar .calendar{ border-collapse:collapse; float:left; margin-right:10px}
        #calendar .calendar caption{text-align:center; width:209px; color:#fff; text-transform:uppercase; text-shadow:#000 0 -1px; font-weight:bold; font-size:14px; background:url(/Design/Images/SiteImages/topCalendar.gif) 16px 0 no-repeat; padding-top:15px}
            #calendar .calendar caption span{ display:block;}
                    #calendar .calendar caption a,#calendar .calendar caption img{ display:block; line-height:0; font-size:0}
                #calendar .calendar caption span.title{ float:left; width:155px; margin-top:10px}
                #calendar .calendar caption span.left{ float:left;}
                #calendar .calendar caption span.right{ float:left;}
            #calendar .calendar tr{ border:solid #e6e6e6; border-width:0 1px; text-transform:uppercase; color:#9e9e9e}
                #calendar .calendar tr th{padding:7px 2px;}
                    #calendar .calendar td{ text-align:center; padding:5px 8px; border:1px solid #e6e6e6 }
                    #calendar .calendar td.selectedDate{ background:url(/Design/Images/SiteImages/selectedCalendar.gif) repeat-x;}
                    #calendar .calendar td.today{ font-weight:bold; background:#ededed; color:#2b2b2b}
    #calendar h2 { margin:10px 0 5px 0}
    #calendar li{ list-style:none; margin-bottom:5px}
        #calendar li span{ font-weight:bold; display:block}
        #calendar li span.icon{background:url(/Design/Images/SiteImages/sprite.png) -0px -680px no-repeat; height:16px; width:16px; margin-right:5px; width:16px; float:left}
    #calendar .calendar a img{ border:none}
            
/**
 *	Convoc
 */

#convoc{ line-height:17px}
    #convoc hr{ margin-top:10px}
	#convoc .postBy{ margin-bottom:10px; background:url(/Design/Images/SiteImages/sprite.png) -0px -1320px no-repeat; padding:2px 0 2px 20px}
	#convoc ul{ padding-left:40px; margin:0 0 10px 0;}
	#convoc ul.otherConvoc{width:294px; float:left}
		#convoc li{ padding:0; list-style-image:url(/Design/Images/SiteImages/bullet_green.gif);}
	#convoc .facebookLike{ margin-top:-25px;}
	#convoc table{border:1px solid #D0DEE7; border-collapse:collapse;}

/**
 *	My album
 */
 
#myAlbum #albumUser{ overflow:auto; white-space:nowrap; margin:20px 10px 0 10px; width:670px; height:180px; padding-bottom:5px;}
	#myAlbum #albumUser img{ vertical-align:middle; margin-right:5px; padding:2px; border:2px solid #E5EAEE;}
	#myAlbum #loader{ background:url(/Design/Images/SiteImages/indicator.gif) center center no-repeat; height:32px; width:32px; margin:50px auto 0 auto; }
	#myAlbum #vieuwer{ text-align:center; margin-bottom:10px; min-height:395px; _height:395px;}
	#myAlbum #loaderVieuwer{background:url(/Design/Images/SiteImages/indicator.gif) center center no-repeat; margin-bottom:10px; min-height:395px; _height:395px;}
	#myAlbum #imageDetail span{ position:absolute}
		#myAlbum #imageDetail .left{ margin:180px 0 0 25px }
		#myAlbum #imageDetail .right{ margin:180px 0 0 630px;}
		#myAlbum #imageDetail img{ border:none;}
	#myAlbum #toolContainer{ position:absolute; background:#fff; padding:5px;}
	
/** 
 *	RSS
 */

#rssContent{ line-height:17px;}
	#rssContent h2{ margin:0 0 5px 0}
	#rssContent div{ margin:5px 0}
	#rssContent img{ vertical-align:middle}
	#rssContent ul{ padding:0 0 5px 20px; margin:0;}
	html*#rssContent ul{ padding:0 0 5px 10px; margin:0;}	
		#rssContent li{ padding:0; list-style-image:url(/Design/Images/SiteImages/bullet_green.gif);}
		html*#rssContent li{ padding-left:10px;}
	
/**
 *	User on-line
 */
 
#usersOnline th{ background:#91b5c3; color:#fff; padding:5px; font-family:Verdana, Arial, Helvetica, sans-serif}
#usersOnline td{ padding:5px; text-align:center}
#usersOnline .subTitleTable{background:#afd5e3; text-align:left; font-weight:bold; padding:5px 5px 5px 10px;}

/**
 *	Profil
 */

#profil .hr1{ margin:15px 0 10px 0;}

/**
 *	Popup
 */

#popupContent{ position:absolute; width:560px; height:470px; margin:-235px 0 0 -280px; top:50%; left:50%; background:#fff;}
	#popupContent p{ padding:10px; line-height:17px;}
	.closeLink{ padding:5px 0 0 330px; color:#fff }
		body .closeLink a{color:#fff}

/**
 *	User profil
 */

#usersProfil #userDetail{ float:left; width:400px;}
	#usersProfil  ul{ padding:0 0 0 20px; margin:0;}
	html*#usersProfil ul{ padding:0 0 0 10px; margin:0;}
		#usersProfil li{ padding:0; list-style:none; padding-bottom:15px; clear:both}
		html*#usersProfil li{ padding:0 0 0 10px;}
	#usersProfil .label{ float:left; width:130px; margin-bottom:10px}
	#contactProfil .label{ float:left; width:50px;}
#usersProfil #avatar, #usersProfil #contactProfil{ float:left; width:300px;}
#usersProfil #contactProfil{ margin-top:15px;}
#usersProfil #avatar img{ margin-left:15px; border:2px solid #E5EAEE; padding:2px;}
#usersProfil #albumUser{ overflow:auto; white-space:nowrap; margin:20px 10px 0 10px; width:670px; height:180px; padding-bottom:5px;}
	#usersProfil #albumUser img{ vertical-align:middle; margin-right:5px; padding:2px; border:2px solid #E5EAEE;}
	#usersProfil #loader{ background:url(/Design/Images/SiteImages/indicator.gif) no-repeat; height:32px; width:32px; margin:50px auto 0 auto; }
	
/**
 *	Staff
 */

.animRes{ border:1px solid #999; padding:5px; margin:0 0 10px 0}
.anim{padding:5px 5px 10px 5px; margin:0 0 10px 0; border-bottom:1px solid #E9E9E9;}
	.photo{ float:left; width:150px;}
	    .anim .photo img{border:2px solid #E5EAEE; padding:2px}
	.infoAnim{ float:left; padding:5px 0 0 0;}
		.infoAnim .label{width:150px; display:block; font-weight:bold;}
		.infoAnim p{ float:left; margin:0 0 4px 0;}
#imageMemberStaff{ position:absolute; margin:0 0 0 389px; top:162px; width:306px;}
    #imageMemberStaff p{  margin: 0 0 10px 0; padding:0; line-height:18px}
    #imageMemberStaff input{ cursor:pointer}
    #imageMemberStaff #imageStaff{ margin-top:10px}
    #uploadBtn{ float:left; display:block; background:url(/Design/Images/SiteImages/upload.gif) no-repeat; width:100px; height:33px; cursor:pointer;}
    #imageMemberStaff img{float:left; margin-left:11px; border:none}
    #imageMemberStaff #imageStaff img{ float:none; margin:10px 0 0 0;}

/**
 *	Content Page
 */

#contentPage{ line-height:17px}
	#contentPage p{ margin:0 0 10px 0;}
	#contentPage h2{ margin:10px 0 20px 0; padding:0}
	#contentPage ul{ padding:0 0 5px 20px; margin:0;}
	#contentPage input{ margin-right:2px}
	#contentPage img{ vertical-align:middle; border:none}
	html*#contentPage ul{ padding:0 0 5px 10px; margin:0;}	
		#contentPage li{ padding:0; list-style-image:url(/Design/Images/SiteImages/bullet_green.gif);}
		html*#contentPage li{ padding:0 0 0 10px;}

/**
 *	Map
 */

#mapCamp{}
    #mapCamp .loader{background:url(/Design/Images/SiteImages/indicator.gif) #fff no-repeat; height:32px; width:32px; border:1px solid #000; position:absolute; margin:-285px 0 0 350px;}
    .infoWindow{}
        .infoWindow img{ border:2px solid #E5EAEE; padding:2px; margin-right:5px}
    
/**
 *  Sitemap
 */

#sitemap{ line-height:17px}
    #sitemap dt{ font-weight:bold}
        
/**
 *  Administration
 */
 
#administration{}
    #administration .date{ float:left; padding-top:3px; margin-right:10px}
    #administration .chart{width: 300px; height: 20px; margin-bottom:10px; background-color:#92B7D3; float:left}
    #administration .percentage{height: 20px; background-color:#5B93BF; border-right: 1px solid #fff;}
    #administration .chartLabel{margin-top: -17px; color: white; padding-left: 4px;}
    #administration .chartInfo{text-align: right; margin-top: -14px; color: white; padding-right: 4px;}