/*******************************************************************************
* Balises
/******************************************************************************/

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    text-align: center;
}

strong {
    font-weight: bold;
}
em {
    font-style: italic;
}

a {
    color: #7c8f9e;
    text-decoration: none;
}
a:hover,
a:focus {
    color: #ff942b;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-weight: bold;
    margin: 1em;
}
h1 {
    font-size: 1.3em;
}
h2 {
    font-size: 1.2em;
    margin-left: 2em;
}
h3 {
    font-size: 1.15em;
    margin-left: 3em;
}
h4 {
    font-size: 1.1em;
    margin-left: 4em;
}
h5 {
    font-size: 1.05em;
    margin-left: 5em;
}
h6 {
    font-size: 1em;
    font-style: italic;
    margin-left: 6em;
}

/*******************************************************************************
* Formulaires
/******************************************************************************/

form {
    background-color: #eaedf5;
    border: 2px solid #6d88dd;
	margin: 0.5em auto;
	color: #012885;
}
    form fieldset {
        border: 1px solid #6d88dd;
        margin: 0.3em;
        padding: 0.2em;
    }
        form fieldset legend {
            margin-left: 1em;
            font-weight: bold;
        }
	form div.field {
		margin: 0.3em 0;
		padding: 0 0.5em;
		text-align: center;
	}
		form div.field label {
			display: block;
			float: left;
			width: 30%;
			text-align: left;
			font-size: 0.85em;
		}
		form div.field input,
		form div.field select,
		form div.field textarea {
			margin: auto;
			width: 50%;
			padding-left: 0.5em;
			padding-right: 0.5em;
		}
		form div.field textarea {
			height: 10em;
		}
	form div.field.submit {
		text-align: center;
		margin-top: 0.5em;
	}
		form div.field.submit input {
			width: 70%;
		}
    form div.field.fieldBoxTiers {
        margin: 0;
        padding: 0;
    }
    form div.field.fieldBoxTiers.left,
    form div.field.fieldBoxTiers.right {
        float: left;
        width: 44%;
    }
    form div.field.fieldBoxTiers.center {
        width: 9%;
        float: left;
        text-align: center;
    }
        form div.field.fieldBoxTiers.center input {
            margin: 0;
            padding: 0;
        }
        form div.field.fieldBoxTiers label {
            float: none;
            display: block;
            width: 100%;
        }
        form div.field.fieldBoxTiers .buttons {
            text-align: right;
            margin-right: 1em;
            padding-top: 4em;
        }
        form div.field.fieldBoxTiers select.multiple {
            width: 95%;
            height: 10em;
            margin: 0 auto;
        }

/*******************************************************************************
* Classes
/******************************************************************************/

.success,
.error,
.info {
	text-align: center;
	margin: 0.3em;
	padding: 0.3em;
	font-weight: bold;
}
.success {
	background: #afa;
	color: #151;
	border: 2px solid #040;
}
.error {
	background: #faa;
	color: #900;
	border: 2px solid #800;
}
.info {
	background: #9cf;
	color: #00a;
	border: 2px solid #009;
}
.info.big,
.success.big,
.error.big {
    padding: 2em 1em;
}
.important {
	font-weight: bold;
}

.center {
    text-align: center;
}
    .center img {
        margin-left: auto;
        margin-right: auto;
    }


/*******************************************************************************
* Design
/******************************************************************************/

