ADD possibilité d'afficher une bulle d'aide sur un coté determiné d'une boite
[euphorik.git] / css / 1 / euphorik.css
index fa7be6e..25b51cf 100755 (executable)
-@import url(../common.css);\r
-@import url(pageMinichat.css);\r
+/* coding: utf-8 */
+
+@import url(pageMinichat.css);
+@import url(pageAdmin.css);
 @import url(pageProfileRegister.css);
 @import url(pageAbout.css);
-\r
-\r
-* {\r
-       padding: 0;\r
-       margin: 0;\r
-}\r
-\r
-body {\r
-   font-family: sans-serif;\r
-   font-size: 12px;
-   color: #EEEEEE;\r
-   text-align: center; /* uniquement pour IE */\r
-   background-color: #DFDFDF;\r
-   background-image: url(../../img/css1/fond.png)\r
-}\r
-\r
+
+* {
+       padding: 0px;
+       margin: 0px;
+}
+
+body {
+       font-family: sans-serif;
+       font-size: 12px;
+       color: #841919;
+       background-color: #f6dfc2;
+}
+
 #container {
-   position: relative;\r
-   height: auto;\r
-   margin-left: 10px;\r
-   margin-right: 10px;\r
-   margin-top: 40px;\r
+       height: auto;
+       margin: 0px;
 }
 
-#menu {
-       position: absolute;
-       z-index: 10;
-       top: 2px;
-       left: 300px;
+/***** Menu *****/
+ul#menu {
+       background-image: url(../../img/css1/logo_fond.png);
+       height:129px;
+       width: 100%;
        font-size: 11px;
-       background-color: #000000;
-       text-align: left;
+       list-style-type:none;
+}
+#menu li:first-child {
+       margin-left: 340px;
 }
-#menu div {    
+#menu li {
+       margin-top: 47px;
+       font-size: 14px;
+       text-align: center;
        cursor: pointer;        
-       display: inline;
-       padding: 2px;
-       margin-left: 2px;
-       background-color: #4f5519;
+       height:30px;
+       z-index: 20;
+       float: left;
+       min-width: 60px;
+       background-color: #f6dfc2;
+       line-height: 32px;
 }
-#menu div.courante {   
-       background-color: #818c27;
+#menu li.courante {    
+       background-color: #ffffff;
+       background-image: url(../../img/css1/triangle.png);
+       background-repeat: no-repeat;
+       background-position: center bottom
 }
-#menu div:hover {      
-       background-color: #818c27
+#menu li:hover {       
+       background-color: #ffffff;
 }
 
+/***** Le menu pour le choix de la CSS *****/
 #menuCss {
        position: absolute;
        z-index: 10;
-       left: 600px;    
+       left: 550px;    
        top:0px;
-       border: 1px;
-       background-color: #164200; 
-       border: #2d8800 1px solid;
-       color: #EEEEEE;
        font-size: 9px;
 }
 
+/***** Le style du contenu des pages *****/
 #page {
-   position: relative;
-   padding: 25px 0px 15px 0px;
-   font-size: 12px;
-   background-color: #000000;
+       font-size: 12px;
+       background-color: #f6dfc2;
+       padding: 10px 10px 15px 10px;
+}
+#page > h1 {
+       margin-top: 10px;
+       margin-left: 0px;
+       font-size: 18px;
+}
+#page > h2 {
+       margin-top: 10px;
+       margin-left: 10px;
+       font-size: 16px;
+}
+#page > h3 {
+       margin-top: 10px;
+       margin-left: 20px;
+       font-size: 14px;
+       background-color : #FFFFFF
+}
+#page > h4 {
+       margin-top: 10px;
+       margin-left: 25px;
+       font-size: 12px;
+}
+#page > p {
+       margin-top: 3px;
+       margin-left: 35px;
+}
+#page > ul {
+       margin-top: 3px;
+       margin-left: 45px;
 }
-
 #logo {
-   z-index: 10;
-   background-image: url(../../img/css1/logo_2.png);
-   width: 253px;
-   height: 37px;
-   position: absolute;
-   top: -20px;
-   left: -10px;
-}\r
+       z-index: 10;
+       background-image: url(../../img/css1/logo.png);
+       background-repeat: no-repeat;
+       width: 304px;
+       height: 129px;
+       position: absolute;
+}
+#logo.ekMaster {
+       background-image: url(../../img/css1/logo_ek_master.png);
+}
 
+/***** Le pied de page *****/
 #footer {
