lolita 3.4.3 → 4.0.0

data/app/assets/stylesheets/lolita/style.css.erb

@@ -1,553 +1,554 @@
-html,body{
-  height: 100%;
-}
-*:focus {outline: none;}
-body {background: #f3f3f3; font-size: 13px;}
-
-a, a:visited, a:active {color: #7ac1ed; text-decoration: none;}
-h1 {font-size: 28px; font-weight: normal; letter-spacing: -1px; line-height: 85px;}
-input[type="button"] {vertical-align: top; padding: 3px 9px;}
-.placeholder {color: #aaa;}
-::placeholder {color: #aaa;}
-:-moz-placeholder {color: #aaa;}
-::-webkit-input-placeholder {color: #aaa;}
-
-#container {
-  width: 90%;
-  min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -30px;
-}
-#container:before{ /* Opera and IE8 "redraw" bug fix */
-  content:"";
-  float:left;
-  height:100%;
-  margin-top:-999em;
-}
-
-/* colors */
-.semi-dark{
-  color: #737373;
-}
-.light-dark{
-   color:#d5d5d5;
-}
-.light{
-  color:#F1F1F1
-}
-
-/* same button styles for links and both types of html buttons */
-button, a.button, input[type="button"] {
-  padding: 4px 10px; 
-  border: none; 
-  font-size: 13px;
-  text-decoration: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box; 
-}
-a.button {padding: 4px 11px; color: #8f8f8f;}
-/* ----------------------------------------------*/
-
-/* header styles */
-header {position: relative; height: 85px;}
-header h1 {padding-left: 15px;}
-header nav {position: absolute; top: 10px; right: 0;}
-header nav .username {margin-right: 15px;}
-/* ----------------------------------------------*/
-
-/* vertical middle container */
-
-#main {position: relative; padding-left: 150px; margin-bottom: 50px;} /* setting the left portion width for navigation */
-
-/* ---------------------------------------------- */
-
-/* form styles */
-
-#main .box form {background: #FFF; padding: 30px 25px;}
-#main .box form input {background: #FFF;}
-#main .box form label {color: #c3c3c3; font-size: 13px;}
-#main .box form select {min-width: 150px;}
-#main .box form .field_date_time select, #main .box form .field_time select,#main .box form .field_date select {min-width: 0px;}
-#main .box form .field {margin: 10px 0; overflow: hidden;}
-#main .box form .field:first-child input {
-  font-size: 24px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  padding: 5px 10px;
-}
-#main .box form .field_string,
-#main .box form .field_integer,
-#main .box form .field_big_decimal,
-#main .box form .field_array { margin-top: 17px;}
-#main .box form .field-value { margin-top: 5px;}
-#main .box form .field-value input, #main .box form .field-value textarea {
-  border: 1px solid #cdcdcd;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 3px 10px;
-  width: 100%;
-  color: #494949;
-}
-#main .box form .field-value input:focus {background: #ebf9fc;}
-#main .box form .field-value textarea {
-  width: 100%; 
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;  /* IE7 does not support it, IE8 does */
-}
-
-/* for checkboxes */
-#main .box form .field_boolean { margin-top: 17px; }
-#main .box form .field_boolean .field-value { margin-top: 0; }
-#main .box form .field_boolean .field-value input { width: auto; }
-/* ----------------------------------------------*/
-
-/* nested forms */
-
-#main .box form .nested_form {margin: 10px 0;}
-#main .box form .nested_form label {display: block; margin-bottom: 5px;}
-#main .box form .nested_form .fields {
-  margin: 5px 0 5px 50px; 
-  padding-bottom: 5px;
-  border-bottom: 1px dashed #DDD;
-}
-#main .box form .nested_form.simple .nested-form-fields-container{
-  max-height: 100px;
-  overflow: auto;
-}
-#main .box form .nested_form p {margin-left: 50px;}
-#main .box form .nested_form input {
-  border: 1px solid #cdcdcd;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 2px 5px;
-  color: #494949;  
-}
-
-#main .box form .nested_form .field_boolean label { margin-bottom: 0; }
-
-/* -------------------------------- */
-
-/* autocomplete field*/
-
-.autocomplete-container ul {
-	margin-left: 30px;
-}
-.autocomplete-container ul li {
-	list-style-type: none;
-	margin: 5px 0;
-	padding-bottom: 5px;
-	border-bottom: 1px dashed #DDD;
-  overflow: hidden;
-}
-.autocomplete-container ul li a {
-  float: right;
-}
-.ui-menu .ui-menu-item a {
-	font-size: 10px;
-}
-
-/* -------------------------------- */
-
-/* error fields and notifications */
-
-#main .box form .field_with_errors input,
-#main .box form .field_with_errors textarea {background: #ffe6e7;}
-.inline-errors {padding-top: 3px; color:#F66; font-size: 110%;}
-.errorExplanation {color:#F66; font-size: 110%; padding:25px 25px 0; background:white;}
-
-.nested_form .fields .field_with_errors {display: inline;}
-
-#flash {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%; 
-  padding: 25px 0; 
-  background: #fff;
-  background: rgba(255,255,255,0.9);
-  font-size: 16px;
-  text-align: center;
-  cursor: pointer;
-  z-index: 5;
-}
-
-/* ---------------------------------- */
-
-/* save box */
-
-#main .box .save {padding: 20px 10px;}
-#main .box .last-save {color: #808080; margin-bottom: 5px;}
-#main .box .save button {
-  width: 100%;
-  padding: 10px 0;
-  font-size: 24px;
-  background: #AB8DEF;
-  color: #FFD;
-  margin-bottom: 10px;
-  line-height: 24px;
-}
-#main .box .save button.small {
-  font-size: 16px;
-  line-height: 20px;
-  padding: 5px 0;
-}
-#main .box .save button:active {position: relative; top: 1px;}
-
-/* ---------------------------------- */
-
-
-/* navigation styles on left */
-
-#main nav {position: absolute; left: 0; width: 150px; margin-top: 5px;} /* width just for now */ 
-#main nav ul {margin-bottom: 50px;}
-#main nav ul.subtree{margin-bottom: 0px;}
-#main nav ul li a {display: block; padding: 10px 15px; color: #737373;}
-#main nav ul li.active a {
-  background: #d9d9d9; 
-  background: -moz-linear-gradient(left, #e1e1e1, #d5d5d5);
-  background: -webkit-linear-gradient(left, #e1e1e1, #d5d5d5);
-  border: 2px solid #d5d5d5; 
-  border-right: none;
-  -moz-border-radius: 5px 0 0 5px;
-  -webkit-border-radius: 5px 0 0 5px;
-  border-radius: 5px 0 0 5px;
-}
-#main nav ul li.with-subtree a{
-  border-radius: 5px 0 0 0;
-}
-#main nav ul li.active ul.subtree a{
-  background: #fff; 
-  background: -moz-linear-gradient(left, #fff, #fff);
-  background: -webkit-linear-gradient(left, #fff, #fff); 
-  border: 1px solid #f9f9f9; 
-  border-radius: 0 0 0 0;
-}
-#main nav ul li.active ul.subtree li.last-in-subtree a{
-  border-radius: 0 0 0 5px;
-}
-/* --------------------------------------------- */
-
-/* main content part */
-
-#content {overflow: visible; position: relative;} /* overflow for clearing containing floats */
-#content .secondary {position: absolute; right: 0; width: 23%;}
-#content.with-secondary {padding-right: 25%;}
-
-/* --------------------------------------------- */
-
-footer {
-  height: 30px;
-  text-align: right;
-  width:90%;
-  clear:both;
-  margin: 0 auto;
-} 
-.push{
-  padding-bottom: 30px;
-}
-/* for not leaving empty space in bottom */
-#powered{
-  font-size: 11px;
-  margin-right:10px;
-}
-
-/* boxes that, possibly, will be draggable/droppable */
-
-#main .box { /* list-container for small/big bordered box that takes all available parent width */ 
-  border: 5px solid #d5d5d5;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  margin-bottom: 10px;
-} 
-
-.boxtitle {position: relative; z-index: 2} 
-.boxtitle h1 {padding: 35px 25px 15px; line-height: 1; cursor: pointer;}
-.boxtitle h2.title {position:relative;font-weight: normal;font-size: 28px;float: left;padding: 35px 25px 15px; line-height: 1; cursor: pointer;} /* h1 contains bgcolor, color and text position because arrow needs different bg and it follows after */
-.boxtitle h2.title .arrow{ display:none; }
-.boxtitle h2.title.active .arrow{ display:block;}
-
-.boxtitle .arrow {
-  position: absolute;
-  left: 50%;
-  border-color: #2f2f2f transparent transparent;
-  border-style: solid;
-  border-width: 10px 10px 0;
-  margin-left: -10px;
-}
-.boxtitle .title .arrow{
-  left: 50%;
-  margin-left: -10px;
-  bottom: -10px;
-}
-
-.boxtitle.grey .arrow {
-  border-color: #e2e2e2 transparent transparent;
-}
-
-#main .tabs .tab {display: none;}
-#main .tabs .tab.active {display: block;}
-
-#main .tab.box.default {border: none;} /* styles for not-on-top grey boxes */
-#main .tab.box.default .boxtitle {
-  border-radius: 5px 5px 0 0;
-  -moz-border-radius: 5px 5px 0 0;
-  -webkit-border-radius: 5px 5px 0 0;
-}
-#main .tab.box.default form {
-  border: 5px solid #e2e2e2; 
-  border-top: none;
-  border-radius: 0 0 5px 5px;
-  -moz-border-radius: 0 0 5px 5px;
-  -webkit-border-radius: 0 0 5px 5px;
-}
-
-
-#main .tab.box.minimized .boxtitle {
-  border-radius: 5px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  height: 50px;
-}
-#main .tab.box.minimized .boxtitle h1 {font-size: 16px; line-height: 50px; padding: 0 0 0 15px;}
-#main .tab.box.minimized .boxtitle .arrow {display: none;}
-#main .tab.box.minimized form {display: none;}
-
-/* ----------------------------------------------*/
-
-/* different colors*/
-.black {
-  background: #2f2f2f;
-  background: -moz-linear-gradient(top, #686868, #2f2f2f);
-  background: -webkit-linear-gradient(top, #686868, #2f2f2f);
-}
-.black, a.black {color: #f1f1f1;}
-.grey {
-  background: #ededed; /* for IE, Opera */
-  background: -moz-linear-gradient(top, #e4e4e4, #e2e2e2);
-  background: -webkit-linear-gradient(top, #e4e4e4, #e2e2e2);
-}
-.grey, a.grey {color: #8f8f8f;}
-/* --------------------------------------------- */
-
-/* list view styles */
-.tools {overflow: hidden; line-height: 50px; height: 50px; padding-left: 25px; padding-top: 10px;}
-.tools .actions {float: left;}
-.tools .filters {float: right;}
-.tools > div > * {margin-right: 10px;}
-
-a.create {
-  position: relative;
-  display: block;
-  z-index: 1;
-  background: #9d81f8;
-  background: -moz-linear-gradient(top, #ae91eb, #9d81f8);
-  background: -webkit-linear-gradient(top, #ae91eb, #9d81f8);
-  padding-right: 30px;
-  line-height: 37px; 
-  text-align: right;
-  color: #efefef;
-}
-.create img {position: absolute; right: -18px;}
-
-.list {overflow-x: auto;} /* additional html element that encloses table for horizontal overflow scrollbar if too wide */
-.list table {width: 100%;}
-.list table td,
-.list table th {line-height: 35px; padding: 0 20px; white-space: nowrap;}
-.list table td input {vertical-align: middle;}
-.list table thead {background: #d5d5d5;}
-.list table thead th {text-align: left;}
-.list table thead th {font-weight:normal;}
-.list table thead th a {color: #a5a5a5;}
-.list table thead th.active a {color: #6c6c6c;} /* Style for active header */
-.list table tbody tr {border-bottom: 1px solid #e3e3e3;}
-.list table tbody tr:last-child {border-bottom: none;} /* CSS3 selector for now, may be enough */
-.list table tbody tr:hover { /* Style was for in-place editing, using now on hover for demonstration purposes */
-  background: #ebf9fc;
-  -moz-box-shadow: inset 0px 1px 1px #ddd;
-  -webkit-box-shadow: inset 0px 1px 1px #ddd;
-  box-shadow: inset 0px 1px 1px #ddd;
-} 
-.list table tbody tr .tool-cell {width: 5%;}
-.list table tbody tr .tool-cell a {visibility: hidden; margin-right: 5px;}
-.list table tbody tr:hover .tool-cell a {visibility: visible;}
-
-.list table td a:active {position: relative; top: 1px;}
-
-/*nested list*/
-.nested-list .list table thead tr:hover,
-.list table tbody tr.nested-list:hover{
-  background: transparent;
-  box-shadow: none;
-}
-tr.nested-list td{
-  padding: 0 0 0 20px;
-}
-#main .box.nested-list{
-  border: none;
-}
-
-/* search in list view */
-
-#main .boxtitle .black .search {
-	position: absolute;
-	right: 15px;
-	top: 25px;
-	background: none;
-	padding: 0;
-}
-#main .boxtitle .black .search input {
-	font-size: 13px;
-	background: #fff url(<%= asset_data_uri "lolita/search_icon.png" %>) no-repeat 5px center;
-	padding: 0 10px 0 18px;
-	border: 1px solid #ccc;
-	border-radius: 10px;
-	-moz-border-radius: 10px;
-	-webkit-border-radius: 10px;
-	height: 20px;
-	line-height: 20px\9;
-}
-
-/* -------------------------------------------------------------------------------- */
-
-/* filter in list view */
-
-#main form.filter {
-  padding: 10px 20px;
-}
-#main .filter div.field {
-  display: inline-block;
-  margin-right: 10px;
-}
-#main .box form.filter .field {
-	overflow: inherit;
-}
-.filter button[type='submit'] {
-	float: right;
-	margin-top: 8px;
-}
-/* --------------------------------------------- */
-
-/* Pagination */
-
-#main nav.pagination {
-  width: 100%;
-  margin-top: 20px;
-  text-align: center;
-  position: absolute;
-}
-#main .nested-list nav.pagination{
-  position:relative;
-}
-#main nav.pagination span.current,
-#main nav.pagination span.page a {
-  display: inline-block;
-  min-width: 25px; height: 25px; line-height: 25px;
-  font-size: 13px;
-  border: 1px solid #d5d5d5;
-  padding: 0 5px;
-}
-#main nav.pagination span.page a:hover {background: #d5d5d5;}
-#main nav.pagination span.current {background: #9d81f8; color: #fff;}
-#main nav.pagination span.first,
-#main nav.pagination span.prev {margin-right: 5px}
-#main nav.pagination span.next,
-#main nav.pagination span.last {margin-left: 5px;}
-
-/* --------------------------------------------- */
-
-/* TinyMCE advanced theme's skin "Cirkuit" overrides */
-
-#content .cirkuitSkin table.mceLayout {
-  border: 0;
-}
-#content .cirkuitSkin td.mceToolbar {
-  -moz-border-radius: 5px 5px 0 0;
-  -webkit-border-radius: 5px 5px 0 0;
-  border-radius: 5px 5px 0 0;
-  border: 1px solid #ebebeb;
-  background: #ededed; /* for IE, Opera */
-  background: -moz-linear-gradient(top, #ededed, #e2e2e2);
-  background: -webkit-linear-gradient(top, #ededed, #e2e2e2);
-  padding: 10px;
-}
-#content .cirkuitSkin .mceIframeContainer {
-  border: 1px solid #ebebeb;
-  border-top: 0;
-}
-#content .cirkuitSkin .mceIframeContainer iframe {
-  padding: 10px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box; /* IE7 does not support it, IE8 does */
-}
-.habtm-container{
-  float:left;
-  margin-bottom: 3px;
-}
-.habtm-container label{
-  float:right;
-  color: #666 !important;
-  width: 150px;
-}
-.habtm-container input{
-  width:30px !important;
-  float:left;
-  margin-right: 5px;
-}
-.clear{
-  clear:both;
-}
-/* --------------------------------------------- */
-
-
-/* IE7 fixes */
-.ie7 #main .box,
-.ie7 #main nav ul li.active a, 
-.ie7 button, a.button, input[type="button"],
-.ie7 #main .box form .field-value input, 
-.ie7 #main .box form .field-value textarea,
-.ie7 .black,
-.ie7 #flash
-{behavior: url(/stylesheets/lolita/PIE-custom.htc)}
-.ie7 #main .box form .field-value input, 
-.ie7 #main .box form .field-value textarea
-{position: relative;}
-.ie7 #main .box a.create {zoom: 1}
-.ie7 #main nav {zoom: 1}
-.ie7 #main nav ul {zoom: 1}
-.ie7 #main nav ul li {zoom: 1}
-.ie7 #main nav ul li a {zoom: 1}
-.ie7 a.create img {top: 0;}
-.ie7 header nav a.username {position: relative; top: -4px;}
-.ie7 .black {-pie-background: linear-gradient(top, #686868, #2f2f2f);}
-.ie7 #flash {-pie-background: rgba(255,255,255,0.9);}
-/* ----------------------------------------------*/
-
-/* IE8 fixes */
-.ie8 #main .box,
-.ie8 #main nav ul li.active a, 
-.ie8 button, a.button, input[type="button"], 
-.ie8 #main .box form .field-value input, 
-.ie8 #main .box form .field-value textarea,
-.ie8 .black,
-.ie8 #flash
-{behavior: url(/stylesheets/lolita/PIE.htc)}
-.ie8 #main .box form .field-value input, 
-.ie8 #main .box form .field-value textarea
-{position: relative;}
-.ie8 .black {-pie-background: linear-gradient(top, #686868, #2f2f2f);}
-.ie8 #flash {-pie-background: rgba(255,255,255,0.9);}
-/* ----------------------------------------------*/
+html,body{
+  height: 100%;
+}
+*:focus {outline: none;}
+body {background: #f3f3f3; font-size: 13px;}
+
+a, a:visited, a:active {color: #7ac1ed; text-decoration: none;}
+h1 {font-size: 28px; font-weight: normal; letter-spacing: -1px; line-height: 85px;}
+input[type="button"] {vertical-align: top; padding: 3px 9px;}
+.placeholder {color: #aaa;}
+::placeholder {color: #aaa;}
+:-moz-placeholder {color: #aaa;}
+::-webkit-input-placeholder {color: #aaa;}
+
+#container {
+  width: 90%;
+  min-height: 100%;height: auto !important;height: 100%;margin: 0 auto -30px;
+}
+#container:before{ /* Opera and IE8 "redraw" bug fix */
+  content:"";
+  float:left;
+  height:100%;
+  margin-top:-999em;
+}
+
+/* colors */
+.semi-dark{
+  color: #737373;
+}
+.light-dark{
+   color:#d5d5d5;
+}
+.light{
+  color:#F1F1F1
+}
+
+/* same button styles for links and both types of html buttons */
+button, a.button, input[type="button"] {
+  padding: 4px 10px; 
+  border: none; 
+  font-size: 13px;
+  text-decoration: none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; 
+}
+a.button {padding: 4px 11px; color: #8f8f8f;}
+/* ----------------------------------------------*/
+
+/* header styles */
+header {position: relative; height: 85px;}
+header h1 {padding-left: 15px;}
+header nav {position: absolute; top: 10px; right: 0;}
+header nav .username {margin-right: 15px;}
+/* ----------------------------------------------*/
+
+/* vertical middle container */
+
+#main {position: relative; padding-left: 150px; margin-bottom: 50px;} /* setting the left portion width for navigation */
+
+/* ---------------------------------------------- */
+
+/* form styles */
+
+#main .box form {background: #FFF; padding: 30px 25px;}
+#main .box form input {background: #FFF;}
+#main .box form label {color: #c3c3c3; font-size: 13px;}
+#main .box form select {min-width: 150px;}
+#main .box form .field_date_time select, #main .box form .field_time select,#main .box form .field_date select {min-width: 0px;}
+#main .box form .field {margin: 10px 0; overflow: hidden;}
+#main .box form .field:first-child input {
+  font-size: 24px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  padding: 5px 10px;
+}
+#main .box form .field_string,
+#main .box form .field_integer,
+#main .box form .field_big_decimal,
+#main .box form .field_array { margin-top: 17px;}
+#main .box form .field-value { margin-top: 5px;}
+#main .box form .field-value input, #main .box form .field-value textarea {
+  border: 1px solid #cdcdcd;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 3px 10px;
+  width: 100%;
+  color: #494949;
+}
+#main .box form .field-value input:focus {background: #ebf9fc;}
+#main .box form .field-value textarea {
+  width: 100%; 
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;  /* IE7 does not support it, IE8 does */
+}
+
+/* for checkboxes */
+#main .box form .field_boolean { margin-top: 17px; }
+#main .box form .field_boolean .field-value { margin-top: 0; }
+#main .box form .field_boolean .field-value input { width: auto; }
+/* ----------------------------------------------*/
+
+/* nested forms */
+
+#main .box form .nested_form {margin: 10px 0;}
+#main .box form .nested_form label {display: block; margin-bottom: 5px;}
+#main .box form .nested_form .fields {
+  margin: 5px 0 5px 50px; 
+  padding-bottom: 5px;
+  border-bottom: 1px dashed #DDD;
+}
+#main .box form .nested_form.simple .nested-form-fields-container{
+  max-height: 100px;
+  overflow: auto;
+}
+#main .box form .nested_form p {margin-left: 50px;}
+#main .box form .nested_form input {
+  border: 1px solid #cdcdcd;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 2px 5px;
+  color: #494949;  
+}
+
+#main .box form .nested_form .field_boolean label { margin-bottom: 0; }
+
+/* -------------------------------- */
+
+/* autocomplete field*/
+
+.autocomplete-container ul {
+	margin-left: 30px;
+}
+.autocomplete-container ul li {
+	list-style-type: none;
+	margin: 5px 0;
+	padding-bottom: 5px;
+	border-bottom: 1px dashed #DDD;
+  overflow: hidden;
+}
+.autocomplete-container ul li a {
+  float: right;
+}
+.ui-menu .ui-menu-item a {
+	font-size: 10px;
+}
+
+/* -------------------------------- */
+
+/* error fields and notifications */
+
+#main .box form .field_with_errors input,
+#main .box form .field_with_errors textarea {background: #ffe6e7;}
+.inline-errors {padding-top: 3px; color:#F66; font-size: 110%;}
+.errorExplanation {color:#F66; font-size: 110%; padding:25px 25px 0; background:white;}
+
+.nested_form .fields .field_with_errors {display: inline;}
+
+#flash {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%; 
+  padding: 25px 0; 
+  background: #fff;
+  background: rgba(255,255,255,0.9);
+  font-size: 16px;
+  text-align: center;
+  cursor: pointer;
+  z-index: 5;
+}
+
+/* ---------------------------------- */
+
+/* save box */
+
+#main .box .save {padding: 20px 10px;}
+#main .box .last-save {color: #808080; margin-bottom: 5px;}
+#main .box .save button {
+  width: 100%;
+  padding: 10px 0;
+  font-size: 24px;
+  background: #AB8DEF;
+  color: #FFD;
+  margin-bottom: 10px;
+  line-height: 24px;
+}
+#main .box .save button.small {
+  font-size: 16px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+#main .box .save button:active {position: relative; top: 1px;}
+
+/* ---------------------------------- */
+
+
+/* navigation styles on left */
+
+#main nav {position: absolute; left: 0; width: 150px; margin-top: 5px;} /* width just for now */ 
+#main nav ul {margin-bottom: 50px;}
+#main nav ul.subtree{margin-bottom: 0px;}
+#main nav ul li a {display: block; padding: 10px 15px; color: #737373;}
+#main nav ul li.active a {
+  background: #d9d9d9; 
+  background: -moz-linear-gradient(left, #e1e1e1, #d5d5d5);
+  background: -webkit-linear-gradient(left, #e1e1e1, #d5d5d5);
+  border: 2px solid #d5d5d5; 
+  border-right: none;
+  -moz-border-radius: 5px 0 0 5px;
+  -webkit-border-radius: 5px 0 0 5px;
+  border-radius: 5px 0 0 5px;
+}
+#main nav ul li.with-subtree a{
+  border-radius: 5px 0 0 0;
+}
+#main nav ul li.active ul.subtree a{
+  background: #fff; 
+  background: -moz-linear-gradient(left, #fff, #fff);
+  background: -webkit-linear-gradient(left, #fff, #fff); 
+  border: 1px solid #f9f9f9; 
+  border-radius: 0 0 0 0;
+}
+#main nav ul li.active ul.subtree li.last-in-subtree a{
+  border-radius: 0 0 0 5px;
+}
+/* --------------------------------------------- */
+
+/* main content part */
+
+#content {overflow: visible; position: relative;} /* overflow for clearing containing floats */
+#content .secondary {position: absolute; right: 0; width: 23%;}
+#content.with-secondary {padding-right: 25%;}
+
+/* --------------------------------------------- */
+
+footer {
+  height: 30px;
+  text-align: right;
+  width:90%;
+  clear:both;
+  margin: 0 auto;
+} 
+.push{
+  padding-bottom: 30px;
+}
+/* for not leaving empty space in bottom */
+#powered{
+  font-size: 11px;
+  margin-right:10px;
+}
+
+/* boxes that, possibly, will be draggable/droppable */
+
+#main .box { /* list-container for small/big bordered box that takes all available parent width */ 
+  border: 5px solid #d5d5d5;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+} 
+
+.boxtitle {position: relative; z-index: 2} 
+.boxtitle h1 {padding: 35px 25px 15px; line-height: 1; cursor: pointer;}
+.boxtitle h2.title {position:relative;font-weight: normal;font-size: 28px;float: left;padding: 35px 25px 15px; line-height: 1; cursor: pointer;} /* h1 contains bgcolor, color and text position because arrow needs different bg and it follows after */
+.boxtitle h2.title .arrow{ display:none; }
+.boxtitle h2.title.active .arrow{ display:block;}
+
+.boxtitle .arrow {
+  position: absolute;
+  left: 50%;
+  border-color: #2f2f2f transparent transparent;
+  border-style: solid;
+  border-width: 10px 10px 0;
+  margin-left: -10px;
+}
+.boxtitle .title .arrow{
+  left: 50%;
+  margin-left: -10px;
+  bottom: -10px;
+}
+
+.boxtitle.grey .arrow {
+  border-color: #e2e2e2 transparent transparent;
+}
+
+#main .tabs .tab {display: none;}
+#main .tabs .tab.active {display: block;}
+
+#main .tab.box.default {border: none;} /* styles for not-on-top grey boxes */
+#main .tab.box.default .boxtitle {
+  border-radius: 5px 5px 0 0;
+  -moz-border-radius: 5px 5px 0 0;
+  -webkit-border-radius: 5px 5px 0 0;
+}
+#main .tab.box.default form {
+  border: 5px solid #e2e2e2; 
+  border-top: none;
+  border-radius: 0 0 5px 5px;
+  -moz-border-radius: 0 0 5px 5px;
+  -webkit-border-radius: 0 0 5px 5px;
+}
+
+
+#main .tab.box.minimized .boxtitle {
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  height: 50px;
+}
+#main .tab.box.minimized .boxtitle h1 {font-size: 16px; line-height: 50px; padding: 0 0 0 15px;}
+#main .tab.box.minimized .boxtitle .arrow {display: none;}
+#main .tab.box.minimized form {display: none;}
+
+/* ----------------------------------------------*/
+
+/* different colors*/
+.black {
+  background: #2f2f2f;
+  background: -moz-linear-gradient(top, #686868, #2f2f2f);
+  background: -webkit-linear-gradient(top, #686868, #2f2f2f);
+}
+.black, a.black {color: #f1f1f1;}
+.grey {
+  background: #ededed; /* for IE, Opera */
+  background: -moz-linear-gradient(top, #e4e4e4, #e2e2e2);
+  background: -webkit-linear-gradient(top, #e4e4e4, #e2e2e2);
+}
+.grey, a.grey {color: #8f8f8f;}
+/* --------------------------------------------- */
+
+/* list view styles */
+.tools {overflow: hidden; line-height: 50px; height: 50px; padding-left: 25px; padding-top: 10px;}
+.tools .actions {float: left;}
+.tools .filters {float: right;}
+.tools > div > * {margin-right: 10px;}
+
+a.create {
+  position: relative;
+  display: block;
+  z-index: 1;
+  background: #9d81f8;
+  background: -moz-linear-gradient(top, #ae91eb, #9d81f8);
+  background: -webkit-linear-gradient(top, #ae91eb, #9d81f8);
+  padding-right: 30px;
+  line-height: 37px; 
+  text-align: right;
+  color: #efefef;
+}
+.create img {position: absolute; right: -18px;}
+
+.list {overflow-x: auto;} /* additional html element that encloses table for horizontal overflow scrollbar if too wide */
+.list table {width: 100%;}
+.list table td,
+.list table th {line-height: 35px; padding: 0 20px; white-space: nowrap;}
+.list table td input {vertical-align: middle;}
+.list table thead {background: #d5d5d5;}
+.list table thead th {text-align: left;}
+.list table thead th {font-weight:normal;}
+.list table thead th a {color: #a5a5a5;}
+.list table thead th.active a {color: #6c6c6c;} /* Style for active header */
+.list table tbody tr {border-bottom: 1px solid #e3e3e3;}
+.list table tbody tr:last-child {border-bottom: none;} /* CSS3 selector for now, may be enough */
+.list table tbody tr:hover { /* Style was for in-place editing, using now on hover for demonstration purposes */
+  background: #ebf9fc;
+  -moz-box-shadow: inset 0px 1px 1px #ddd;
+  -webkit-box-shadow: inset 0px 1px 1px #ddd;
+  box-shadow: inset 0px 1px 1px #ddd;
+} 
+.list table tbody tr .tool-cell {width: 5%;}
+.list table tbody tr .tool-cell a {visibility: hidden; margin-right: 5px;}
+.list table tbody tr:hover .tool-cell a {visibility: visible;}
+
+.list table td a:active {position: relative; top: 1px;}
+
+/*nested list*/
+.nested-list .list table thead tr:hover,
+.list table tbody tr.nested-list:hover{
+  background: transparent;
+  box-shadow: none;
+}
+tr.nested-list td{
+  padding: 0 0 0 20px;
+}
+#main .box.nested-list{
+  border: none;
+}
+
+/* search in list view */
+
+#main .boxtitle .black .search {
+	position: absolute;
+	right: 15px;
+	top: 25px;
+	background: none;
+	padding: 0;
+}
+#main .boxtitle .black .search input {
+	font-size: 13px;
+	background: #fff url(<%= asset_data_uri "lolita/search_icon.png" %>) no-repeat 5px center;
+	padding: 0 10px 0 18px;
+	border: 1px solid #ccc;
+	border-radius: 10px;
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	height: 20px;
+	line-height: 20px\9;
+}
+
+/* -------------------------------------------------------------------------------- */
+
+/* filter in list view */
+
+#main form.filter {
+  padding: 10px 20px;
+}
+#main .filter div.field {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+#main .box form.filter .field {
+  overflow: inherit;
+}
+.filter button[type='submit'] {
+  float: right;
+  margin-top: 8px;
+}
+/* --------------------------------------------- */
+
+/* Pagination */
+
+#main nav.pagination {
+  width: 100%;
+  margin-top: 20px;
+  text-align: center;
+  position: absolute;
+}
+#main .nested-list nav.pagination{
+  position:relative;
+}
+#main nav.pagination span.current,
+#main nav.pagination span.page a {
+  display: inline-block;
+  min-width: 25px; height: 25px; line-height: 25px;
+  font-size: 13px;
+  border: 1px solid #d5d5d5;
+  padding: 0 5px;
+}
+#main nav.pagination span.page a:hover {background: #d5d5d5;}
+#main nav.pagination span.current {background: #9d81f8; color: #fff;}
+#main nav.pagination span.first,
+#main nav.pagination span.prev {margin-right: 5px}
+#main nav.pagination span.next,
+#main nav.pagination span.last {margin-left: 5px;}
+
+/* --------------------------------------------- */
+
+/* TinyMCE advanced theme's skin "Cirkuit" overrides */
+
+#content .cirkuitSkin table.mceLayout {
+  border: 0;
+}
+#content .cirkuitSkin td.mceToolbar {
+  -moz-border-radius: 5px 5px 0 0;
+  -webkit-border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
+  border: 1px solid #ebebeb;
+  background: #ededed; /* for IE, Opera */
+  background: -moz-linear-gradient(top, #ededed, #e2e2e2);
+  background: -webkit-linear-gradient(top, #ededed, #e2e2e2);
+  padding: 10px;
+}
+#content .cirkuitSkin .mceIframeContainer {
+  border: 1px solid #ebebeb;
+  border-top: 0;
+}
+#content .cirkuitSkin .mceIframeContainer iframe {
+  padding: 10px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; /* IE7 does not support it, IE8 does */
+}
+.habtm-container{
+  float:left;
+  margin-bottom: 3px;
+}
+.habtm-container label{
+  float:right;
+  color: #666 !important;
+  width: 150px;
+}
+.habtm-container input{
+  width:30px !important;
+  float:left;
+  margin-right: 5px;
+}
+.clear{
+  clear:both;
+}
+/* --------------------------------------------- */
+
+
+/* IE7 fixes */
+.ie7 #main .box,
+.ie7 #main nav ul li.active a, 
+.ie7 button, a.button, input[type="button"],
+.ie7 #main .box form .field-value input, 
+.ie7 #main .box form .field-value textarea,
+.ie7 .black,
+.ie7 #flash
+{behavior: url(/stylesheets/lolita/PIE-custom.htc)}
+.ie7 #main .box form .field-value input, 
+.ie7 #main .box form .field-value textarea
+{position: relative;}
+.ie7 #main .box a.create {zoom: 1}
+.ie7 #main nav {zoom: 1}
+.ie7 #main nav ul {zoom: 1}
+.ie7 #main nav ul li {zoom: 1}
+.ie7 #main nav ul li a {zoom: 1}
+.ie7 a.create img {top: 0;}
+.ie7 header nav a.username {position: relative; top: -4px;}
+.ie7 .black {-pie-background: linear-gradient(top, #686868, #2f2f2f);}
+.ie7 #flash {-pie-background: rgba(255,255,255,0.9);}
+/* ----------------------------------------------*/
+
+/* IE8 fixes */
+.ie8 #main .box,
+.ie8 #main nav ul li.active a, 
+.ie8 button, a.button, input[type="button"], 
+.ie8 #main .box form .field-value input, 
+.ie8 #main .box form .field-value textarea,
+.ie8 .black,
+.ie8 #flash
+{behavior: url(/stylesheets/lolita/PIE.htc)}
+.ie8 #main .box form .field-value input, 
+.ie8 #main .box form .field-value textarea
+{position: relative;}
+.ie8 .black {-pie-background: linear-gradient(top, #686868, #2f2f2f);}
+.ie8 #flash {-pie-background: rgba(255,255,255,0.9);}
+/* ----------------------------------------------*/