css/style.css

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