/*************************************************************************************************************************
Screen smaller than 910px
*************************************************************************************************************************/
@media all and (max-width: 910px) {

  ul.toplist {padding: 0; margin: 0; clear: both; width: 100%; overflow: hidden; font-size: .9em;}
  ul.toplist li {padding: 0; margin: 0;}
  ul.toplist li a {color: #21759b; text-decoration: none; display: block; padding: 10px; font-weight: bold;}
  ul.toplist li a.current {background: #fff; color: #2ea2cc;}
  ul.toplist li.span {padding: 10px;}

  #slide {background: #fff; color: #666; padding: 2%; overflow: hidden; width: 96%; float: left;}
  #slide .wrap {overflow: hidden; padding: 15px; margin: 10px 20px 0 2px; border-bottom: 1px solid #ddd;}
  #slide .note {font: italic 11px Verdana, Tahoma, Arial, Sans-serif; line-height: 1.5em; padding: 5px 0;}
  #slide .note span {display: inline-block; padding: 2px 5px; background: #feffcd; border: 1px solid #e1e1e1;}
  #slide input[type='text'] {width: 90%; padding: 5px; margin-bottom: 5px;}
  #slide select {width: 90%;}
  #slide textarea {width: 99%; height: 150px;}
  #slide h3 {font-weight: 600; font-size: 1.1em; color: #666; margin: 0 0 10px 0;}
  #slide h4 {font-weight: 600; font-size: 1.3em; color: #222; margin: 40px 0 10px 0;}

}

/*************************************************************************************************************************
Screen larger than 911px
*************************************************************************************************************************/
@media all and (min-width: 911px) {

  ul.toplist {padding: 0; margin: 0; float: left; width: 20%; overflow: hidden;}
  ul.toplist li {padding: 0; margin: 0;}
  ul.toplist li a {color: #21759b; text-decoration: none; display: block; padding: 15px; font-weight: bold;}
  ul.toplist li a.current {background: #fff; color: #2ea2cc;}
  ul.toplist li.span {padding: 10px;}

  #slide {background: #fff; padding: 2%; overflow: hidden; width: 76%; float: left;}
  #slide .wrap {overflow: hidden; padding: 15px; margin: 10px 20px 0 2px; border-bottom: 1px solid #ddd;}
  #slide .note {font: italic 11px Verdana, Tahoma, Arial, Sans-serif; line-height: 1.5em; padding: 5px 0;}
  #slide .note span {display: inline-block; padding: 2px 5px; background: #feffcd; border: 1px solid #e1e1e1;}
  #slide input[type='text'] {width: 50%; padding: 5px; margin-bottom: 5px;}
  #slide select {width: 50%;}
  #slide textarea {width: 99%; height: 150px;}
  #slide h3 {font-weight: 600; font-size: 1.1em; color: #666; margin: 0 0 10px 0;}
  #slide h4 {font-weight: 600; font-size: 1.3em; color: #222; margin: 40px 0 10px 0;}

}

#options-form {background: #f9f9f9; color: #000; width: 100%; margin: 15px 0;}
#options-header {padding: 30px 0; text-align: center;}
#options-header h1 {margin: 0 0 10px 0; color: #555; font-weight: 600;}
#options-header h1 span {font-weight: normal;}
#options-header .meta {font-size: .85em; letter-spacing: .05em;}
#options-header a {text-decoration: none;}
.options-buttons {clear: both; padding: 20px; overflow: hidden;}

.thumbnail {float: left; padding: 10px 10px 10px 0px; margin: 0 10px;}
.screenshot {border: 1px solid #e1e1e1;}
.thumb-input {width: 50px !important;}
hr {background: none; border: none; clear: both;}

.farbtastic {background: #fff; border: 1px solid #e1e1e1; position: absolute;}
.wp-picker-holder {position: absolute; z-index: 9999;}
input[type="text"].wp-color-picker {padding: 3px !important;}

/* MISC */
#options-form img {max-width: 100%; height: auto;}
ul.themes-listing li {width: 300px; float: left; padding: 5px 0;}
li.error {font-weight: bold; color: #f00;}
label.image-label {float: left; margin: 0 10px 5px 0px; font-size: 0.8em;}
img.select-img {border: 1px solid #ccc;}
img.select-img:hover {border: 1px solid #000;}
img.alignleft {float: left; margin-right: 5px;}