/* WebTT template based on 960 Grid System (http://960.gs/) ----------------------------------------------- Grey Box Method - Layout CSS ----------------------------------------------- */ body { background: #000 ; background-image: url("http://www.ryzom.com/data/bg.jpg"); background-attachment:fixed; background-repeat: repeat-x; // border-top: 5px solid #000; margin-top: 5px; // color: #333; color: #ddd; font-size: 11px; padding: 0 0 40px; } /* anchors ----------------------------------------------- */ a { // color: #000; color: inherit; font-weight:bold; text-decoration: none; } a:hover { // color:#333; // text-decoration: underline; // text-shadow: #6374AB 0px 0px 2px; text-shadow: #84AFBD 0px 0px 2px; } /* 960 grid system container background ----------------------------------------------- */ .container_12, .container_16 { background: rgb(71,71,71); background: rgba(0,0,0, 0.6); border: 1px solid rgb(110,110,110); border: 1px solid rgba(255,255,255, 0.5); } /* headings ----------------------------------------------- */ h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.3em;} h2 {margin-top:1em;} h5 {font-size:1.2em;} h6 {font-size:1em; text-transform:uppercase;} h1 a { font-weight:normal; color: #ddd; } h1 a:hover { font-weight:normal; color: #ddd; } /* branding ----------------------------------------------- */ h1#branding { font-weight:normal; font-size:3em; text-align:left; background:#aaa; padding:.7em 1em; margin-bottom:0; } /* page heading ----------------------------------------------- */ h2#page-heading { font-weight:normal; padding:.5em; margin:0 0 10px 0; border-bottom:1px solid #ccc; } /* boxes ----------------------------------------------- */ .box { // background:rgb(210,210,210); // background:rgba(255,255,255,0.81); margin-bottom:20px; padding:10px 10px 1px 10px; // color: #333; color: #ddd; border: 1px solid rgb(71,71,71); border: 1px solid rgba(255,255,255,0.4); } .box h2 { font-size:1em; font-weight:normal; text-transform:uppercase; color:#fff; // background:#333; background:rgb(31,31,31); background:rgba(90,90,0,0.6); margin:-10px -10px 0 -10px; padding:6px 12px; } .box h2 a, .box h2 a.visible { // color:#fff; color: #ddd; // background:#333 url("../img/switch_minus.gif") 97% 50% no-repeat; background:url("../img/switch_minus.gif") 97% 50% no-repeat; background:url("../img/switch_minus.gif") 97% 50% no-repeat; display:block; padding:6px 12px; margin:-6px -12px; border:none; } .box h2 a.hidden, .box h2 a.hidden:hover { background-image: url("../img/switch_plus.gif"); } .box h2 a:hover { background-color:#111; } .menubox { padding:0px; color: #333; } .menubox .inbox { background:rgb(210,210,210); background:rgba(255,255,255,0.81); padding: 0px 10px 1px; } .inbox a { color: #000; } .menubox h2 { margin: 0px; } .menubox h2 a, .menubox h2 a.visible { background:rgb(31,31,31) url("../img/switch_minus.gif") 97% 50% no-repeat; background:rgba(90,90,0,0.6) url("../img/switch_minus.gif") 97% 50% no-repeat; } .menubox h2 a:hover { background-color:#111; } .grid_4 .box h2 a { background-position: 97% 50%; } .grid_5 .box h2 a { background-position: 98% 50%; } .grid_12 .box h2 a { background-position: 99% 50%; } .block { padding-top:10px; } div.menu { padding:0; } div.menu h2 { margin:0; } div.menu .block { padding-top:0; } /* paragraphs, quotes and lists ----------------------------------------------- */ p { margin-bottom:1em; } blockquote { font-family: Georgia, 'Times New Roman', serif; font-size:1.2em; padding-left:1em; border-left:4px solid #ccc; } blockquote cite { font-size:.9em; } ul, ol { padding-top:0; } p.help { padding: 5px; background: rgba(255,255,255, 0.2); font-weight: bold; } /* menus ----------------------------------------------- */ ul.menu { list-style:none; border-top:1px solid #bbb; } ul.menu li { margin:0; } ul.menu li a { display:block; padding:4px 10px; border-bottom:1px solid #ccc; } ul.menu li a:hover { background:#eee; } ul.menu li a:active { background:#ccc; } /* submenus ----------------------------------------------- */ ul.menu ul { list-style:none; margin:0; } ul.menu ul li a { padding-left:30px; } /* menu lists ----------------------------------------------- */ ul.list { margin-bottom: 0px; border-top: 0px none; } ul.list li.current { padding: 4px 14px; } /* section menus ----------------------------------------------- */ ul.section { border-top:0; margin-bottom:0; } ul.section li { text-transform:uppercase; } ul.section li a { background:#bbb; } ul.section li a:hover { background:#aaa; } ul.section li a:active { color:#fff; background:#666; } ul.section li li a { background:#ddd; border-bottom:1px solid #eee; } ul.section li li a:hover { background:#ccc; } ul.section li li a:active { color:#000; background:#fff; } ul.section ul li { text-transform:none; } ul.section ul.current li a { background:#eee; border-bottom:1px solid #fff; } ul.section ul.current li a:hover { background:#ddd; } ul.section ul.current li a:active { background:#fff; } ul.section li a.current { color:#fff; background:#666; } ul.section li a.current:hover { background:#555; } ul.section li a.current:active { background:#444; } ul.section li a.active { background:#fff; cursor:default; } ul.section li.current > a.active, ul.section li.current > a.active:hover { color:#fff; background:#666; cursor:default; } /* table ----------------------------------------------- */ table { width:100%; // border:1px solid #bbb; border:1px solid #aaa; // border: 1px solid rgba(0,0,0,0.55); margin-bottom:10px; } col.colC { width:8em; } th, td { padding:.2em 1em; text-align:left; color: #333; } thead th { border-bottom:2px solid #888; background: #eee; background:rgba(212,222,255,0.65); padding:.4em 1em .2em; } thead th.table-head { font-size:1em; font-weight:normal; text-transform:uppercase; color:#fff; background:#555; border:1px solid #555; } tbody th, tbody td { border-top:1px solid #bbb; border-bottom:1px solid #bbb; background:#eee; background:rgba(255,255,255,0.85); } tbody tr.odd th, tbody tr.odd td { background:#fff; } tfoot th, tfoot td { border-top:2px solid #666; background:#eee; background:rgba(212,222,255,0.65); } tfoot tr.total th, tfoot tr.total td { border-top:6px double #666; } tfoot tr.total th { text-transform:uppercase; } th.currency, td.currency { text-align:right; } tfoot.dark th, tfoot.dark td { // background: #bbbbbb; } /* forms ----------------------------------------------- */ form { overflow:hidden; } fieldset { border:1px solid #bbb; padding:10px; position:relative; background:#e9e9e9; background:rgba(255,255,255,0.81); margin-bottom:10px; color: #333; } legend { font-size:1.1em; padding:.4em .8em; background:#f5f5f5; border:1px solid #bbb; } fieldset.login p { margin-bottom:1em; margin-top:0pt; } fieldset p label { width:98%; } fieldset p input { width:98%; } fieldset p select { width:99%; } fieldset.login p label { float:left; line-height:2em; margin-right:3%; text-align:right; width:32%; } fieldset.login p input { width:60%; } fieldset.login input.button { margin-left:35%; } form p.notice { font-weight:bold; } input.search.text { width:66%; } input.search.button { width:28%; margin-left:2%; } /* articles ----------------------------------------------- */ .articles { padding:0; } .articles h2 { margin:0; } #articles { padding-top:0; } .article { border-top:1px solid #666; padding-top:.5em; } .box .article { border-top:3px solid #fff; padding:13px 10px 0 10px; } .article h2 { font-size:2em; font-weight:normal; text-transform:none; color:#333; background:transparent; padding:0; margin:0; border:none; } .article h3 { margin-bottom:.2em; font-size:1.6em; } .box .first { border-top:none; } .article h4 { font-size:1.2em; text-transform:uppercase; margin-bottom:.5em; } .article a.image { float:left; margin:3px 10px 3px 0; padding:4px; border:1px solid #bbb; background:#fff; } .article a.image:hover { border:1px solid #666; } .article a.image img { float:left; } .article p.meta { color:#666; border-top:1px dotted #999; border-bottom:1px dotted #999; padding:.3em 0; margin-bottom:.8em; } /* site information ----------------------------------------------- */ #site_info .box { color:#ccc; background:#666; margin-bottom:10px; } #site_info a { color:#fff; } #site_info a:hover { color:#000; } /* AJAX sliding shelf ----------------------------------------------- */ #loading {float:right; margin-right:14px; margin-top:-2px;} .block {padding-bottom:1px;} /* Accordian ----------------------------------------------- */ .toggler { color: #222; margin: 0; padding: 2px 5px; background: #eee; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-top: 1px solid #f5f5f5; border-left: 1px solid #f5f5f5; font-size:1.1em; font-weight: normal; } .element h4 { margin: 0; padding:4px; line-height:1.2em; } .element p { margin: 0; padding: 4px; } .float-right { padding:10px 20px; float:right; } #accordian-block { padding-bottom:10px; } /* Mootools Kwicks ----------------------------------------------- */ #kwick-box { padding:0; overflow:hidden; } #kwick-box h2 { margin:0; } #kwick { position: relative; } #kwick .kwicks { display: block; background: #999; height: 120px; list-style:none; margin:0; overflow:hidden; } #kwick li { float: left; margin:0; padding:0; } #kwick .kwick { display: block; cursor: pointer; overflow: hidden; height: 100px; width: 215px; padding: 10px; background: #fff; } #kwick .kwick span { color:#fff; } #kwick .one { background: #666; } #kwick .two { background: #777; } #kwick .three { background: #888; } #kwick .four { background: #999; } /* Main Nav Current States */ ul.nav li a.current { background: #888; } /* CakePHP Specific */ div#flashMessage { padding: 10px; margin: 0px 13px 10px 11px; border: 1px dashed #888; background: #ffcccc; font-size: 14px; } div.flash-error { color: #bf0000; background: #ffbfbf !important; border-color: #bf0000 !important; } div.flash-warning { color: #725600; background: #ffffbf !important; border-color: #bfbf00 !important; } div.flash-success { color: #00bf00; background: #dfffbf !important; border-color: #00bf00 !important; } div.error-message { color: #bf0000; font-weight: bold; } div.form div.box { padding: 10px; background:#e9e9e9; background: none repeat scroll 0 0 rgba(255, 255, 255, 0.81); } .input { margin: 0px 0px 5px 0px; } .text input { width: 250px; } .input label { width: 100px; text-align: right; display: block; float: left; margin: 0px 5px 0px 0px; padding: 2px 0px 0px 0px; } .text label { padding: 6px 0px 0px 0px; } .form-submit-group { float: right; margin: 0px 0px 5px 0px; } .form-submit-group .submit { float: left; } .form-cancel { float: left; padding-top: 5px; margin-right: 5px; } /** Scaffold View **/ dl { line-height: 2em; margin: 0em 0em; width: 60%; } div.dl { border: 1px solid #aaa; color: #333; margin-bottom: 10px; } div.dh { background: none repeat scroll 0 0 rgba(212, 222, 255, 0.65); padding: 0.4em 1em 0.2em; font-weight: bold; border-bottom: 1px solid #888888; border-top: 0px none; } .dt, .dd { padding: 0.4em 1em 0.2em; border-top: 1px solid #888888; } div.dt { float: left; width: 10em; background: transparent; font-weight: bold; } .dd { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.85); } .dd:after { clear: both; } dl .altrow, div .altrow { background: #f4f4f4; } dt { font-weight: bold; padding-left: 4px; vertical-align: top; } dd { margin-left: 10em; margin-top: -2em; vertical-align: top; } /** CakePHP Notices and Errors **/ div.message { clear: both; color: #333; font-size: 140%; font-weight: bold; margin: 0 0 1em 0; background: #c73e14; padding: 5px; } div.error-message { clear: both; color: #bf0000; background: #ffbfbf; border-color: #bf0000; font-weight: bold; } p.error { color: #bf0000; background: #ffbfbf; border-color: #bf0000; font-family: Courier, monospace; font-size: 120%; line-height: 140%; padding: 0.8em; margin: 1em 0; } p.error em { color: #000; font-weight: normal; line-height: 140%; } .notice { color: #725600; background: #ffffbf; border-color: #bfbf00; display: block; font-family: Courier, monospace; font-size: 120%; line-height: 140%; padding: 0.8em; margin: 1em 0; } .success { color: #00bf00; background: #dfffbf; border-color: #00bf00; } /* jQuery UI Stuff */ #ui-datepicker-div { background: #fff; padding: 5px; border: 1px solid #eee; } a.ui-datepicker-prev { width: 35px; float: left; text-align: left; } a.ui-datepicker-next { width: 35px; float: right; text-align: right; } div.ui-datepicker-title { text-align: center; } table.ui-datepicker-calendar { padding-bottom: 0px; margin-bottom: 0px; }