mediagoblin/static/css/base.css

   1 body {
   2   background-color: #111;
   3   background-image: url("../images/background.png");
   4   color: #999;
   5   font-family: sans-serif;
   6   padding: none;
   7   margin: 0px;
   8   height: 100%;
   9   font: 16px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
  10 }
  11
  12 form {
  13   margin: 0px;
  14   padding: 0px;
  15 }
  16
  17 /* Carter One font */
  18
  19 @font-face {
  20   font-family: 'Carter One';
  21   font-style: normal;
  22   font-weight: normal;
  23   src: local('CarterOne'), url('http://themes.googleusercontent.com/font?kit=VjW2qt1pkqVtO22ObxgEBRsxEYwM7FgeyaSgU71cLG0') format('woff');
  24 }
  25
  26 /* text styles */
  27
  28 h1{
  29   font-family: 'Carter One',arial,serif;
  30   margin-bottom: 15px;
  31   margin-top: 15px;
  32   color: #fff;
  33   font-size: 30px;
  34 }
  35
  36 h2{
  37   margin-top: 20px;
  38   color: #fff;
  39 }
  40
  41 h3{
  42   border-bottom: 1px solid #222;
  43   font-size: 18px;
  44 }
  45
  46 a {
  47   color: #999;
  48 }
  49
  50 a.highlight {
  51   color: #fff;
  52 }
  53
  54 label {
  55   font-weight: normal;
  56 }
  57
  58 /* website structure */
  59
  60 .mediagoblin_body {
  61   position: relative;
  62   min-height: 100%;
  63 }
  64
  65 .mediagoblin_header {
  66   height: 36px;
  67   padding-top: 14px;
  68   margin-bottom: 20px;
  69   border-bottom: 1px solid #222222;
  70 }
  71
  72 .header_submit{
  73   color: #272727;
  74   background-color: #aaa;
  75   background-image: -webkit-gradient(linear, left top, left bottom, from(##D2D2D2), to(#aaa));
  76   background-image: -webkit-linear-gradient(top, #D2D2D2, #aaa);
  77   background-image:    -moz-linear-gradient(top, #D2D2D2, #aaa);
  78   background-image:     -ms-linear-gradient(top, #D2D2D2, #aaa);
  79   background-image:      -o-linear-gradient(top, #D2D2D2, #aaa);
  80   background-image:         linear-gradient(top, #D2D2D2, #aaa);
  81   box-shadow: 0px 0px 4px #000;
  82   border-radius: 5px 5px 5px 5px;
  83   margin: 8px;
  84   padding: 3px 8px;
  85   text-decoration: none;
  86   border: medium none;
  87   font-family: 'Carter One',arial,serif;
  88 }
  89
  90 .mediagoblin_footer {
  91   height: 30px;
  92   border-top: 1px solid #222222;
  93   bottom: 0px;
  94   padding-top: 8px;
  95   text-align: center;
  96   font-size: 14px;
  97   color: #999;
  98 }
  99
 100 .mediagoblin_content {
 101   padding-bottom: 74px;
 102 }
 103
 104 .mediagoblin_header_right {
 105   float: right;
 106 }
 107
 108 /* common website elements */
 109
 110 .button {
 111   font-family: 'Carter One', arial, serif;
 112   height: 32px;
 113   min-width: 99px;
 114   background-color: #86d4b1;
 115   background-image: -webkit-gradient(linear, left top, left bottom, from(#86d4b1), to(#62caa2));
 116   background-image: -webkit-linear-gradient(top, #86d4b1, #62caa2);
 117   background-image:    -moz-linear-gradient(top, #86d4b1, #62caa2);
 118   background-image:     -ms-linear-gradient(top, #86d4b1, #62caa2);
 119   background-image:      -o-linear-gradient(top, #86d4b1, #62caa2);
 120   background-image:         linear-gradient(top, #86d4b1, #62caa2);
 121   box-shadow: 0px 0px 4px #000;
 122   border-radius: 5px;
 123   border: none;
 124   color: #272727;
 125   margin: 10px 0px 10px 15px;
 126   font-size: 1em;
 127   text-align: center;
 128   padding-left: 11px;
 129   padding-right: 11px;
 130   text-decoration: none;
 131 }
 132
 133 .pagination{
 134 text-align: center;
 135 }
 136
 137 .pagination_arrow{
 138   margin: 5px;
 139 }
 140
 141 /* forms */
 142
 143 .form_box {
 144   background-color: #222;
 145   background-image: url("../images/background_lines.png");
 146   background-repeat: repeat-x;
 147   font-size: 18px;
 148   padding-bottom: 30px;
 149   padding-top: 30px;
 150   margin-left: auto;
 151   margin-right: auto;
 152   display: block;
 153   float: none;
 154 }
 155
 156 .edit_box {
 157   background-image: url("../images/background_edit.png");
 158 }
 159
 160 .form_box h1 {
 161   font-size: 28px;
 162 }
 163
 164 .form_field_input input, .form_field_input textarea {
 165   width: 100%;
 166   font-size: 18px;
 167 }
 168
 169 .form_field_box {
 170   margin-bottom: 24px;
 171 }
 172
 173 .form_field_label,.form_field_input {
 174   margin-bottom: 4px;
 175 }
 176
 177 .form_field_error {
 178   background-color: #87453b;
 179   color: #fff;
 180   border: none;
 181   font-size: 16px;
 182   padding: 9px;
 183   margin-top: 8px;
 184   margin-bottom: 8px;
 185 }
 186
 187 .form_submit_buttons {
 188   text-align: right;
 189 }
 190
 191 /* comments */
 192
 193 .comment_author {
 194   margin-bottom: 40px;
 195   padding-top: 4px;
 196   font-size: 14px;
 197 }
 198
 199 .comment_content p {
 200   margin-bottom: 4px;
 201 }
 202
 203 /* media galleries */
 204
 205 .media_thumbnail {
 206   padding: 0px;
 207   width: 180px;
 208   height: 180px;
 209   overflow: hidden;
 210   float: left;
 211   margin: 0px 4px 10px 4px;
 212   text-align: center;
 213 }
 214
 215 /* icons */
 216
 217 img.media_icon{
 218   margin: 0 4px;
 219   vertical-align: sub;
 220 }
 221
 222 /* navigation */
 223
 224 .navigation_button{
 225   width: 139px;
 226   display: block;
 227   float: left;
 228   text-align: center;
 229   background-color: #222;
 230   text-decoration: none;
 231   padding: 12px 0pt;
 232   font-family: 'Carter One', arial, serif;
 233   font-size: 2em;
 234   margin: 0 0 20px
 235 }
 236
 237 p.navigation_button{
 238   color: #272727;
 239 }
 240
 241 .navigation_left{
 242   margin-right: 2px;
 243 }
 244
 245 /* messages */
 246
 247 ul.mediagoblin_messages {
 248   list-style: none inside;
 249   color: #f7f7f7;
 250 }
 251
 252 .mediagoblin_messages li {
 253   margin: 5px 0;
 254   padding: 8px;
 255   text-align: center;
 256 }
 257
 258 .message_success {
 259   background-color: #378566;
 260 }
 261
 262 .message_warning {
 263   background-color: #87453b;
 264 }
 265
 266 .message_error {
 267   background-color: #87453b;
 268 }
 269
 270 .message_info {
 271   background-color: #378566;
 272 }
 273
 274 .message_debug {
 275   background-color: #f7f7f7;
 276   color: #272727;
 277 }