@import "reset.css";

html {
    overflow:-moz-scrollbars-vertical;
}
body{
    background:#eee;
    color:#333;
    font-family:Helvetica, Arial,sans-serif;
    font-size:12px;
    line-height:16px;
    text-shadow:0 1px 0 #fff;
}
code {background:none repeat scroll 0 0 #666666;color:#E8E8E8;padding:3px;text-shadow:0 1px 4px #333333;}
.quatrecentquatre {background:url('../images/404.png') top left no-repeat;height:577px;}
/* Modal Box CSS */
.modal {width:370px;position:fixed; padding: 20px;margin:100px 250px;-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);background:#f7f7f7;background:-moz-linear-gradient(90deg, #ccc, #fff); /* Firefox */background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); /* Webkit */border:1px solid #aaa;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);z-index:100;}
.modal-overlay {width:100%;height:100%;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;background:#000;position:absolute;top:0; left:0;z-index:1;display:block;}
#content:target .modal {display:none;}
#content:target .modal-overlay {display:none;}

/* Start */
#content {margin:0 auto;width:900px;}
#header {height:50px;background:#f7f7f7;background:-moz-linear-gradient(90deg, #eee, #CCC); /* Firefox */background:-webkit-gradient(linear, left top, left bottom, from(#CCC), to(#eee));}
#header_menu {margin:0 auto;width:900px;}
#menu {color:#E8E8E8;}
#menu li {
    -moz-box-shadow:0 0 5px #aaa;-webkit-box-shadow:0 0 5px #aaa;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;margin-right:10px;
    float:right;padding:5px 10px 8px;}


div.cat {-webkit-border-top-left-radius:4px;
                   -webkit-border-top-right-radius:4px;
                   -moz-border-radius-topleft:4px;
                   -moz-border-radius-topright:4px;
                   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
                   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);}
