Files
Orchard/src/Orchard.Web/Themes/TheThemeMachine/Styles/Site.css
Jonathan Wall 089e8e63c9 Updates to commenting UI.
--HG--
branch : dev
2010-10-15 14:38:27 -07:00

496 lines
10 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
Theme: Theme Machine
Author: Orchard Team http://www.orchardproject.net
Copyright: 2010, Orchard. All Rights Reserved
*/
/* Color Palette
**************************************************************
Background: #fff
Borders: #dbdbdb
Text: #434343
Secondary Text: #999999
Main Accent: #999
Links: #5f97af
Hovers: #85b35c
*/
/* Reset
***************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* Remember focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
/* Tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* HTML 5 elements as block */
header, footer, aside, nav, article { display: block; }
/* Clearing Floats
***************************************************************/
.group:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.zone-asidethird:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* General
***************************************************************/
/* Default font settings.
The font-size 62.5% sets the base font to 10px */
body {
font-size: 62.5%;
color: #434343;
background: #fff;
font-family: Tahoma, "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* Headings */
h1,h2,h3,h4,h5,h6 { font-weight: normal; margin:.6em 0;}
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }
h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
margin: 0;
}
/* Aside Headings */
aside h1 { font-size: 1.6em; }
aside h2 { font-size: 1.2em; }
aside h3 { font-size: 1.1em; }
aside h4 { font-size: 1em; }
aside h5 { font-size: 1em; }
aside h6 { font-size: 1em; }
/* Lists */
li ul,
li ol { margin:0 1.5em; }
ul, ol { margin: 0 1.5em 1.5em 1.5em; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em;}
/* Text elements */
p { margin: 0 0 1em; line-height: 1.5em; font-size: 1.3em; }
p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }
a:focus,
a:hover { color: #85b35c; }
a { color: #5f97af; text-decoration: none; }
blockquote { margin: 1.5em; color: #666; font-style: italic; }
strong { font-weight: bold; }
em,dfn { font-style: italic; }
dfn { font-weight: bold; }
sup, sub { line-height: 0; }
abbr,
acronym { border-bottom: 1px dotted #666; }
address { margin: 0 0 1.5em; font-style: italic; }
del { color:#666; }
pre { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }
/* Structure
***************************************************************/
#layout-wrapper
{
}
#layout-header, #layout-before-main, #layout-main, #layout-footer, #layout-after-main, #layout-tripel {
width:960px;
margin:0 auto;
}
#layout-header
{
margin: 30px auto;
}
#branding
{
font-family: 'Lobster', Tahoma, Arial, Helvetica, sans-serif;
font-size: 3.4em;
padding: 0;
margin: 0;
}
#branding a
{
text-decoration:none;
color: #434343;
}
#layout-tripel
{
border-top: 1px solid #dbdbdb;
}
#layout-main
{
border-top: 1px solid #fff;
}
#layout-after-main
{
border-top: 1px solid #dbdbdb;
}
/* Navigation */
#layout-navigation
{
width: 960px;
margin: 0 auto;
display: block;
border-bottom: 1px solid #dbdbdb;
}
nav ul
{
padding: 0px;
margin: 0px;
}
nav ul li
{
border:1px solid #dbdbdb;
background:#f6f6f6;
display:block;
float:left;
margin:0 2px -1px 0;
}
nav ul li.current
{
border-bottom: 1px solid #fff;
background:#fff;
}
nav ul a
{
padding:0 18px;
display:block;
float:left;
color: #333;
font-size:1.4em;
text-decoration:none;
line-height:24px;
}
#layout-footer
{
border-top: 1px solid #dbdbdb;
}
/* Zones */
/*.zone {
background-color: yellow;
box-shadow:inset 0 0 1px red;
-moz-box-shadow:inset 0 0 1px red;
-webkit-box-shadow:inset 0 0 1px red;
} Used for visualizing zones */
.zone-header { }
.zone-footer { padding: 24px 0 12px 0px; float: left; font-size: 1.3em; color: #999999; }
.zone-content { }
.zone-asidethird { padding: 0 0 6px 0; }
/* Main
***************************************************************/
/* Has Aside */
.has-aside #layout-content
{
width: 600px;
float: left;
}
.has-aside .aside-second
{
width: 360px;
float: right;
}
.has-aside-one #layout-content {
width: 600px;
float: right;
}
.has-asides #layout-content
{
width: 600px;
}
.has-asides .aside-first, .has-asides .aside-second
{
width: 180px;
}
.has-asides .aside-first, .has-asides .aside-second, .has-asides #layout-content
{
float:left;
}
/* Secondary
***************************************************************/
/* Forms
***************************************************************/
label { font-weight: normal; display:block; }
label.forcheckbox { margin:0 0 0 .4em; display:inline; }
fieldset { padding:0em; margin: 0 0 0em 0; border: 0px solid #dbdbdb; }
legend { font-weight: 600; font-size:1.2em; }
input[type="text"], #CommentText, #password, #confirmPassword {
border:1px solid #999;
display: block;
padding:6px;
width:50%;
}
form.search {
margin-bottom:2em;
}
.search input[type=text] {
display:inline;
width:17em;
}
fieldset ol {list-style-type:none;}
fieldset ol li {margin:1.6em 0 0 0}
legend {
font-size: 1.4em;
border:none;
}
label {
font-size: 1.3em;
margin:0 0 .3em 0;
}
input[type="checkbox"] {
margin:.2em 0 1.2em 0;
}
input[type="submit"], input[type="button"], button, .button, .button:link, .button:visited {
color:#333;
background:#F5F5F5;
background: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#cbcbcb));
background:-moz-linear-gradient(top , #F5F5F5, #cbcbcb);
border:1px solid #999;
cursor:pointer;
margin:.2em 0 2em 0;
padding:.3em 1.8em;
text-align:center;
}
input[type="submit"]:hover, input[type="button"]:hover,
input[type="submit"]:active, input[type="button"]:active,
input[type="submit"]:focus, input[type="button"]:focus,
button:hover, .button:hover,
button:active, .button:active,
button:focus, .button:focus {
text-decoration:none;
background: #ebebeb;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ebebeb));
background:-moz-linear-gradient(top , #e1e1e1, #ebebeb);
}
/* Widgets
***************************************************************/
.widgets {}
/* Misc
***************************************************************/
.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide { display: none; }
.quiet { color: #666; }
.loud { color: #000; }
.highlight { background:#ff0; }
.added { background:#060; color: #fff; }
.removed { background:#900; color: #fff; }
.first { margin-left:0; padding-left:0; }
.last { margin-right:0; padding-right:0; }
.top { margin-top:0; padding-top:0; }
.bottom { margin-bottom:0; padding-bottom:0; }
.credits { float: left; }
.user-display { float: left; padding: 0 12px; }
.user-display .welcome {}
.user-display .user-actions {}
/* CSS 3 Enhancements
***************************************************************/
/* For testing purposes */
#comments, #commenter {
font-size:1.6em;
font-weight:600;
margin:1.2em 0 1.8em 1.2em;
}
#commenter {
margin:1.2em 0 0 1em;
}
ul.comments, form.comment {
margin:1.2em 0 1.2em 1.8em;
list-style: none;
}
article.comment h4 {
font-size:1.4em;
}
article.comment a {
color:#484848;
text-decoration:none;
}
article.comment span.who {
font-weight:600;
font-style:normal;
text-transform:capitalize;
color:#333;
}
article.comment p.text {
margin:.6em 0 2.4em 0;
}
.user-display {
display:inline;
}
.aside.third {
border-top:1px solid #dbdbdb;
clear:both;
}
#layout-tripel div > div {
float:left;
width:316px;
/*padding:12px 6px 0 6px;*/
}
#footer-quad div.zone {
float:left;
width:240px;
/*padding:12px 6px 0 6px;*/
}
/* Featured Zone - switch to an image */
.featuredimage {
float:left;
border: 1px solid #dbdbdb;
width: 462px;
height: 240px;
margin: 6px;
}
/* Recent Zone */
#zone-recent ul li {
float:left;
width: 462px;
margin: 6px;
}
.clearfix {
clear:both;
}
#footer div {
/*border:1px solid #ff0000;*/
}
/* If zone 1 is empty and 2, 3, 4 are not */
.split-234 #footer-quad-second div.zone { width:480px; }
/* If zone 2 is empty and 1, 3, 4 are not */
.split-134 #footer-quad-first div.zone { width:480px; }
/* If zone 3 is empty and 1, 2, 4 are not */
.split-124 #footer-quad-fourth div.zone { width:480px; }
/* If zone 4 is empty and 1, 2, 3 are not */
.split-123 #footer-quad-third div.zone { width:480px; }