app/assets/stylesheets/lolita/style.css.erb in lolita-3.4.3 vs app/assets/stylesheets/lolita/style.css.erb in lolita-4.0.0
- old
+ new
@@ -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);}
+/* ----------------------------------------------*/