css/style.css

   1 /*** GENERAL ***/
   2 body {
   3     font: 20px/1.3em Palatino,Georgia,serif;
   4     margin: 10px;
   5 }
   6
   7 header {
   8     text-align: center;
   9 }
  10
  11 .bouton {
  12         border-radius: 2px;
  13 }
  14
  15 #main ul#links {
  16     padding: 0;
  17     list-style-type: none;
  18     text-align: center;
  19 }
  20
  21 #main ul#links li {
  22     display: inline;
  23 }
  24
  25 #main ul#links li a.current {
  26     -webkit-border-radius: 2px;
  27     border-radius: 2px;
  28 }
  29
  30 #main ul#sort {
  31     padding: 0;
  32     list-style-type: none;
  33     text-align: center;
  34 }
  35
  36 #main ul#sort li {
  37     display: inline;
  38     font-size: 0.9em;
  39 }
  40
  41 #main ul#sort img:hover {
  42     cursor: pointer;
  43 }
  44
  45 #main, #article {
  46     margin: 0 auto;
  47 }
  48
  49 #links a, .backhome a, .support a{
  50     text-decoration: none;
  51     padding: 5px 10px;
  52 }
  53 #links a:hover, .backhome a:hover, .support a:hover{
  54     -webkit-border-radius: 2px;
  55     border-radius: 2px;
  56 }
  57
  58 .support {
  59     font-size: 14px;
  60 }
  61
  62 footer {
  63     text-align: right;
  64 }
  65
  66 /*** ***/
  67 /*** LINKS DISPLAY ***/
  68
  69 #main a.tool {
  70     text-decoration: none;
  71     cursor: pointer;
  72 }
  73
  74 input[type=submit].delete {
  75     width : 16px;
  76     height :16px;
  77     border : none;
  78     cursor: pointer;
  79     font-size : 0;
  80 }
  81
  82 #main #content {
  83     margin-top: 20px;
  84 }
  85
  86 #main .entrie {
  87     padding: 15px;
  88     min-height: 8em;
  89     border: 1px solid;
  90 }
  91
  92 #main .entrie h2 a {
  93     text-decoration: none;
  94 }
  95
  96 .tools {
  97     text-align: right;
  98 }
  99
 100 .tools ul {
 101     padding: 0; margin: 0;
 102     list-style-type: none;
 103 }
 104
 105 .tools ul li {
 106     line-height: 20px;
 107 }
 108
 109 .tools a.tool {
 110     cursor: pointer;
 111 }
 112
 113 #article .tools {
 114     position: relative;
 115     display: inline;
 116     top: 0px;
 117     right: 0px;
 118     width: 100%;
 119     text-align: left;
 120 }
 121
 122 #article .tools ul li{
 123     display: inline;
 124 }
 125
 126 #main .entrie .tools a.tool span, #article .tools a.tool span {
 127     display: inline-block;
 128     width: 16px;
 129     height: 16px;
 130 }
 131
 132
 133 /*** ***/
 134 /*** ARTICLE PAGE ***/
 135
 136 body.article {
 137     font: 20px/1.3em Palatino,Georgia,serif;
 138 }
 139
 140 #article header {
 141     text-align: left;
 142 }
 143
 144 #article header a {
 145     text-decoration: none;
 146 }
 147
 148 .vieworiginal a {
 149     text-decoration: none;
 150 }
 151
 152 .backhome {
 153     display: inline;
 154 }
 155
 156 /*** ***/
 157
 158 #main
 159 {
 160     max-width: 60em; /* 960 px */
 161     margin: 0 auto;
 162 }
 163 #content
 164 {
 165     width: 103.125%; /* 990px */
 166     overflow: hidden;
 167     margin-left: -1.562%; /* 15px */
 168     margin-bottom: -1.875em; /* 30px */
 169 }
 170
 171 .entrie
 172 {
 173     width: 30.303%; /* 300px */
 174     background-color: #fff;
 175     float: left;
 176     margin: 0 1.515% 1.875em; /* 15px 30px */
 177 }
 178
 179 @media only screen and ( max-width: 40em ) /* 640px */
 180 {
 181     .entrie
 182     {
 183         width: 46.876%; /* 305px */
 184         margin-bottom: 0.938em; /* 15px */
 185     }
 186 }
 187
 188 @media only screen and ( max-width: 20em ) /* 320px */
 189 {
 190     #content
 191     {
 192         width: 100%;
 193         margin-left: 0;
 194     }
 195
 196     .entrie
 197     {
 198         width: 100%;
 199         margin-left: 0;
 200         margin-right: 0;
 201     }
 202 }
 203
 204 /*** ***/
 205 /*** MESSAGES ***/
 206
 207 .messages { width: 100%; -moz-border-radius: 4px; border-radius: 4px; display: block; padding: 10px 0; margin: 10px auto 10px; clear: both; }
 208 .messages a.closeMessage { margin: -14px -8px 0 0; display:none; width: 16px; height: 16px; float: right; background: url(../img/messages/close.png) no-repeat; }
 209 /*.messages:hover a.closeMessage { visibility:visible; }*/
 210 .messages p { margin: 3px 0 3px 10px !important; padding: 0 10px 0 23px !important; font-size: 14px; line-height: 16px; }
 211 .messages.error { border: 1px solid #C42608; color: #c00 !important; background: #FFF0EF; }
 212 .messages.error p { background: url(../img/messages/cross.png ) no-repeat 0px 50%; color:#c00 !important; }
 213 .messages.success {background: #E0FBCC; border: 1px solid #6DC70C; }
 214 .messages.success p { background: url(../img/messages/tick.png) no-repeat 0px 50%; color: #2B6301 !important; }
 215 .messages.warning { background: #FFFCD3; border: 1px solid #EBCD41; color: #000; }
 216 .messages.warning p { background: url(../img/messages/warning.png ) no-repeat 0px 50%; color: #5F4E01; }
 217 .messages.information, .messages.info { background: #DFEBFB; border: 1px solid #82AEE7; }
 218 .messages.information p, .messages.info p { background: url(../img/messages/help.png ) no-repeat 0px 50%; color: #064393; }
 219 .messages.information a { text-decoration: underline; }