Belote/static/belote.css

412 lines
6.9 KiB
CSS

/* =========================
la Belote
========================= */
/****************/
/* Reset */
/****************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
/****************/
/* généralités */
/****************/
body {
margin: 0px;
background-color: #13995E;
}
div.clear {
clear: both;
}
div.clearfix-head::after {
content:"";
clear: both;
display: table;
border: 1px solid black;
width: 100%;
}
div.clearfix::after{
content:"";
clear: both;
display: table;
}
div, p, li, a, th, td {
font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 17px;
color: #092E1E;
}
/****************/
/* conteneur */
/****************/
#conteneur {
margin-top: 8px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 600px;
width: 1200px;
/* border: 1px solid #092E1E; */
}
/****************/
/* entete */
/****************/
#entete {
position: relative;
height: 66px;
margin: 2px;
/*
border: 1px solid #092E1E;
*/
}
#logo {
margin: 2px 10px 2px 2px;
float: left;
}
#logo img {
height: 60px;
width: 60px;
display: block;
margin-left: auto;
margin-right: auto;
}
#titre {
width: 55%;
line-height: 60px;
margin: 2px 15px 2px 2px;
text-align: center;
font-size: 140%;
font-weight: bold;
float: left;
}
#username {
width: 20%;
height: 60px;
line-height: 60px;
margin: 2px 15px 2px 30px;
float: right;
font-size: 140%;
font-weight: bold;
text-align: right;
}
#username-fleche {
height: 14px;
width: 14px;
cursor: pointer;
padding-left: 10px;
vertical-align: baseline;
}
#username-items {
position: absolute;
top: 68px;
right: 0px;
width: 180px;
visibility: hidden;
margin-top: 2px ;
padding: 5px;
border: 1px solid #092E1E;
overflow: hidden;
z-index: 100;
background-color: #b7a86b;
}
.menu-item:hover {
cursor: pointer;
background-color: #15A160;
}
/****************/
/* zone-de-contenu */
/****************/
#zone-de-contenu {
width:50%;
margin:auto;
}
#zone-de-contenu>div {
margin:auto;
}
.tablelist {
width:100%;
}
/****************/
/* zone-de-jeu */
/****************/
#zone-de-jeu {
height: 438px;
margin: 2px;
/*
border: 1px solid #092E1E;
*/
}
#plateau {
height: 320px;
width: 740px;
position: relative;
margin: 3px;
}
#joueur-0 {
position: absolute;
top: 55px;
left: 190px;
text-align: right;
}
#joueur-1 {
position: absolute;
top: 145px;
left: 80px;
text-align: right;
}
#joueur-2 {
position: absolute;
top: 245px;
left: 190px;
text-align: right;
}
#joueur-3 {
position: absolute;
top: 145px;
left: 500px;
}
#jeu-0 {
position: absolute;
top: 30px;
left: 300px;
}
#jeu-1 {
position: absolute;
top: 120px;
left: 190px;
}
#jeu-2 {
position: absolute;
top: 220px;
left: 300px;
}
#jeu-3 {
position: absolute;
top: 120px;
left: 420px;
}
#suivant {
position: absolute;
bottom: 15px;
right: 40px;
}
#suivant input {
width: 130px;
}
#ov {
height: 310px;
width: 390px;
padding: 5px 25px 5px 25px;
position: relative;
top: -322px;
left: 746px;
margin: 2px;
border: 1px solid #092E1E;
}
#table-atout {
width: 98%;
}
#table-atout td {
padding: 4px;
text-align: center;
vertical-align: middle;
}
#atout {
margin: 0px auto 0px auto;
}
#choix {
height: 150px;
margin-top: 20px;
padding: 6px;
overflow-x: hidden;
overflow-y: auto;
}
#options-fleche {
width: 11px;
height: 11px;
float: right;
cursor: pointer;
vertical-align: baseline;
}
#options-valeur {
display: none;
}
#dernier-pli-fleche {
width: 11px;
height: 11px;
float: right;
cursor: pointer;
vertical-align: baseline;
}
#dernier-pli-valeur {
display: none;
}
#dernier-pli {
margin-top: 10px;
}
#dernier-pli-valeur {
padding-left: 50px;
}
#jeu-en-main {
height: 76px;
width: 642px;
position: relative;
top: -320px;
left: 0px;
margin: 2px;
padding: 15px 58px 15px 40px;
border: 1px solid #092E1E;
}
#a-vous {
float: left;
width: 90px;
height: 59px;
padding-top: 20px;
text-align: center;
margin-right: 20px;
visibility: hidden;
background:white;
font-weight: bold;
}
#points {
height: 98px;
width: 390px;
position: relative;
top: -430px;
left: 746px;
margin: 2px;
border: 1px solid #092E1E;
padding: 4px 25px 4px 25px;
}
#points p {
text-align: center;
margin: 5px 0px 5px 0px;
}
#points table {
width: 98%;
border-collapse: collapse;
border: 1px solid #092E1E;
}
#points table td {
padding: 0px 2px 0px 2px;
text-align: center;
border: 1px solid #092E1E;
}
.joueur {
width: 90px;
overflow: hidden;
text-decoration: underscore;
border-color: black;
border-style: solid none solid none;
}
.carte {
height: 77px;
width: 53px;
/* carte : hauteur = 1,54 * largueur; */
border: 1px solid #092E1E;
background-color: #117F4A;
}
.carte-en-main, .carte-dernier-pli {
float: left;
margin-right: 9px;
}
.item-choix {
padding: 4px;
border: 1px solid #092E1E;
}
.item-choix-valeur {
padding: 4px;
border-right: 1px solid #092E1E;
border-bottom: 1px solid #092E1E;
border-left: 1px solid #092E1E;
}
/************************/
/* zone-de-conversation */
/************************/
#zone-de-conversation {
height: 84px;
margin: 2px;
position: relative;
}
#chat {
width: 61%;
height: 87%;
float: left;
background-color: #C4E8D7;
margin: 2px 15px 2px 2px;
border-top: 2px solid #888;
border-right: 2px solid #DDD;
border-bottom: 2px solid #DDD;
border-left: 2px solid #888;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
}
#message {
width: 34%;
float: right;
margin: 1px 15px 2px 2px;
position: absolute;
right: 2px;
top: 3px;
}
#message p {
padding-bottom: 4px;
}
#texte-msg {
width:80%;
background-color: #C4E8D7;
margin-right: 5px;
}
button#add{
min-width:180px;
margin:auto;
padding:10px;
background: #b7a86b;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
display:block;
}
thead{
font-weight: bold;
}
fieldset.fieldset {
border:1px solid green;
padding:30px;
margin:20px;
}
.alert{
width:80%;
margin: 10px auto 10px auto;
padding:10px;
background: #FF9E77;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
display:block;
border: 1px solid #DF531C;
}
.alert > .close{
background: #EC784A;
border: none;
}
table.tablelogin td{
padding: 10px 0px 10px 0px;