@import 'menu.css';

/* Typo + reset */
@font-face {
    font-family:'UbuntuRegular';
    src:url('fonts/Ubuntu-R-webfont.eot');
    src:local('☺'), url('fonts/Ubuntu-R-webfont.woff') format('woff'), url('fonts/Ubuntu-R-webfont.ttf') format('truetype'), url('fonts/Ubuntu-R-webfont.svg#webfontAaiAvJXZ') format('svg');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: 'YanoneKaffeesatzLight';
    src: url('fonts/YanoneKaffeesatz-Light-webfont.eot');
    src: local('☺'), url('fonts/YanoneKaffeesatz-Light-webfont.woff') format('woff'), url('fonts/YanoneKaffeesatz-Light-webfont.ttf') format('truetype'), url('fonts/YanoneKaffeesatz-Light-webfont.svg#webfont2Z8ZAw9C') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    margin:0;
    padding:0;
    border:none;
    outline:none;
}

html {
    height:100%;
}

body {
    font:normal 62.5%/18px 'UbuntuRegular', Helvetica, Arial, sans serif;
    color:#333;
}

h1 ,
h2 ,
h3 ,
h4 ,
legend {
    font-family:Trebuchet ms, sans serif;
    font-weight:400;
}

h1 {
    color:#09F;
}

/* align to baseline */
h1, h2, h3, h4, h5,
p, blockquote,
dt, dd, li,
small,
label, input, select,
.headline {
    position:relative;
}

h1 {
    top:-5px;
    font-size:3.6em;
    line-height:54px;
}

h2 {
    top:0;
    margin-bottom:18px;
    padding-bottom:17px;
    border-bottom:solid 1px #EEE;
    font-size:2.4em;
    color:#09F;
    text-align:center;
}

h3 {
    top:3px;
    margin-bottom:18px;
    font-size:1.6em;
    color:#F33;
}

h4 ,
#assets h3,
legend {
    top:4px;
    font-size:1.4em;
    color:#F33;
}

h4 {
    margin-bottom:18px;
}

.contact h4 {
    margin:0;
}

h5 {
    color:#666;
}

h5 ,
p, blockquote ,
dt, dd, li ,
label, input, select {
    top:4px;
    font-size:1.2em;
}

p, blockquote {
    margin-bottom:18px;
    text-align:justify;
}

blockquote {
    width:auto;
    padding-left:36px;
    font-style:italic;
}

.description p {
    top:2px;
    font-size:1.4em;
}

legend {
    margin-bottom:0;
}

a {
    color:#09F;
}

a:visited ,
dt {
    color:#06C;
}

a:hover {
    color:#F00;
}

small {
    top:5px;
    font-size:1.1em;
    color:#F00;
}

ul, ol, dd {
    margin-bottom:18px;
}

#header {
    color:#FFF;
}

#footer,
#footer a {
    color:#999;
}

#footer a:visited {
    color:#666;
}

#footer .selected,
#footer a:hover {
    color:#F00;
}

/* STRUCTURE -------------------------------------------------------- */
body {
    padding:18px 0 0;
}

#page {
    position:relative;
    width:960px;
    margin:0 auto;
}

#header {
    height:180px;
    margin-bottom:18px;
    padding:18px 0;
}

#sidebar,
#content {
    float:left;
    display:inline;
}

#sidebar, 
#assets {
    width:162px;
    margin-top:54px;
    padding:0 15px;
}

#assets {
    float:right;
    display:inline;
}

#content {
    width:546px;
    padding:0 15px;
    overflow:hidden 
}

.group dl,
.group .adresse,
#nyroModalContent .adress {
    width:49%;
    float:left;
    display:inline;
}

#footer {
    clear:both;
    padding-top:18px;
}

/* VISUAL ----------------------------------------------------------- */
body {
    background:#FFF url(img/bodyBG.gif) repeat-x center top;
}

#header {
    background:url(img/headerBG.png) no-repeat center top;
}

