body,html 
{
	margin:0;
	padding:0;
	background:#FFF;
	color:#224;
	font-size:11px;
	font-family:Arial,Sans-Serif;
	background-color:#356;
}
#wrap 
{
	background:#79a;
	margin:0 auto;
	width:1024px;
	border:2px solid #333;
	border-top:1px solid #333;
	border-bottom:1px solid #333;
}
#header 
{
	margin:0;
	width: 1024px;
	height: 125px; 	
	background-color:#eee;
	overflow:hidden;
	position:relative;
}
#main 
{
	width:1004px;
	margin: 10px auto;
	padding: 10px auto;
	height:auto;
	min-height:400px;
	position:relative;
	clear:both;	
}

#footer 
{
	text-align: left;
	color:#fff;
	clear:both;
	margin:0;
	width: 1024px;	
	background:#555 url(../images/design/footer_bg.jpg) 0 0 repeat-x;	
	overflow:hidden;
	position:relative;
}
#logo
{
    width:auto;
	height:auto;
	border:0;
	position:absolute;
	z-index:1;	
}
#login
{
    font-size:10px;
    width:300px;
    float:right;
    text-align:right;
    margin-right:30px;
}
#mainbottomblock>div
{
    width:300px;
    height:150px;
    background-color:#eee;
    float:left;
}
#link
{
    float:left;
    text-align:center;
    left:150px;
    top:10px;
	position:absolute;
	z-index:2;    
}
#link ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
#link ul li
{
    float:left;
    margin:0 2px 0 0;
}
/***
FORMULAIRE
***/
label
{
    display:block;
    width:130px;
    float:left;
    clear:right;  
    padding:5px 0 0 0;
    margin:0 10px 0 0;
    text-align:right;
    font-size:11px;
    font-weight:700;
    color:#333;
}
input[type="text"],input[type="password"],select
{
    width:140px;
    color:#333;
    border:0px;
    background-color:#eef;
    height:24px;
    line-height:24px;
    font-weight:700;
    font-size:12px;
}
.block_left fieldset
{
    float:left;
    width:370px;
    margin:10px 0 0 0;
    position:relative;
}
.block_left label
{
    display:block;
    width:150px;
    float:left;
    padding:3px 20px 0 0;
    height:auto;
}
.block_right p
{
    padding: 0 5px;
}
/***
Dummy Class
***/
.t_center{text-align:center;}
.t_right{text-align:right;}
.t_justify{text-align:justify;}
.clear{clear:both;}
.clearleft{clear:left;}
.left{float:left;}
.right{float:right;}
.none{float:none;}
.dnone{display:none;}
.nomargin{margin:0;}
.nopadding{padding:0;}
.strong{font-weight:700;}
.nobold{font-weight:400;}
.center{margin:0 auto;}