#page {
    width: 948px;
    border: 1px solid #cad1d7;
    margin: 22px auto;
    text-align: left;
    background-color: #ffffff;
}
    .pageSpacer {
        clear: both;
        background: #ffffff url('../Images/Design/separator.png') no-repeat center bottom;
        min-height: 9px;
        height: auto !important;
        height: 9px;
    }
    #pageHeader {
        background: transparent url('../Images/Design/head_n_foot_back.png') no-repeat center top;
    }
        #pageHeaderBottomSpacer {
            background: transparent url('../Images/Design/separator.png') no-repeat center bottom;
            overflow: auto;
            min-height: 80px;
            height: auto !important;
            height: 80px;
        }
        #pageHeader #btnLogoff {
            float: right;
            background: transparent url('../Images/Design/button_logoff.png') no-repeat center right;
            padding-right: 20px;
            margin: 10px;
        }
        #pageHeader #logo {
            float: left;
            margin: 11px 20px;
        }
        #pageHeader h1 {
            color: #ff9a42;
            font-size: 1em;
            margin: 0;
            margin-top: 25px;
            padding: 0;
        }
        #pageHeader h2 {
            color: #000000;
            font-size: 1em;
            margin: 0;
            padding: 0;
        }
    #pageContent {
        clear: both;
        background: transparent url('../Images/Design/separator.png') no-repeat center bottom;
        padding-bottom: 35px;
    }
        #login_form {
            padding: 75px 0;
            text-align: center;
        }
            #login_form h1,
            #login_form div,
            #login_form form {
                margin-left: auto;
                margin-right: auto;
                width: 20em;
            }
        
        #block {
            float: left;
            width: 25%;
        	margin: 0;
        	margin-left: 5px;
        	padding: 1px;
        	padding-top: 20px;
        }
            #block h2 {
                margin: 0;
                padding: 0;
                margin-bottom: 5px;
                font-size: 0.9em;
            }
            #block h2 span {
                color: #ff942b;
                font-size: 0.9em;
            }
            #block #dirsList {
                margin: 0;
                padding: 0;
                color: #728593;
                list-style: none;
            }
                #block #dirsList li {
                    margin: 3px 0;
                }
                    #block #dirsList li a.active {
                        font-weight: bold;
                    }
                #block #dirsList ul {
                    margin-left: 10px;
                    list-style: none;
                    display: none;
                }
                #block #dirsList .expander {
                    margin: 2px;
                }
                #block #dirsList .icon {
                    margin: 0 2px;
                }
        #options {
            margin: 0;
            margin-top: 10px;
            margin-left: 25%;
            min-height: 80px;
            height: auto !important;
            height: 80px;
        }
            #adminOptions {
                float: right;
            }
                #adminOptions a {
                    color: #ff942b;
                }
            #options li {
                float: left;
                width: 85px;
                text-align: center;
                font-size: 0.9em;
                font-weight: bold;
                margin: 0 5px;
            }
            #options a {
                padding-top: 32px;
                text-align: center;
            }
                #options a span {
                	font-size: 0px;
                	display: block;
                	height: 30px;
                	width: 33px;
                	margin: auto;
                	background-repeat: no-repeat;
                	background-position: 0px 0px;
                }
                #options a:hover span,
                #options a:focus span {
                    background-position: -33px 0px;
                }
            #btnShare span {
            	background-image: url('../Images/Design/button_share.png');
            }
            #btnLog span {
            	background-image: url('../Images/Design/button_log.png');
            }
            #btnTrash span {
            	background-image: url('../Images/Design/button_trash.png');
            }
            #btnUpload span {
            	background-image: url('../Images/Design/button_upload.png');
            }
            #btnDlSel span {
            	background-image: url('../Images/Design/button_download.png');
            }
            #btnMkDir span,
            #btnFiles span {
            	background-image: url('../Images/Design/button_newdir.png');
            }
            #btnDel span,
            #btnEmpty span,
            #btnDelTrash span {
            	background-image: url('../Images/Design/button_delete.png');
            }
            #btnRestAll span,
            #btnRest span {
            	background-image: url('../Images/Design/button_restore.png');
            }
    
    #pageFooter {
        clear: both;
        background: transparent url('../Images/Design/head_n_foot_back.png') no-repeat center top;
        overflow: auto;
        min-height: 80px;
        height: auto !important;
        height: 80px;
        font-size: 0.8em;
    }
        #pageFooter ul {
            float: right;
        }
        #pageFooter div {
            margin: 20px 10px 20px 20px;
        }
        #pageFooter p {
            padding-left: 15px;
        }
        #pageFooter #footerQuestion {
            color: #ff9836;
            background: transparent url('../Images/Design/icon_arrow.png') no-repeat center left;
            font-weight: bold;
        }

    
#content {
    background-color: #f6f5ee;
    border: 1px solid #9a9890;
    border-right: none;
    margin-left: 26%;
    margin-top: 10px;
    padding: 1em;
    min-height: 10em;
    height: auto !important;
    height: 10em;
}
    #content ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
        #content li {
        }

    #content #selBtns {
        font-size: 0.85em;
        margin: 0;
        padding: 0;
        margin-bottom: 10px;
        text-align: right;
    }
        #content #selBtns a {
            color: #ff9836;
        }
    #content #filesList {
        overflow: auto;
    }
        #content #filesList li.file {
            border: 1px solid #9a9890;
            width: 110px;
            min-height: 110px;
            height: auto !important;
            height: 110px;
            border: 1px solid #f6f5ee;
            margin: 2px;
            padding: 3px;
            float: left;
            text-align: center;
            cursor: pointer;
        }
        #content #filesList li.file.selected {
            background-color: #eaedf5;
            border: 1px dashed #6d88dd;
        }
        #content #filesList li.file.hover,
        #content #filesList li.file.selected.hover {
            background-color: #e6e5de;
            border: 1px solid #6a6860;
        }
            #content #filesList li.file div {
                margin: 0.3em 0;
            }
            #content #filesList li.file div.fileName {
                font-size: 0.75em;
            } 

    #content #logsList {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #4d68bd;
    }
        #content #logsList thead tr {
        }
            #content #logsList thead tr th {
                background-color: #6d88dd;
                color: #ffffff;
                font-weight: bold;
                text-transform: smallcaps;
                text-align: center;
            }
        #content #logsList tbody tr.top {
        }
            #content #logsList tr.top .date,
            #content #logsList tr.top .user {
                width: 200px;
                border-top: 1px solid #4d68bd;
            }
        #content #logsList tbody tr.bottom {
        }
            #content #logsList tr.bottom td {
                padding: 0.5em;
                border-bottom: 1px solid #4d68bd;
            }
    #content #pagesList {
        text-align: right;
        overflow: hidden;
        margin: 10px 0;
    }
        #content #pagesList p {
            float: left;
            margin: 3px;
        }
        #content #pagesList ul {
            list-style: none;
        }
            #content #pagesList ul li {
                float: left;
                margin: 3px;
            }