+       background-color: #e19671;
        text-align: right;
-}\r
-#footer a img{\r
-       border-style: none;\r
-}\r
-\r
-div#info {\r
-       width:100%;\r
-       position: fixed;\r
-       left: 0px;\r
-       top: 0px;\r
-       background-color: #000000;
-       border-bottom: 1px solid #aeaeae;\r
-       z-index: 20;\r
+       font-size: 9px;
+       padding: 2px
+}
+#footer a img{
+       border-style: none;
+       vertical-align: middle;
+       margin-right: 5px;
+}
+#footer span{
+       margin-right: 10px;
 }
 
-div#info .fermer {
+/***** La boite d'information (s'apparente à une MessageBox) *****/
+div#info {
+       text-align: center;
+       width:100%;
+       position: fixed;
+       left: 0px;
+       top: 0px;
+       background-color: #841919;
+       border-bottom: 1px solid #FFFFFF;
+       z-index: 20;
+       color: #f0df95
+}
+div#info div.fermer {
        float:right;
        cursor: pointer;
        height:16px;
        width: 16px;
        background-image: url(../../img/fermer.gif)
 }
-
 div#info #icone {
        float:left;     
        height:16px;
@@ -116,60 +159,98 @@ div#info #icone.information {
 }
 div#info #icone.exclamation {
        background-image: url(../../img/exclamation.gif)
-}
-       
+}      
 div#info .boutons {
        padding: 1px;
 }
-
 div#info .boutons div {
        cursor: pointer;
-       background-color: #770000;      
+       background-color: #c62929;      
        display: inline;
        padding: 0px 5px 0px 5px;
        margin: 0px 5px 0px 5px;
 }
 div#info .boutons div:hover {
-       background-color: #bc0000;      
-}
-\r
-.captcha {\r
-       display:none\r
-}\r
-\r
-/* Obsolète
-#captcha {
-       margin-bottom: 5px;
-}
-#captcha input {
-       margin-left: 5px;
-}
-#captcha .captchaImg {
-       background-color: #FFFFFF;
-       vertical-align: bottom;
-}*/
+       background-color: #e84747;      
+}
+
+/***** Les infos bulles *****/
+#flecheBulle {
+       position: absolute;
+       z-index: 50;
+       display: none
+}
+.flecheBulleHaut {
+       background-image: url(../../img/css1/fleche_bulle_haut.png);
+       width: 15px;
+       height: 8px;
+}
+.flecheBulleDroite {
+       background-image: url(../../img/css1/fleche_bulle_droite.png);
+       width: 8px;
+       height: 15px;
+}
+.flecheBulleBas {
+       background-image: url(../../img/css1/fleche_bulle_bas.png);
+       width: 15px;
+       height: 8px;
+}
+.flecheBulleGauche {
+       background-image: url(../../img/css1/fleche_bulle_gauche.png);
+       width: 8px;
+       height: 15px;
+}
+#messageBulle {
+       position: absolute;
+       z-index: 50;
+       color: #ffffff;
+       background-color: #841919;
+       display: none;
+       font-size: 10px;
+}
+#messageBulle p {
+       padding: 3px 6px;
+}
+
+/***** Le faux captcha *****/
+.captcha {
+       display:none;
+}
 
+/***** Les formulaires *****/
 form input,
-form button {
-       background-color: #164200; 
-       border: #2d8800 1px solid;
-       color: #EEEEEE;
+form button,
+form select {
+       background-color: #f0df95; 
+       border: #841919 1px solid;
+}
+form input:hover, form input:focus,
+form button:hover, form button:focus,
+form select:hover, form select:focus {
+       background-color: #ffffff;
+}
+form input,
+form select {
        font-size: 12px;
 }
-\r
-a {\r
-   text-decoration: none;\r
-}\r
-a:link {\r
-       color: #7664ff;\r
-}\r
-a:visited {\r
-   color: #7664ff;\r
-}\r
-a:hover {\r
-   color: #ffad0f;\r
-}\r
-a:active {\r
-   color: #ffad0f;\r
-}\r
-\r
+form button {
+       font-size: 11px;
+}
+form input[readonly] {
+       background-color: #d0c9aa
+}
+
+/***** Les liens *****/
+.lien, a {
+       text-decoration: underline;
+       color: #c62929;
+}
+.lien {
+       cursor: pointer
+}
+a:link, a:visited {
+       color: #c62929;
+}
+.lien:hover, .lien:active, a:hover, a:active {
+       color: #e84747;
+}