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