#ajaxMask {
    display: none;
    min-width: 100%;
    width: 100%;
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000000;
    opacity: .60;
    filter: alpha(opacity=60);
    -moz-opacity: .60;
    position: fixed !important;
    position: absolute;
    left: 0;
    top: 0;
}
#ajaxContent {
    background: #ffffff;
    margin: 0 auto;
    padding: 0.5em;
}
    #ajaxContent h2 {
        margin: 0;
        margin-bottom: 1em;
        padding: 0;
        text-align: center;
    }
    #ajaxContent .options {
        font-size: 0.8em;
        text-align: right;
        margin: 0;
        padding: 0;
    }
    
    #ajaxContent .comment {
        border: 1px solid #6d88dd;
        padding: 0.5em;
        margin: 0.5em;
    }
        #ajaxContent .comment .content {
            text-align: justify;
            margin-bottom: 1em;
        }
        #ajaxContent .comment .details {
            font-size: 0.9em;
            text-align: right;
        }

#infos {
    display: none;
    position: absolute;
    padding: 0.3em;
    background-color: #dddddd;
    border: 1px solid #ff9a32;
    text-align: left;
    width: 250px;
}
    #infos #waiting {
        padding: 40px;
        background: #dddddd url('../Images/Design/ajax_waiting.gif') no-repeat center center;
    }
    #infos .lastComments {
        list-style: circle inside;
    }

#systemData {
    clear: both;
    visibility: hidden;
    padding: 10em 0;
}

/*******************************************************************************
* Hacks
/******************************************************************************/

* html img,
* html .png{
    position:relative;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "Ressources/Images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
        this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
    );
}

a {
    outline: none;
}
:focus {
    -moz-outline-style: none;
}

/*******************************************************************************
* SWFUpload
/******************************************************************************/

.progressWrapper {
	width: 307px;
	overflow: hidden;
	margin: 5px;
	float: left;
}
.progressContainer {
	margin: 5px;
	padding: 4px;
	
	border: solid 1px #E8E8E8;
	background-color: #F7F7F7;
	
	overflow: hidden;
}
.red { /* Error */
	border: solid 1px #B50000;
	background-color: #FFEBEB;
}
.green {/* Current */ 
	border: solid 1px #DDF0DD;
	background-color: #EBFFEB;
}
.blue { /* Complete */
	border: solid 1px #CEE2F2;
	background-color: #F0F5FF;
}

.progressName {
	font-size: 8pt;
	font-weight: bold;
	color: #555555;
	
	width: 273px;
	height: 14px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
}
.progressBarInProgress,
.progressBarComplete,
.progressBarError {
	font-size: 0px;
	width: 0%;
	height: 2px;
	background-color: blue;
	margin-top: 2px;
}
.progressBarComplete {
	width: 100%;
	background-color: green;
	visibility: hidden;
}
.progressBarError {
	width: 100%;
	background-color: red;
	visibility: hidden;
}
.progressBarStatus {
	margin-top: 2px;
	width: 287px;
	font-size: 7pt;
	font-family: Verdana;
	text-align: left;
	white-space: nowrap;
}
a.progressCancel,
a.progressCancel:link,
a.progressCancel:active,
a.progressCancel:visited,
a.progressCancel:hover {
	font-size: 0px;
	display: block;
	height: 14px;
	width: 14px;
	
	background-image: url('../Images/cancelbutton.png');
	background-repeat: no-repeat;
	background-position: -14px 0px;
	float: right;
}
a.progressCancel:hover {
	background-position: 0px 0px;
}

#divSWFUploadUI {
    text-align: center;
}
    #divSWFUploadUI object {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 500;
        width: 100%;
        height: 100%;
    }
    #divSWFUploadUI input {
        margin: auto;
        width: 75%;
        height: 25em;
        z-index: 1;
    }