Put the thumbnail on the edit details part on the top and center

[mediagoblin.git] / mediagoblin / static / css / base.css

body {
  background-color: #272727;
  color: #f7f7f7;
  font-family: sans-serif;
  padding:none;
  margin:0px;
  height:100%;
}

form {
  margin:0px;
  padding:0px;
}

/* Carter One font */

@font-face {
  font-family: 'Carter One';
  font-style: normal;
  font-weight: normal;
  src: local('CarterOne'), url('http://themes.googleusercontent.com/font?kit=VjW2qt1pkqVtO22ObxgEBRsxEYwM7FgeyaSgU71cLG0') format('woff');
}

/* text styles */

h1 {
  font-family: 'Carter One', arial, serif;
  margin-bottom: 20px;
  margin-top:40px;
}

p {
  font-family: sans-serif;
  font-size:16px;
}

a {
  color: #86D4B1;
}

label {
  font-weight: normal;
}

/* website structure */

.mediagoblin_body {
  position:relative;
  min-height:100%;
}

.mediagoblin_header {
  width:100%;
  height:36px;
  background-color:#393939;
  padding-top:14px;
  margin-bottom:40px;
}

.mediagoblin_footer {
  width:100%;
  height:26px;
  background-color:#393939;
  bottom:0px;
  padding-top:8px;
  position:absolute;
  text-align:center;
  font-size:14px;
  color:#999;
}

.mediagoblin_content {
  padding-bottom:74px;
}

a.mediagoblin_logo {
  width:34px;
  height:25px;
  margin-right:10px;
  background-image:url('../images/icon.png');
  background-position:0px 0px;
  display:inline-block;
}

a.mediagoblin_logo:hover {
  background-position:0px -28px;
}

.mediagoblin_header_right {
  float:right;
}

/* common website elements */

.dotted_line {
  width:100%;
  height:0px;
  border-bottom: dotted 1px #5f5f5f;
  position:absolute;
  left:0px;
  margin-top:-20px;
}

.button {
  font-family:'Carter One', arial, serif;
  height:32px;
  min-width:99px;
  background-color:#86d4b1;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#86d4b1), to(#62caa2)); 
  background-image: -webkit-linear-gradient(top, #86d4b1, #62caa2); 
  background-image:    -moz-linear-gradient(top, #86d4b1, #62caa2); 
  background-image:     -ms-linear-gradient(top, #86d4b1, #62caa2); 
  background-image:      -o-linear-gradient(top, #86d4b1, #62caa2); 
  background-image:         linear-gradient(top, #86d4b1, #62caa2);
  box-shadow:0px 0px 4px #000;
  border-radius:5px;
  border:none;
  color:#272727;
  margin:10px 0px 10px 15px;
  font-size:1em;
  text-align:center;
  padding-left:11px;
  padding-right:11px;
}

/* forms */

.form_box {
  background-color:#393939;
  background-image:url("../images/background_lines.png");
  background-repeat:repeat-x;
  font-size:18px;
  padding-bottom:30px;
  padding-top:1px;
  margin-left:auto;
  margin-right:auto;
  display:block;
  float:none;
}

.edit_box {
  background-image:url("../images/background_edit.png");
}

.form_box h1 {
  font-size:28px;
}

.form_field_input input, .form_field_input textarea {
  width:460px;
  font-size:18px;
}

.form_field_box {
  margin-bottom:24px;
}

.form_field_label,.form_field_input {
  margin-bottom:4px;
}

.form_field_error {
  background-color:#87453b;
  border:none;
  font-size:16px;
  padding:9px;
  margin-top:8px;
  margin-bottom:8px;
}

.form_submit_buttons {
  text-align:right;
}

/* media pages */

img.media_image {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

ul.media_thumbnail {
  padding:0px;
}

li.media_thumbnail {
  width:200px;
  height:200px;
  display:-moz-inline-stack;
  display:inline-block;
  vertical-align:top;
  margin:0px 10px 10px 0px;
  zoom:1;
. *display:inline;
}