use CSS3 to style the main content area

[hcoop/hcoop-website.git] / css / style.css

* { padding: 0; margin: 0; outline: 0; }

body {
	background: #99cc99;
	font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
	font-size: 12px;
	line-height: 20px;
	color: #010101;
	padding-bottom: 10px;
}

ul {
 margin: 1em 0em 1em 1.4em;
 padding: 0em 0em .5em 1.4em;
 list-style-type: none;
}

ul ul {
 margin: 0em 0em 0em 1.4em;
 padding: .2em 0em .2em 1.4em;
}

li { background-image: url(images/arr.gif); background-repeat: no-repeat; background-position:20px 21px; padding: 15px 0 0 40px; }

input, textarea, select { font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif; font-size:10px; }

a { color: #006600; text-decoration: underline; cursor: pointer; }
a:hover { text-decoration: none; }
a img { border: 0; }

h2 { font-family: Veranda, Arial, Helvetica, Sans-Serif; font-size: 38px; font-weight: bold; color: #336699; padding-bottom: 20px; }
h3 { font-family: Veranda, Arial, Helvetica, Sans-Serif; font-size: 25px; font-weight: bold; color: #336699; padding-bottom: 10px; }
h4 { font-family: Veranda, Arial, Helvetica, Sans-Serif; font-size: 20px; font-weight: normal; text-transform: uppercase; color: #000000; padding-bottom: 10px; }

h4.facebook { background-image: url(images/facebook.gif); background-repeat: no-repeat; padding-left: 25px; }

p { padding-bottom: 4px; }
p.big{ font-family: Veranda, Arial, Helvetica, Sans-Serif; font-size: 25px; font-weight: bold; color: #006600; padding-bottom: 10px; }


.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

.cl { font-size: 0; line-height: 0; clear: both; display: block; height: 0; }

.notext { font-size: 0; line-height: 0; text-indent: -4000px; background-repeat: no-repeat; }

.shell { width: 960px; margin: 0 auto; }

.more { background: url(images/arr.gif) no-repeat 0 center; padding: 1px 0 0 10px; }

.separator { background: url(images/separator1.gif) repeat-x 0 bottom; margin: 0 20px 0 15px; }

#top { padding: 20px 0 5px 280px; position: relative; height: 100%; }

#logo { width: 300px; font-size: 0; line-height: 0; position: absolute; top: 10px; left: 0; }
#logo a { display: block; height: 90px; text-indent: -4000px; background: url(images/hcoop.gif); background-repeat: no-repeat; }

#members { padding-bottom: 25px; padding-right: 25px; margin-bottom: 30px; color: #666666; }
#members p { float: right; padding-right: 10px; letter-spacing: 1px; }

#navigation { height: 18px; font-family: Arial, Helvetica, Sans-Serif; font-weight: bold; letter-spacing: 1px; font-size: 12px; line-height: 21px; text-transform: uppercase; padding-right: 25px; }
#navigation ul { float: right; display: inline; list-style-type: none; margin: 0 0 0 0; }
#navigation li, 
#navigation li a, 
#navigation li a span { float: left; display: inline; padding: 0 0 0 10px; }
#navigation li a { color: #333333; text-decoration: none; background-position: 0 0; }
#navigation li a span { float: left; display: inline; padding: 0 10px 0 0; background-position: right 0; }
#navigation li a:hover,
#navigation li a.active,
#navigation li a:hover span,
#navigation li a.active span { background-image: url(images/nav-active1.gif); color: #fff; }

#main {
    background-color: white;
    clear: both;
    width: 850px;
    margin: 18px 15px 28px 15px;
    padding: 32px 34px;
    overflow: auto;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 5px 5px 15px 0px #333;
    -webkit-box-shadow: 5px 5px 15px 0px #333;
    box-shadow: 5px 5px 15px 0px #333;
}

.cols { padding: 28px 0 20px; }
.cols .col { float: left; display: inline; }
.cols .col-last { margin-right: 0 !important; }
.cols .col h2 { padding-bottom: 10px; margin-left: 5px; text-transform: uppercase; font-weight: normal; }
.cols .col h2.notext { height: 26px; }
.cols .col .content { padding: 5px 0 0 0px; }

.two-cols .col { width: 300px; margin-right: 60px; }
.two-cols .col .content { padding-top: 0; }
.two-cols .col-big { width: 550px; }
.two-cols .col-big h2 { margin-left: 0; }
.two-cols .col-big .content { padding-left: 0; }

#container { float: left; overflow: hidden; margin-top: 20px; }
#container div { float: left; width: 250px; margin-right: 35px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #ffffff; }
#container .col3 { margin-right: 0; }

#container2 { float: left; overflow: hidden; margin-top: 20px; }
#container2 div { float: left; width: 400px; margin-right: 35px; margin-bottom: -2000px; padding-bottom: 2000px; overflow: hidden; }
#container2 .col2 { margin-right: 0; }


#footer { font-size: 10px; text-transform: uppercase; padding-top: 5px; margin: 0 20px 0 15px; color: #333333; }
#footer a { color: #006600; text-decoration: underline; }
#footer a:hover { color: #006600; text-decoration: none; }
#footer span { margin: 0 8px; color: #666666; }

table.centered { margin-left: auto; margin-right: auto; }