I-de-ya/ideyabox

//= require 'font-awesome.css'
//*= require normalize
//*= require jquery.Jcrop.css
//*= require_self
* {
  margin: 0;
  padding: 0;
}

$deepgreen: #404040;
$bodycolor: #eafeeb;
$wrapper_color: rgba(255,255,255,0.9);
$a_color: #000;
$a_hover_color: #53B75F;
$active_color:#C4FFCB;
$border_color:#d4d4d4;
$shadows: rgb(150,150,150);

html {overflow-y:scroll;width: 100%;}
body {width: 100%; 
  background: $bodycolor url(<%= asset_path 'admin/background-image.png' %>);

  text-align: left; font:100% "Lucida Grande", "Lucida Sans Unicode", helvetica, arial, verdana, sans-serif;color:$deepgreen;}
#logo img{
  width:100px;
}
a.del {
  display:inline-block;
  min-width:80px;
  vertical-align:middle;

  i {display:inline;}
  &:hover {color:#FF0000;}
}

@mixin radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;   
}
@mixin box-shadow($blur, $color) {
  -webkit-box-shadow: 0 0 $blur $color;
  -moz-box-shadow: 0 0 $blur $color;
  box-shadow: 0 0 $blur $color; 
}

.icon-large{font-size:1.5em;}
.horizontal_items {
  display:none;
}
.bright_link {
  background:$deepgreen;
  color:#fff;
  padding:3px 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color:#d4d4d4;
  &:hover {color:white;}
}
.selected{
  color:#77C0C7;
  &.bright_link{color:$active_color;}
}
.rounded {
  text-align:center;
  vertical-align:middle;
  color:white;
  width:18px;
  height:18px;
  padding:3px 0.1em 0 0.1em;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background:$deepgreen;
}
form {width:100%;}
table {
  width:100%;
  border-collapse:collapse;
  margin-bottom:10px;

  tr {
    //&:first-child {border-top:1px solid $border_color;}
    width:100%;
    border-top:1px solid $border_color;
    border-bottom:1px solid $border_color;
  }
  td {
    padding:5px 7px;
    vertical-align:middle;
    input {width:100%;}
  }
  .right {text-align:right;vertical-align:middle;}
  td.icon a {width:15px;}
  td.handle {color:$deepgreen;cursor: move;}
  td.icon {width:22px;}
}
.not-work {
  color:$border_color;
}

table.zebra {
  th {
    font-size:1.2em;
    background:$deepgreen;
    color:$border_color;  
    a {color:$border_color;&:hover{color:#fff;}} 
    padding:0.5em 7px;
  }
  border-right:solid 1px $border_color;
  border-left:solid 1px $border_color;
  tr:nth-child(2n+1) {
    background:#F8F8F8;
  }
  tr:nth-child(2n) {
    background:#fff;
  } 
}
li {list-style: none;}

h1,h2,h3,h4,ul {margin:0;padding:0;}
h2,h3,h4 {margin-bottom:0.5em;}
hr {margin-bottom:10px;background-color:$border_color;}
a {color:$a_color;text-decoration:none;}
a:hover {text-decoration:none;color:$a_hover_color;}

ul.horizontal_items {
  margin-bottom:10px;
  li {
    display:inline-block;
  }
}

.bordered_box {
  border:solid 1px $border_color;
  margin-bottom:10px;
  padding:10px 15px;
  img {max-width:100%;}
}



@media screen and (min-width: 780px) {
  .full, .sidebar {
    margin:0 -2% -1em 2%;
  }
  #launchbar {
    
    li {float:left;}
  }
  #page_sidebar {float:right;width:40%;}
  .sidebar #content {width:60%;overflow:hidden;table{width:98%;}}
}
@media screen and (min-width: 480px) {
  #wrapper {
    margin:0 5% auto;
  }
  ul.user_panel li {float:left;}
}

@media screen and (max-width: 780px) {
  #launchbar {
      li.arrow {display:block;}
      ul.menus {
        padding-left:20px;
        li {display:none;}
        li.active, li.arrow {display:block;}
        .show{display:block;}
    }
  }
  a.del {
    min-width:10px;
    span {display:none;}
  }
}
textarea {
  width:100%;
}
img {
  max-width:100%;
}
.clear {
  clear:both;
}


