html, body{color:#193440}
.page-header{color:white;background-color:#8fb5ce}
.page-header .navigation.main-nav a{background:url(../images/30-3E547A-242E42.png) repeat-x #242E42;color:white}
.page-header .navigation.main-nav li.current a{  color:#222;  background:url(../images/30-DBE1E5-FCFEF5.png) repeat-x #FCFEF5;  border-top:1px solid white;  border-left:1px solid white;  border-right:1px solid white}
.page-header .navigation.main-nav a:hover{background:#193440}
.section.content{background:#B5CE8F}
.button{color:white;background:#5B8BA0}
.button:hover{background-color:#193440}
.add-to-collection{background:#E6E7DE}
.aside{background:#E5E5E5}

/* Column Layout */
.section-group{display:table;width:100%}
.section-group-inner{display:table-row}
.section-group-inner > *{display:table-cell;vertical-align:top}
.aside{width:210px} /* works with % too */
.aside{padding:20px}

body{width:960px;margin:0 auto 20px;font:12px "Lucida Grande", "Trebuchet MS", Arial, sans-serif;line-height:18px}
h1, h2, h3{font-weight:normal}
h1{margin:20px 0 10px;font-size:22px;line-height:22px}
h2{margin:15px 0 10px;font-size:18px;line-height:18px}
h3{margin:10px 0 5px;font-size:16px;line-height:16px}
h4{margin:10px 0 5px;font-size:14px;line-height:14px}
h5{margin:10px 0 5px;font-size:12px;line-height:12px}
h6{margin:10px 0 5px;font-size:10px;line-height:10px}
li{margin-left:20px}
a{border-bottom:1px dotted #ccc;color:#222;background:#fafafa;text-decoration:none}
a:hover{border-bottom:1px dotted #aaa;/*color:black;*/
background:#f2f2f2}
h1 a, h2 a, h3 a{border:none;background:none}
pre, code{    font-family:"Courier New", Courier, monospace}
input.text, input.string, input.email-address, input.password, input.search, input.integer, input.float, textarea{border-top:1px solid #7c7c7c;border-left:1px solid #c3c3c3;border-right:1px solid #c3c3c3;border-bottom:1px solid #ddd;background:#fff url(../images/fieldbg.gif) repeat-x top;font-size:1.1em;line-height:1.3em}
input.file_upload{border:1px dotted #666}
.button{padding:6px 10px;border:none;    width:auto;font-size:11px;font-weight:bold;margin-top:10px}
.button:hover{cursor:pointer}
form .actions{_zoom:1;overflow:hidden;font-size:11px}
form .actions input{margin:0}
.flash{margin:0 40px 10px;padding:10px 30px;border-width:2px 0;color:white}
.flash.notice{background:white;color:#4E6A8F}
.flash.error{background:#BC1C3D}
.section.with-flash{padding:20px 0}

/* rails error message */
.error-messages{background:#BC1C3D;border:1px solid #900024;padding:15px 30px;color:white;margin-bottom:20px}
.error-messages h2{color:white;margin-top:0;padding-bottom:0;font-size:16px}
.error-messages li{margin-left:20px;list-style:square}
.field-with-errors input, .field-with-errors textarea, .field-with-errors select{border:2px solid #BC1C3D}
#ajax-progress{padding:8px 20px 8px 40px;border:1px solid #444;background:black url(../images/spinner.gif) no-repeat 10px 8px;color:white}
.field-list th{width:120px;white-space:nowrap}
.field-list td{width:auto}
.field-list .input-help{color:darkgreen}
.content-header, .content-body, .content-footer{margin:0 45px 15px;padding:0}
.content-header{padding:5px 0} 
.content-body{padding:0px 0}
.content-footer{padding-bottom:20px}
.page-header{margin-top:25px;padding:0 0 0}
.page-header h1{margin:0;padding:20px 30px 30px;font-family:"Arial Black", Tahoma, Arial, sans-serif;font-size:36px;letter-spacing:-1.5pt}
.page-header ul{zoom:1;overflow:hidden}
.page-header li{float:left;margin-left:0;list-style:none}
.page-header h1 a, 
.page-header h1 a:hover
{border:none;color:white;background:none}

.page-header div.search{ float:right; padding:0 30px 8px 15px; }
.page-header div.search label{padding-right:10px;font:bold 9px Arial, sans-serif;text-transform:uppercase;letter-spacing:1.0pt}
.page-header div.search input{font-size:15px}
#search-results-panel{position:absolute;top:122px;right:25px;z-index:50;width:350px;height:450px;overflow:auto;padding:0 20px 20px;border:1px solid #ddd;color:black;background:#f2f2f2}
#search-results-panel .card.linkable a{color:black}
#search-spinner{background:black;border:1px solid #666666;opacity:0.6;padding:2px;position:absolute;right:4px;top:6px}

.main-nav{padding:0 30px}
.main-nav li{margin-right:2px}
.page-header .main-nav a{display:block;padding:5px 10px 7px;font-size:11px;font-weight:bold}

.account-nav{    float:right;    margin:-22px 5px 0 0;font-size:11px}
.account-nav li{float:left;margin-left:0;padding-left:20px;color:#ddd;list-style:none}
.account-nav a{font-weight:bold}
.account-nav a:hover{border-bottom:1px dotted #ddd}

.user-account-page .change-password{width:350px}
.user-account-page .change-password th{width:150px}

.page-footer{padding:5px;font-size:11px;margin-top:100px;border-top:1px dotted black}
.page-footer li{margin-left:0;margin-top:4px}

/* pagination nav, needs a more specific class on the wrapper */
.content-body .nav{margin-bottom:10px;font-size:11px}
.content-body .nav a{margin-right:5px}

.login-page, .forgot-password-page{width:470px;margin-top:40px}
.login-page .content-header{padding-bottom:0}
.login-page .field-list{width:370px}
.login-page form .actions{text-align:left;margin:0;padding:10px 0 10px 160px}
.signup-page .field-list{width:370px}
.signup-page .content-body, .signup-page .content-header{margin-left:120px;margin-right:120px}
.login-page .field-list td, .signup-page .field-list td{width:auto}
.login-page .field-list th, .signup-page .field-list th{width:150px !important;width:150px}
.login-page .content-header{position:relative}
.login-page .forgot-password{font-size:11px;margin-left:160px}

.edit-page .content-header{overflow:hidden;_zoom:1}
.edit-page .content-header h1{float:left}
.edit-page .content-header .delete-button{float:right;margin-top:25px}
form .actions{margin:30px 0;width:100%;text-align:center}

.show-page .content-header{position:relative;border-bottom:1px dotted #888}
.show-page .content-header h1, .new-in-collection-page .content-header h1{margin-bottom:2px;margin-right:70px}
.show-page .content-header a.edit-link{position:absolute;top:30px;right:0}
.aside-content .collection{padding-bottom:10px}

.content-header .creation-details{font-size:11px;line-height:11px}
.content-header .creator{margin-right:15px}
.content-header .created-at{color:#444}

.new-in-collection-page .content-header h2{margin-top:6px;font-size:14px}
.new-in-collection-page .content-header h2, .new-in-collection-page .content-header h2 a{color:#222}

.add-to-collection{padding:20px 30px;margin-top:20px}
.collection-section .add-to-collection h3{margin:0 0 20px;padding:0;border-bottom:none}
.add-to-collection form .submit-button{margin:10px 5px 5px 125px}
.add-to-collection .actions{text-align:left;margin-top:0;margin-bottom:0}

/* styling of generic elements */
.creator{font-weight:bold}
.card{overflow:hidden;_zoom:1;margin:10px 0;padding:12px;border:1px solid #e8e8e8;background:#f5f5f5;position:relative}
.card h4{margin-top:0}
.card a{background:#f5f5f5}
.card .creation-details{display:block;color:#333;font-size:11px}
.card .datetime{color:#666}
.card .actions{position:absolute;right:10px;top:10px}
div.ordering-handle{float:left;background:white;color:black;margin-right:5px;cursor:move;padding:0 2px}

.card.content.with-owner{padding:0;margin:10px 0 30px;border:none;background:none;font-size:11px}
.card.content .creation-details{float:left;width:28%;line-height:14px}
.card.content .creation-details .created-at{display:block}
.card.content.with-owner .content{float:right;width:72%}
ul.collection > li{margin-left:0;list-style:none}
.empty-collection-message{margin-top:20px}

.new-link{margin-top:20px}

.collection-section h3{padding:15px 0;margin-bottom:20px;border-bottom:1px dotted #888}

.table-plus .header{_zoom:1;overflow:hidden}
.table-plus .header a{float:left;margin-right:20px}
.table-plus div.search{float:right;margin-top:-5px}
.table-plus div.search span{color:#444}
.table-plus div.search input.search{margin:0 5px}
.table-plus div.search .button{padding:2px 4px}

.table-plus table{width:100%;margin:20px 0;background-color:white}
.table-plus table th{padding:2px 10px;color:white;background:#444;font-weight:bold;font-size:10px}
.table-plus table th a{color:white}
.table-plus table td{padding:6px 10px;border-bottom:1px solid #e2e2e2;color:#666}
.table-plus table td input.button, .collection .button{margin-top:0}
.table-plus table td.controls{width:100px}
.table-plus .even{background:#f8f8f8}
.table-plus a{background:none}

/* <select-many> */
div.select-many{border-top:1px dotted #999}
div.select-many .items{margin-bottom:10px}
div.select-many .item{overflow:hidden;_zoom:1;font-weight:bold;border-bottom:1px dotted #999;padding:5px 10px;/*margin:5px 25px 5px 0;*/}
div.select-many .item span{float:left}
div.select-many .item .remove-item{float:right}

/* <live-search> */
#search-results-panel{posiion:relative}
#search-results-panel .close-button{cursor:pointer;text-decoration:underline;position:absolute;top:3px;right:6px}

/* these styles are for the generated front index page */
/* you can delete them if you over-ride it             */
.front-page .welcome-message{padding:10px 20px 20px;border:1px solid #8fb5ce;color:#222;background-color:#fff}
.front-page .welcome-message h2{font-size:18px;line-height:27px}
.front-page ul.models li{margin-left:0;list-style:none}

ul.input-many{list-style-type:none}
ul.input-all{list-style-type:none}

ul.input-many > li{overflow:hidden;zoom:1}
ul.input-many .input-many-item{float:left}
ul.input-many div.buttons{float:left;margin-left:10px}
li.input-many-template{display:none}

ul.check-many{list-style-type:none;margin-left:0px}
ul.check-many li input{vertical-align:-20%}

/* rapid-summary */
table.app-summary{border:1px solid;border-collapse:collapse}
table.app-summary td{padding:2px;border:1px dotted #bbb}
table.app-summary th{padding:2px;border-bottom:1px solid;background:#acd3e6}