tpl/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 #main .entrie .url {
 133     font-size: 13px;
 134 }
 135
 136
 137 /*** ***/
 138 /*** ARTICLE PAGE ***/
 139
 140 body.article {
 141     font: 20px/1.3em Palatino,Georgia,serif;
 142 }
 143
 144 #article header {
 145     text-align: left;
 146 }
 147
 148 #article header a {
 149     text-decoration: none;
 150 }
 151
 152 .vieworiginal a {
 153     text-decoration: none;
 154 }
 155
 156 .backhome {
 157     display: inline;
 158 }
 159
 160 /*** ***/
 161
 162 #main
 163 {
 164     max-width: 60em; /* 960 px */
 165     margin: 0 auto;
 166 }
 167 #content
 168 {
 169     width: 103.125%; /* 990px */
 170     overflow: hidden;
 171     margin-left: -1.562%; /* 15px */
 172     margin-bottom: -1.875em; /* 30px */
 173 }
 174
 175 .entrie
 176 {
 177     width: 30.303%; /* 300px */
 178     background-color: #fff;
 179     float: left;
 180     margin: 0 1.515% 1.875em; /* 15px 30px */
 181 }
 182
 183 @media only screen and ( max-width: 40em ) /* 640px */
 184 {
 185     .entrie
 186     {
 187         width: 46.876%; /* 305px */
 188         margin-bottom: 0.938em; /* 15px */
 189     }
 190 }
 191
 192 @media only screen and ( max-width: 20em ) /* 320px */
 193 {
 194     #content
 195     {
 196         width: 100%;
 197         margin-left: 0;
 198     }
 199
 200     .entrie
 201     {
 202         width: 100%;
 203         margin-left: 0;
 204         margin-right: 0;
 205     }
 206 }