html.login {
  #content input{font-size:1em;}
  #content input[type=submit]{padding: 0.3em 0.5em;}
  &, body { width:100%; height:100%;}
  #main {min-height:0; width:370px; margin:0 auto; 
  margin-bottom:100px;
  background:white;
  padding:0 2em;
  -webkit-box-shadow: 0 0 5px #CCC;
  -moz-box-shadow: 0 0 5px #CCC;
  box-shadow: 0 0 5px #CCC;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #CCC;
  }

  table.login {border-collapse:collapse; width:100%; height:100%;}
  td.login {vertical-align:middle;}
  .fields {
    margin:0 0 5px 0;
    input {width:100%}
  }
}
#launchbar {
  background: $deepgreen;overflow: hidden;position: relative;text-align: left;z-index: 9999;padding: 0 3%;
  -webkit-box-shadow: 0 0 5px $shadows;
  -moz-box-shadow: 0 0 5px $shadows;
  box-shadow: 0 0 5px $shadows;
  ul.user_panel {
    text-align:right;position:absolute;right:5%;top:0;
    li {padding-left:10px;}
  }
  ul.menus li {padding-right:10px;}

  li {position:relative;list-style-type: none;line-height: normal;padding: 0;padding: 0.625em 0 0.625em 0;font-size: 0.875em}

  li a {position: relative;display: block;color:#d4d4d4;text-decoration:none;width:100%;}

  li a:hover {color:white;}
  li.active a {color: $active_color;font-weight: bold;}
  .arrow {float:left;z-index:10000;display:none;}
}

#header {
  width:100%;
  #header_wrapper {
    position:relative;
    #center {
      height:80px;position:relative;
      font:2.1em sans-serif;font-weight:bolder;margin: 0.3em 5%;
      a{
        text-decoration:none;vertical-align:top;
        &#application_link {top:0.5em;position:relative;}
      }
    }
  }
  #language_link{position:absolute;right:5%;top:0.5em;font-size:0.75em;}
  #search {position:absolute;right:5%;bottom:-0.7em;font-size:0.75em;}
  #subscription input{position:relative;font-size:1.25em;bottom:0;}
  #subscription input[type=submit]{
    background:url(<%= asset_path 'admin/search.png' %>) no-repeat;
    
    border:none;text-shadow:none;box-shadow:none;width:22px;
    &:hover {background-color:none;border:none;color:none;box-shadow:none}
  }
}

#topbar {
  background:$deepgreen;overflow: hidden;position: relative;text-align: left;z-index: 9999;width:100%;
  border-bottom:1px solid $shadows;
  ul#nav {padding: 0 3%;} 
  li {display:inline-block;position: relative;margin-right: 0.33333%;list-style-type: none;line-height: normal;padding: 0;padding: 0.9em 5px 0.9em 5px}
  li a {position: relative;display: inline-block;font-size: 1.1em;color: #d4d4d4;text-decoration: none;white-space: nowrap;}
  li a:hover {color:white;}
  li.active a {color: $active_color;font-weight: bold;}
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-top-left-radius: 3px;
  -moz-border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.full, .sidebar {
  z-index: 9999;
  background:white;
  -webkit-box-shadow: -2px 2px 10px $shadows;
  -moz-box-shadow: -2px 2px 10px $shadows;
  box-shadow: -2px 2px 10px $shadows;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #CCC;
  padding:1em 2% 1em 2%;
  min-height:40em;
  h5 {color:green;}
  .explanations {margin-top:1em;}
}
#page-header {
  padding:0.625em 3%;
  p{float:right;color:$deepgreen;}
  h1 {text-transform:capitalize;}
  a.green {color:$a_hover_color;text-decoration:underline}
  a.green:hover {text-decoration:none}
}
#wrapper {
  background:$wrapper_color;
  font-size: 0.8em;
  
  -webkit-box-shadow: -2px 2px 10px $shadows;
  -moz-box-shadow: -2px 2px 10px $shadows;
  box-shadow: -2px 2px 10px $shadows;

  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #CCC;
  margin-bottom:2em;
}
td #imp_redactor_box_slider_item_body {width:100% !important;}
.prev_button {
  float:right;margin-right:5px;
}

.s_item img{
  width:100%;
}
.date_params {display:none;&.show {display:table-row;}}

body .redactor_toolbar li a.redactor_btn_hiconix_cut{background: url(<%= asset_path 'admin/hiconix_cut.png' %>) no-repeat;}

#index_wr {
  margin-top:10px;
}

