Additional style changes to navigation; add three navigation images

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

body {
  background-color: #1F1F1F;
  color: #aaa;
  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=FWNn6ITYqL6or7ZTmBxRhq3fkYX5z1QtDUdIWoaaD_k') format('woff');
}

/* text styles */

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

h2{
  margin-top:20px;
}

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

a {
  color: #fff;
}

label {
  font-weight: normal;
}

/* website structure */

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

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

.mediagoblin_footer {
  width:100%;
  height:26px;
  background-color:#2F2F2F;
  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 */

.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;
}

.pagination{
text-align:center;
}

/* 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:100%;
  font-size:18px;
}

.form_field_box {
  margin-bottom:24px;
}

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

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

.form_submit_buttons {
  text-align:right;
}

/* comments */

.comment_author {
  margin-bottom:40px;
  padding-top:4px;
}

.comment_content p {
  margin-bottom:4px;
}

/* media galleries */

.media_thumbnail {
  padding:0px;
  width:180px;
  height:180px;
  overflow:hidden;
  float:left;
  margin:0px 4px 10px 4px;
  text-align:center;
}

/* icons */

img.media_icon{
  margin:0 4px;
  vertical-align:sub;
}

/* navigation */

.navigation_button{
  width:139px;
  display:block;
  float:left;
  text-align:center;
  background-color:#393939;
  text-decoration:none;
  padding:12px 0pt;
  font-family:'Carter One', arial, serif;
  font-size:2em;
  margin:0 0 20px
}

p.navigation_button{
  color:#272727;
}

.navigation_left{
  margin-right:2px;
}

/* messages */

ul.mediagoblin_messages {
  list-style:none inside;
  color:#f7f7f7;
}

.mediagoblin_messages li {
  margin:5px 0;
  padding:8px;
  text-align:center;
}

.message_success {
  background-color: #378566;
}

.message_warning {
  background-color: #87453b;
}

.message_error {
  background-color: #87453b;
}

.message_info {
  background-color: #378566;
}

.message_debug {
  background-color: #f7f7f7;
  color:#272727;
}

/* profile stuff */

.profile_content {
  padding: 6px;
  background-color: #393939;
  margin-bottom: 10px;
}