.description {
    height:180px;
    padding:18px 207px 0;
    background-image:url(img/sprite_background.png);
    background-repeat:no-repeat;
    background-position:-14px 0;
}

#ludo .description {
    background-position:-14px 0;
}

#publications .description {
    background-position:-13px -180px;
}

#formations .description {
    background-position:left -360px;
}

#actions .description {
    background-position:-15px -540px;
}

#ludotheques .description {
    background-position:-17px -720px;
}

#chroniques .description {
    background-position:-12px -900px;
}

#news .description {
    background-position:-17px -1080px;
}

#liens .description {
    background-position:left -1260px;
}

#label .description {
    background-position:-14px -1440px;
}

#fureur .description {
    background-position:-14px -1620px;
}

#sidebar {
    padding-bottom:100px;
    background:url(img/cf.gif) no-repeat center bottom;
}

.post {
    overflow:hidden;
    width:100%;
    margin-bottom:45px;
    padding-bottom:27px;
    background:url(img/post_background.gif) repeat-x scroll left bottom;
}

.post.ludotheque h3 {
    padding-left:30px;
    background : url(img/pointer-jaune_small.png) no-repeat left 1px;
}

.post.fureur h3 {
    padding-left:30px;
    background : url(img/pointer-rouge_small.png) no-repeat left 1px;
}

.post b {
    color:#09F;
    font-weight:normal;
}

.headline,
.info {
    top:-8px;
    padding:8px 17px;
    background:#FFFBC9;
    border:solid 1px #FC0;
}

.group.ludo {
    background:url(img/ludo_alpha.jpg) no-repeat 270px bottom;
}

#content li {
    clear:both;
    padding-left:18px;
    background:url(img/bullet.gif) no-repeat left 7px;
    list-style:none;
}

.centered {
    text-align:center;
}

.centered img {
    display:block;
    margin:0 auto;
}

.address {
    overflow:hidden;
    width:546px;
}

.fureur .address {
    margin-top:36px;
    background: url(img/fureur.png) no-repeat right bottom;
}

.address img {
    float:left;
    padding-right:15px;
}

.address dl {
    overflow:hidden;
    float:left;
    width:354px;
    padding-left:15px;
}

#content p {
    overflow:hidden;
}

p img {
    float:left;
    padding:0 18px 0 0;
}

.signature {
    text-align:right;
    margin-bottom:36px;
}

.contact dl,
.contact .adress {
    width:50%;
    float:left;
}

/* BLOCK ELEMENT + RESET ---------------------------------------------*/
#header h1 {
    color:#FFF;
}

h3 small {
    top:4px;
    display:block;
    margin-bottom:23px;
    font:normal .75em Arial, Helvetica, sans serif;
}

p small {
    top:4px;
    display:block;
    margin-bottom:23px;
    font:normal .9em Arial, Helvetica, sans serif;
}

ul ul,
ul ol,
ol ul {
    margin-bottom:0;
}

li p,
dd li,
li li{
    top:0;
    margin-bottom:0;
    font-size:1em;
}

.group {
    width:510px;
    margin:18px 0;
    padding:17px;
    overflow:hidden;
    border:solid 1px #EEE;
}

.group p {
    margin-bottom:0;
}

#calendar {
    width:100%;
    border-collapse:collapse;
    text-align:center;
    margin-bottom:18px;
}

#calendar caption {
    font-weight:bold;
}

#calendar th {
    background:#F00 url(img/menu_background.gif) no-repeat bottom center;
    color:#FFF;
}

#calendar .odd {
    background:#F7F7F7;
}

#calendar td.current {
    background: #FFFBC9;
    border: solid 1px #FC0;
    font-weight:bold;
}
#calendar td.december {
    color:#CCC;
}

#assets ul {
    margin-bottom:36px;
    list-style-image:url(img/bullet.gif);
}

ul#shortcut,
ul.laureats {
    position:relative;
    top:-2px;
    margin-bottom:33px;
    padding:0 0 12px 8px;
    border-left:solid 1px #09F;
}