.white,.hwhite:hover{color:#fff!important;}
.black,.hblack:hover{color:#000!important;}
.gray,.hgray:hover{color:#ccc!important;}
.blue,.hblue:hover{color:#79a!important;}
.dblue,.hdblue:hover{color:#224!important;}
.red,.hred:hover{color:#c32!important;}
.orange,.horange:hover{color:#f90!important;}
.green,.hgreen:hover{color:#454!important;}

.bgwhite,.bghwhite:hover{background-color:#fff!important;}
.bgblack,.bghblack:hover{background-color:#000!important;}
.bggray,.bghgray:hover{background-color:#ccc!important;}
.bgblue,.bghblue:hover{background-color:#79a!important;}
.bgdblue,.bghdblue:hover{background-color:#224!important;}
.bgred,.bghred:hover{background-color:#c32!important;}
.bgorange,.bghorange:hover{background-color:#f90!important;}
.bggreen,.bghgreen:hover{background-color:#454!important;}
/***
CORNER
**/
.block {width: auto; float:left; position:relative;background-color: #eee;min-width:100px;}
.block_blue{background-color:#dde;border:2px solid #224;}
.block_green{background-color:#ded;border:2px solid #360;}
.block .top_left, .block .top_right, .block .bottom_left, .block .bottom_right,
.block_blue .top_left, block_blue .top_right, block_blue .bottom_left, block_blue .bottom_right,
.block_green .top_left, block_green .top_right, block_green .bottom_left, block_green .bottom_right
    { height: 10px; width: 10px;background-repeat: no-repeat; position: absolute; background-color: Transparent; }
.block .top_left { top: 0px; left: 0px; background-image: url("../images/design/corner_top_left.png"); z-index: 0;width:100%; }
.block .top_right { top: 0px; right: 0px; background-image: url("../images/design/corner_top_right.png"); z-index: 1; }
.block .bottom_left { bottom: 0px; left: 0px; background-image: url("../images/design/corner_bottom_left.png"); z-index: 2;width:100% }
.block .bottom_right { bottom: 0px; right: 0px; background-image: url("../images/design/corner_bottom_right.png"); z-index: 3; }

.block_left{width:694px;margin:0 10px 0 0;float:left;} 
.block_right{width:300px;float:right;} 
.block_right.block_blue,.block_right.block_green{width:196px;} 

.block_blue .top_left { top: -2px; left: -2px; background-image: url("../images/design/corner_top_left_blue.gif"); z-index: 0;width:100%; }
.block_blue .top_right { top: 0px; right: -4px; background-image: url("../images/design/corner_top_right_blue.gif"); z-index: 1; }
.block_blue .bottom_left { bottom: -2px; left: -2px; background-image: url("../images/design/corner_bottom_left_blue.gif"); z-index: 2;width:100% }
.block_blue .bottom_right { bottom: 0px; right: -4px; background-image: url("../images/design/corner_bottom_right_blue.gif"); z-index: 3; }

.block_green .top_left { top: -2px; left: -2px; background-image: url("../images/design/corner_top_left_green.gif"); z-index: 0;width:100%; }
.block_green .top_right { top: 0px; right: -4px; background-image: url("../images/design/corner_top_right_green.gif"); z-index: 1; }
.block_green .bottom_left { bottom: -2px; left: -2px; background-image: url("../images/design/corner_bottom_left_green.gif"); z-index: 2;width:100% }
.block_green .bottom_right { bottom: 0px; right: -4px; background-image: url("../images/design/corner_bottom_right_green.gif"); z-index: 3; }

/***
MESSAGE
***/
.info, .success, .warning, .error, .invalid 
{
	/*border: 1px solid;
	padding:15px 10px 15px 50px;*/
		margin:0 0 10px 0px;
		padding: 5px 0px;
	background-repeat: no-repeat;
	background-position: 10px center;
	font-family:sans-serif;
	font-size:11px;
	clear:both;
}
ul>li>ul>li{background-image:url()!important;margin:0!important;padding:0!important;clear:both;}
.info h3, .success h3, .warning h3, .error h3, .invalid  h3
{
	margin:0 0 5px 60px;
	padding:0;
}
.info ul, .success ul, .warning ul, .error ul, .invalid  ul
{
	margin:0 0 0 60px;
	padding:0;
	list-style-type: none;
}
.info li, .success li, .warning li, .error li, .invalid  li
{
	padding:0 0 0 10px;
	margin:0;
	clear:both;
	background: transparent url('../images/design/c_blue.gif') 0 0 no-repeat;
}
.success li
{
	background: transparent url('../images/design/c_green.gif') 0 0 no-repeat;
}
.warning li
{
	background: transparent url('../images/design/c_yellow.gif') 0 0 no-repeat;
}
.error li
{
	background: transparent url('../images/design/c_red.gif') 0 0 no-repeat;
}
.invalid  li
{
	background: transparent url('../images/design/c_purple.gif') 0 0 no-repeat;
}
.info 
{
	color: #05A;
	background-color: #CEF;
	background-image: url('../images/design/info.png');
}
.success 
{
	color: #591;
	background-color: #EFC;
	background-image:url('../images/design/success.png');
}
.warning 
{
	color: #A60;
	background-color: #FFB;
	background-image: url('../images/design/warning.png');
}
.error 
{
	color: #D01;
	background-color: #FCC;
	background-image: url('../images/design/error.png');
}
.invalid 
{
    color: #84A;
    background-color: #DAD;
    background-image: url('../images/design/invalid.png');
}

/***
MENU 
***/
.menu{background:#fff url("../images/design/menuh.jpg") 0 0 repeat-x;width:900px;height:36px!important;margin:0;padding:0 10px;border-top:1px solid #111;}
.menu ul li a
{
    display:block;
    float:left;
    background:transparent url("../images/design/menu.jpg") 0 0 no-repeat;
    height:26px;
    width:117px;
    padding:10px 0 0 0;
    text-align:center;    
    font-weight:700;
}
.menu ul li:hover,.menu ul li:hover a,.menu ul li a.selected{background-position:0 -36px;background-position:0 -36px;color:#fff!important;text-decoration:none;}
.menu ul li a:hover{background-position:0 -36px;color:#fff!important;text-decoration:none;}
.submenu{position:relative;clear:both;margin:0 0 10px 0;}
.submenu ul
{
	left:0;
	position:absolute;
    margin:0;
    padding:0px 10px;
    background:transparent url("../images/design/submenu.jpg") 0 0 repeat-x;
    height:25px;
}
.submenu ul a
{
    color:#fff;
    padding:5px 10px;
    width:auto;
    display:block;
    text-align:center;
	height:15px;
}
.submenu ul a.selected
{
	font-weight:700;
}
.submenu ul a.selected,.submenu ul li a:hover
{
    background:transparent url("../images/design/submenu.jpg") 0 -11px repeat-x;
    text-decoration:none;
    color:#eee!important;
}
/***
HTML TAG
***/
img{border:0;}
h2{text-align:left;font-size:16px;line-height:30px;font-family:Arial,Sans-Serif;margin:0;font-weight:700;padding:0 0 0 20px;color:#555;background:#fef url('../images/design/h2_bg.gif') 0 0 repeat-x;height:30px;}
h2 strong{font-size:18px;}
a,a:link,a:visited{color:#c32;text-decoration:none;}
a:hover{text-decoration:underline;color:#79a;}
code{background-color:#eee;border:1px solid #777}
hr
{
    background-color:#224;
    height:2px;
    border:0;
    width:100%;
    clear:both;
}
ul.left li{float:left;}
.ulnone{list-style-type:none;}
/*
** keep the whitespace in front of the ^=, hides rule from konqueror
** this is css3, the validator doesn't like it when validating as css2
*/
#main a.external,
#main a[href ^="http://"],
#main a[href ^="gopher://"] {
	background: url(../images/link/external.png) center right no-repeat;
	padding-right: 13px;
}
#main a[href ^="http://www.mapping-area.com/"] {
	background: url() 0 0 no-repeat;
	padding-right: 0px;
}
#main a[href ^="https://"],
.link-https {
	background: url(../images/link/lock_icon.gif) center right no-repeat;
	padding-right: 16px;
}
#main a[href ^="mailto:"],
.link-mailto {
	background: url(../images//link/mail_icon.gif) center right no-repeat;
	padding-right: 18px;
}
#main a[href ^="news://"] {
	background: url(../images/link/news_icon.png) center right no-repeat;
	padding-right: 18px;
}
#main a[href ^="ftp://"],
.link-ftp {
	background: url(../images/link/file_icon.gif) center right no-repeat;
	padding-right: 18px;
}
#main a[href ^="irc://"],
#main a.extiw[href ^="irc://"],
.link-irc {
	background: url(../images/link/discussionitem_icon.gif) center right no-repeat;
	padding-right: 18px;
}
#main a.external[href $=".ogg"], #main a.external[href $=".OGG"],
#main a.external[href $=".mid"], #main a.external[href $=".MID"],
#main a.external[href $=".midi"], #main a.external[href $=".MIDI"],
#main a.external[href $=".mp3"], #main a.external[href $=".MP3"],
#main a.external[href $=".wav"], #main a.external[href $=".WAV"],
#main a.external[href $=".wma"], #main a.external[href $=".WMA"],
.link-audio {
	background: url(../images/link/audio.png) center right no-repeat;
	padding-right: 13px;
}
#main a.external[href $=".ogm"], #main a.external[href $=".OGM"],
#main a.external[href $=".avi"], #main a.external[href $=".AVI"],
#main a.external[href $=".mpeg"], #main a.external[href $=".MPEG"],
#main a.external[href $=".mpg"], #main a.external[href $=".MPG"],
.link-video {
	background: url(../images/link/video.png) center right no-repeat;
	padding-right: 13px;
}
#main a.external[href $=".pdf"], #main a.external[href $=".PDF"],
#main a.external[href *=".pdf#"], #main a.external[href *=".PDF#"],
#main a.external[href *=".pdf?"], #main a.external[href *=".PDF?"],
.link-document {
	background: url(../images/link/document.png) center right no-repeat;
	padding-right: 12px;
}

#main a.external {
	color: #36b;
}
/* this can be used in the content area to switch off
special external link styling */
#main .plainlinks a {
	background: none !important;
	padding: 0 !important;
}
/*** PAGINATION ***/
.pagination{width:100%;margin:0 auto;padding:0px;color:#fff;text-align:center;}
.pagination_in,.pagination_a,.pagination_prec,.pagination_suiv,.pagination_extend
{
    width:20px;
    height:20px;
    padding:3px 0 0 0;
    border:1px solid #333;
	background: #000 url(../images/pagination_bg.jpg) 0 0 repeat-x!important;
	font-weight:700;
}
.pagination_a a,.pagination_extend a{width:100%;height:20px;display:block;line-height:20px;}
.pagination_in{width:auto;color:#ccc;}

.pagination_prec{width:100px;border-left:2px solid #333;}
.pagination_suiv{width:100px;border-right:2px solid #333;}
.pagination_prec a{width:100px;display:block;height:15px;color:#ccc;background: transparent url(../images/prev.gif) left -1px  no-repeat!important;}
.pagination_suiv a{width:100px;display:block;height:15px;color:#ccc;background: transparent url(../images/next.gif) right -1px  no-repeat!important;;}

.pagination_prec a:hover,.pagination_suiv a:hover{text-decoration:underline;color:#ccc;}
.pagination_in:hover,.pagination_a a:hover,.pagination_prec:hover,.pagination_suiv:hover,.pagination_extend:hover{color:#ccc;}