@mixin gradient($top, $bottom) {
  background: $top;
  background: -moz-linear-gradient(top, $top 0%, $bottom 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); 
  background: -webkit-linear-gradient(top, $top 0%,$bottom 100%); 
  background: -o-linear-gradient(top, $top 0%,$bottom 100%); 
  background: -ms-linear-gradient(top, $top 0%,$bottom 100%);
  background: linear-gradient(to bottom, $top 0%,$bottom 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5eb6ff', endColorstr='#006ed6',GradientType=0 );
}


// buttons

@mixin black_button  {
  font:1em Helvetica, Arial, sans-serif;
  margin-bottom:10px;
  display:inline-block;
  padding:5px 7px;
  color:#d4d4d4;
  background:$deepgreen;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  text-shadow:none;
  &:hover {
    color:#fff;
    border:none;
    background:black;
    box-shadow:none;

  }
}
.black_button {
  @include black_button;
}
input[type=submit] {
  cursor:pointer;
  padding:0.5em 3%;
  font:1.5em Helvetica, Arial, sans-serif;
  font-weight:bold;
  color:#444;
  border:1px solid #707070;
  border-radius: 2px;
  background:#f4f4f4;
  text-shadow:0 1px 1px rgba(255,255,255,0.85);
  
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 1px 1px 0 #fff inset, -1px -1px 0 #fff inset;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 1px 1px 0 #fff inset, -1px -1px 0 #fff inset;

  &.black_button, &.icon_button {
    border:none;
    box-shadow:none;
  }

  &.black_button {
    @include black_button;
  }
  &.icon_button{
    padding:0;
    width:25px;
    height:25px;
    &:hover {
      color:none;
      background-color:none;
      border:none;
      box-shadow:none;
    }
    &.plus {
      background:url(<%= asset_path 'admin/small_button.png' %>);
      background-size:cover;
    }
    &.search_button {
      background:url(<%= asset_path 'admin/search_button.png' %>);
      background-size:cover;
    }

  }

  &:hover {
    border-color:#097a16;
    background-color:#A9FFB4;
    -webkit-box-shadow: 0 1px 6px rgb(9, 122, 22);
    -moz-box-shadow: 0 1px 6px rgb(9, 122, 22);
    box-shadow: 0 1px 6px rgb(9, 122, 22);
    color:#444;
  }
}



// flash messages 

.notice, .alert {
  padding:7px 15px;
  margin:10px 30px;
  border-radius:4px;
  border:1px solid;
  border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  font-size:13px;
  line-height:18px;
  color:#fff;
  text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
  background-repeat: repeat-x;
  z-index:1000;
  position:relative;
}
.alert {
  background-color:$deepgreen;
}
.notice {
  background-color:#57A957;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  behavior:url("/PIE.htc");
}

#error_explanation {background:#fbe3e4;padding:1em;border-radius:4px; border:1px dashed red;ul{list-style-type:none;}}




// images uploading

ul.photos {
  list-style: none;
  li {
    display:inline-block;
    position:relative;
    a.del {text-indent:-9999px;position:absolute;right:0;bottom:0;}
  }
}

.image-list li{
  display:inline-block;
  width:47%;
  margin:3px 0.5%;
  padding:0;
  position:relative;
  border:1px solid grey;
  .image_control_panel {
    position:absolute;
    bottom:0;
    height:2.5em;
    background:rgba(255,255,255,0.7);
    width:100%;
  }
  img {width:100%;}
  a {
    &.delete_image {
      color:#000;
      position:absolute;
      right:0;
      bottom:0;
      &:hover {
        color:red;
      }
    }
    &.toggleshow {
      color:#000;
      position:absolute;
      left:0;
      bottom:0;
      .icon-eye-close {
        color:#000;
      }
      &:hover {
        color:#53B75F;
      }      
    }
  }
}

.upload {
  strong {color:#1B7726;}
  margin-bottom:0.5em;
}
.progress {
  border:1px solid grey;
  background:#E6E6E6;
}
.bar {
  @include gradient(#53B75F, #1B7726);
  height: 10px;
}

// crop
.preview_crop {display:none;overflow:hidden;img{max-width:none;}}
.crop_panel {
  margin:1em 0;
  #unhook {display:none;}
}

// trees
ol.sortable {
  margin: 0;
  padding: 0;
  width: 100%;
  li {
    width:100%;
    margin: 5px 0;
    vertical-align: middle;
    padding: 0;
  }
  ol {margin: 0 0 0 30px;padding: 0;}
  div {
    cursor: move;
    background-color: #F8F8F8;
    width:100%;
    vertical-align: middle;
    padding: 5px 0;
    position: relative;
    border:1px solid #000;
    @include radius(7px);
    a {position: relative;}

    a.title {margin-left: 30px;}
    a.expand {
      &.plus:after {content:"+";}
      &.minus {
        &:after {content:"-";}
        padding: 0 5px 2px 5px;
      }
      margin-left: 10px;
      font-size: 15px;
      font-weight: bold;
      background-color: $deepgreen;
      display: inline-block;
      padding: 0 4px 2px 4px;
      color: #FFF;
      &:hover{color: #FFF;}
      &.non-display {display:none;}
      @include radius(10px);
    }
    .toggleshow {position: relative;margin-left: 5px;display: inline-block;width: 12px;height: 12px;}
    a.del {margin-right: 10px;}
    .icon-large{font-size: 1.2em;position: absolute;left: 0;top: 0;}

    .del {float: right;min-width:30px;}
    &:hover {background-color:#C4FFCB;border:1px dashed green;}
  }
}
.ui-nestedSortable-error {background:#fbe3e4; border:1px dashed red;}
.placeholder {background-color: #C4FFCB; border:1px dashed green;@include radius(7px);}
.ui-sortable-placeholder {background-color: #C4FFCB !important;height:2.6em;visibility:visible !important;}

#accordion {
  h1,h2,h3,h4 {
    cursor:pointer;
    &:hover {color:$a_hover_color;}
  }
}
.login {
  #main, #page {
    .actions {margin-top: 0.5em; }
    padding-bottom: 1em; 
  }
}
.admin_mini {
  width: 160px;
  height: 100px;
}