#shortcut li,
.laureats li {
    margin-bottom:9px;
    list-style:none;
    font-family:'YanoneKaffeesatzLight', Helvetica, Arial, sans-serif;
    font-size:1.5em;
    font-weight:400;
}

#shortcut li:last-child,
.laureats li:last-child {
    margin-bottom:0;
}

.laureats a,
#shortcut a {
    text-decoration:none;
}

#assets .showAll {
    overflow:hidden;
    display : block;
    height : 39px;
    margin-bottom:32px;
    padding: 1px 3px 0;
    background : url(img/link-forum.jpg) no-repeat scroll center top;
    font-size:1.2em;
    color:#06C;
    text-align:center;
    text-decoration:none;
}

#assets .showAll:hover {
    background-position:center bottom;
    color:#FFF;
    font-weight:bold;
}

#fureur #assets .info {
    margin-bottom : 0;
}
form#search {
    margin-bottom:9px;
    padding:0;
}

#search fieldset {
    margin-bottom:18px;
}

#criteria input {
    position:relative;
    top:0;
    width:154px;
    margin-bottom:13px;
    padding: 3px;
    border:solid 1px #CCC;
    border-color:#EFEFEF #DDD #BBB;
    color:#BBB;
}
#criteria input:focus {
    color:#333;
}


#filters label {
    position:relative;
    padding-left:18px;
}

#filters input {
    position:absolute;
    left:0;
    top:1px;
}

.button {
    padding:0 3px;
    background:#09F;
    color:#FFF;
    font-weight:700;
}

    p.headline
{
    top:-4px;
    padding:8px 17px;
    background:#FFFBC9;
    border:solid 1px #FC0;
}

#links_shortcut ul {
    position:relative;
    overflow:hidden;
    top:9px;
    width:700px;
}

#links_shortcut li {
    float:left;
    display:inline;
    clear:none;
    margin-bottom:14px;
    padding:0;
    background:none;
}

#links_shortcut li.central {
    margin:0 14px 14px;
}

    li#link_ludo {
    background:url(img/logo_link.jpg) no-repeat left top;
    text-indent:-999px;
}

#link_ludo,
#links_shortcut li a {
    display:block;
    width:224px;
    height:40px;
    background:url(img/link.jpg) no-repeat left top;
    line-height:36px;
    text-align:center;
}

#content .thumbnails {
    overflow:hidden;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
}

#content .thumbnails li {
    height:72px;
    padding-bottom:18px;
    margin-bottom:17px;
    background:none;
    border-bottom:solid 1px #EEE;
}

#content .thumbnails li:last-child {
    margin-bottom:18px;
    border-bottom:none;
}

.thumbnails a {
    display:block;
    text-decoration:none;
}

#map {
    position:relative;
    width:524px;
    margin-bottom:36px;
    padding:9px 10px 6px;
    border:solid 1px;
    border-color:#EFEFEF #DDD #BBB;
}

#mapCanvas {
    margin-bottom:11px;
    border:solid 1px #DDD;
}

#mapLegend {
    overflow:hidden;
    position:relative;
    top:3px;
    width:100%;
    list-style:none;
    margin:0;
    padding:0;
}

#mapLegend li {
    float:left;
    clear:none;
    margin:0;
    padding:0 30px 13px 0;
    background:none;
}

p.date {
    padding : 3px 0 3px 30px; margin-bottom:12px;
    background: #CEF url(img/calendrier.png) no-repeat 3px 3px;
    font-weight:bold;
}

.thumbnails img,
.game-infos {
    float:left;
}

.thumbnails img {
    margin-right:18px;
}

.game-infos h3 {
    clear:right;
    margin-bottom:0;
}

.game-infos {
    margin-top:18px;
}

.game-infos small {
    color:#333;
    font-size:.9em;
}

.ludotheque dd p {
    font-size:1em;
}

#footer {
    clear:both;
}

#footer p {
    font-size:1em;
    text-align:center;
    top:5px;
}

/* DEBUG ------------------------------------------------------------ *
body { background:url(img/baseline.png) repeat left -1px; }
/* ------------------------------------------------------------------ */