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