div.cat h2 {
-webkit-border-top-left-radius:4px;
                   -webkit-border-top-right-radius:4px;
                   -moz-border-radius-topleft:4px;
                   -moz-border-radius-topright:4px;
color:#F2F2F2;
font-size:30px;
margin:0;
padding:10px 15px;
text-shadow:0 1px 4px #333333;
}
div.three-col {
    background:-moz-linear-gradient(90deg, #F2F2F2, #FFF);
    background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#F2F2F2));
    padding:10px;-webkit-column-count: 3;-webkit-column-gap:20px;-webkit-column-rule:1px solid #DDD;-moz-column-count: 3;-moz-column-gap: 20px;-moz-column-rule: 1px solid #DDD;}
div.three-col a {color:#555;display:block;padding:5px;margin:1px;font-size:14px;letter-spacing:0px;text-decoration:none;font-weight:bold;}
div.three-col a:hover {background:#E8E8E8;color:#222;}

.boxy {background:#f7f7f7;background:-moz-linear-gradient(90deg, #ccc, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));border:1px solid #aaa;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 15px #aaa;-webkit-box-shadow:0 0 15px #aaa;margin:0px auto 0;padding:20px;}
.boxy h3{border-bottom:1px solid #ccc;font-size:14px;font-weight:bold;letter-spacing:2px;margin-bottom:20px;text-transform:uppercase;}
.boxy h4{font-size:13px;letter-spacing:1px;margin-bottom:5px;}
.boxy p{margin-bottom:15px;}
.boxy p:last-child{margin-bottlom:0;}
.boxy .instruc p {padding-left:15px;}

/* #new_cat */
#new_cat, #new_link {background:-moz-linear-gradient(90deg, #ccc, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));border:1px solid #aaa;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-box-shadow:0 0 15px #aaa;-webkit-box-shadow:0 0 15px #aaa;}
#new_cat {float:left;width:45%;padding:10px;}
#new_link {float:right;width:45%;padding:10px;}
/* #links */
#settings #settings_menu ul {margin:-20px 0px;}
#settings #settings_menu li {
    -moz-box-shadow:0 0 5px #aaa;-webkit-box-shadow:0 0 5px #aaa;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;margin-right:10px;
    float:left;padding:5px 10px 8px;}
#links  .addlink {text-align:center;margin:0 auto;}
#links .managecat form {display:none;}
#links a.showlink {color:#666;font-weight:bold;border:1px solid #CCC;;display:block;padding:7px 15px;text-decoration:none;background:-moz-linear-gradient(90deg, #E8E8E8, #FFFFFF);background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E8E8E8)); }
#links a.showlink:first-child {border-top:1px solid #CCC;}
#links .managelink {padding:0px;margin:0px;}
#links .managelink input[type=text], .managecat .rename_cat input[type=text]  {width:310px;margin-right:10px;}
#links .managelink a.submit, .managecat .rename_link {margin-left:5px;margin-right:5px;}
#links .req {background:#FFF;padding:10px 22px;border:1px solid #CCC;}
#links .managecat {-webkit-border-top-left-radius:4px;
                   -webkit-border-top-right-radius:4px;
                   -moz-border-radius-topleft:4px;
                   -moz-border-radius-topright:4px;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);}
#links .managecat h4 {margin:0px;padding:7px 10px;color:#F2F2F2;font-size:15px;
                      -webkit-border-top-left-radius:4px;
                      -webkit-border-top-right-radius:4px;
                      -moz-border-radius-topleft:4px;
                      -moz-border-radius-topright:4px;text-shadow:0 1px 4px #333333;}
#links .managecat h4 .DelLink {color:#AAA;text-decoration: none;}
#links .managecat h4 .RenLink {color:#E8E8E8;text-decoration: none;}
a.submit.red, a.submit.red:active, a.submit.red:focus{text-shadow:0 1px 1px #888;color:#F8F8F8;border-color:#400101;margin-left:0px;background:-moz-linear-gradient(90deg, #A60303, #D60303);background:-webkit-gradient(linear, left top, left bottom, from(#D60303), to(#A60303));}
a.submit.red:hover {background:-moz-linear-gradient(90deg, #b41717, #D60303);background:-webkit-gradient(linear, left top, left bottom, from(#D60303), to(#b41717));}

#pref_settings #color_settings a {padding:8px 4px;width:120px;text-decoration: none;float:left;display: block;color:#E8E8E8;margin-right:10px;text-shadow:0 1px 4px #333333;font-weight: bold;text-align: center;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -moz-box-shadow:0 0 5px #aaa;
    -webkit-box-shadow:0 0 5px #aaa;}
#pref_settings #color_settings a.default {background:-moz-linear-gradient(90deg, #666666, #888888) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#666666));}
#pref_settings #color_settings a.green {background:-moz-linear-gradient(90deg, #4b7933, #7cb757) repeat scroll 0 0 transparent;
				background:-webkit-gradient(linear, left top, left bottom, from(#7cb757), to(#4b7933));}
#pref_settings #color_settings a.blue {background:-moz-linear-gradient(90deg, #023E73, #4B93BF) repeat scroll 0 0 transparent;
				background:-webkit-gradient(linear, left top, left bottom, from(#4B93BF), to(#023E73));}
#pref_settings #color_settings a.purple {background:-moz-linear-gradient(90deg, #73276E, #D8A0D9) repeat scroll 0 0 transparent;
				background:-webkit-gradient(linear, left top, left bottom, from(#D8A0D9), to(#73276E));}
/* login / signup */
#login {
    background:#f7f7f7;
    background:-moz-linear-gradient(90deg, #ccc, #fff);
    background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    border:1px solid #aaa;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -moz-box-shadow:0 0 15px #aaa;
    -webkit-box-shadow:0 0 15px #aaa;
    margin:40px auto 0;
    padding:20px;
    width:300px;
}
#login h3{
    border-bottom:1px solid #ccc;
    font-size:14px;
    font-weight:bold;
    letter-spacing:2px;
    margin-bottom:20px;
    text-transform:uppercase;
}
#login p{
    margin-bottom:15px;
}
#login p:last-child{ /* Sélecteur avancé pour sélectionner le dernier paragraphe du formulaire */
                     margin-bottom:0;
}
label{
    cursor:pointer;
    display:block;
    float:left;
    font-size:13px;
    font-weight:bold;
    line-height:28px;
    margin-bottom:5px;
    color:#555;
    width:120px;
}
form p:hover label{color:#111;}
form p:hover label:after{content:' »';}
form p:hover label.error:after{content:'';}

input[type=text],
input[type=password], select{
    background: rgba(255, 255, 255, 0.9);
    background:-moz-linear-gradient(90deg, #fff, #eee); /* Firefox */
    background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff), color-stop(0.2, #fff)); /* Webkit */
    border:1px solid #aaa;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -moz-box-shadow:0 0 3px #aaa;
    -webkit-box-shadow:0 0 3px #aaa;
    padding:5px;
    color:#666;
}
input[type=text]:focus,
input[type=password]:focus, select:focus{
    border-color:#000;
    color:#111;
    -moz-box-shadow:0 0 3px #222;
    -webkit-box-shadow:0 0 3px #222;
    outline:none; /* Pour enlever le contour jaune lorsque l'on sélectionne un input dans Chrome */
}
select{
    cursor:pointer;
    padding:3px;
    -moz-box-shadow:0 0 3px #aaa;
    -webkit-box-shadow:0 0 3px #aaa;
}
select:active,
select:focus{
    border:1px solid #888;
    -moz-box-shadow:0 0 3px #222;
    -webkit-box-shadow:0 0 3px #222;
    outline:none;
    color:#111;
}
input[type=submit],
a.submit{
    background:-moz-linear-gradient(90deg, #BBB, #EEE);
    background:-webkit-gradient(linear, left top, left bottom, from(#EEE), to(#BBB));
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #555;
    -moz-box-shadow:0 0 3px #666;
    -webkit-box-shadow:0 0 3px #666;
    color:#444;
    cursor:pointer;
    font-family:Arial,sans-serif;
    font-size:12px;
    font-weight:bold;
    padding:5px 10px;
    text-decoration:none;
    text-shadow:0 1px 1px #FFF;
    text-transform:uppercase;
}
input[type=submit] {margin-left:120px;}
input[type=submit]:hover,
a.submit:hover{
    background:-moz-linear-gradient(90deg, #CCC, #EEE);
    background:-webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC));
    text-decoration:none;
    border-color:#333;
}
input[type=submit]:active,
input[type=submit]:focus,
a.submit:active,
a.submit:focus{
    background:-moz-linear-gradient(90deg, #AAA, #EEE);
    background:-webkit-gradient(linear, left top, left bottom, from(#EEE), to(#BBB));
    border-color:#222;
    outline:none;
}
#login form {display:none;}
#login #start {display:block;}
#login:target #start {display:none;}
#login:target #register {display:block;}

/* Footer */
#credits{font-size:9px;margin-top:20px;text-align:center;}
#credits span {font-size:14px;letter-spacing:2px;}


/* Generic */
a {color:#333;text-decoration:underline;}
h1.logo {margin:60px auto 0;padding-left:15px;color:#444;text-align:center;font-size:50px;font-weight:bold;text-shadow:1px 2px 5px #CCC;text-decoration:none;}
h1.logo .grey {color:#BBB;font-style:normal;text-shadow:1px 2px 2px #777;}
h1.logo span.beta {font-size:10px;letter-spacing:1px;padding-left:5px;vertical-align:top;line-height:1px;color:#444;text-shadow:1px 2px 5px #CCC;}
.small_info {color:#888;font-size:10px;}

.clear {clear:both;}
.spacer {height:1em;}
.prettyLoader {background: url(../images/prettyLoader.png) top left no-repeat;height: 30px;position: absolute;width: 30px;z-index: 30000;}
.prettyLoader img {display: block;margin: 7px 0 0 7px;}


.valid{background: rgba(255, 255, 255, 0.9);background:-moz-linear-gradient(90deg, #fff, #eee); /* Firefox */background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff), color-stop(0.2, #fff)); /* Webkit */border:1px solid #aaa;-moz-border-radius:3px;-webkit-border-radius:3px;-moz-box-shadow:0 0 3px #aaa;-webkit-box-shadow:0 0 3px #aaa;padding:3px;color:#666;}
div.error {background:rgba(166, 3, 3, 0.1);border:2px solid #A60303;color:#400101;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 10px;margin-bottom:20px;}
div.error p {margin:0px;}
label.error {color:#A60303;font-size:10px;line-height:normal;width:100%;margin:0px 0 5px 120px;}
label.error:hover {color:#A60303;}
form p:hover label.error{color:#A60303;}
input.error {border-color:#A60303;margin:0px;}
input.valid, select.valid {margin:0px;}

#menu li,
#settings #settings_menu li,
#links .managecat h4,
div.cat h2 {
background:-moz-linear-gradient(90deg, #666666, #888888) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#666666));}

#menu a,
#settings #settings_menu li a {
text-decoration:none;text-shadow:0 1px 4px #333333;color:#E8E8E8;font-weight: bold;}

#menu a:hover,
#settings #settings_menu li a:hover {
color:#FFF;}

#menu li:hover,
#settings #settings_menu li:hover {
background:-moz-linear-gradient(90deg, #555, #888);background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#555));}