* {
border: 0;
margin: 0;
padding: 0;
}
html {
background:url('../i/fade.jpg') repeat-y top center;
background-color: #ccc;
}
body {
font-size: 76%;
line-height: 1.2em;
font-family: Helvetica, Arial, Sans-Serif;
color: #666;
}
#wrap {
width: 775px;
margin: 0 auto 0 auto;
background-color: #fff;
font-size: 1em;
}
a {
color: #c00;
text-decoration: none;
outline:none;
}
a:hover {
text-decoration: underline;
}
h1 {
height: 90px;
width: 435px;
text-indent: -9000px;
float:left;
margin: 10px 0 20px 0;
}
h1 a {
height: 90px;
width: 435px;
background:url('../i/floss_h1.gif') no-repeat 0 -90px;
display:block;
}
h1 a:hover {
height: 90px;
width: 435px;
background:url('../i/floss_h1.gif') no-repeat 0 0;
display:block;
}
p {
font-size: .95em;
line-height: 1.5em;
font-family:Verdana, Helvetica, Arial, sans-serif;
margin: 0 0 15px 0;
text-align:justify;
}
#full p {
width: 400px;
}
#hcard {
width: 221px;
float: right;
display:inline;
margin: 38px 33px 0 -15px;
color: #999;
text-align:right;
font-size: 1em;
line-height: 1.35em;
letter-spacing: 2px;
background:url('../i/address-header.gif') no-repeat right center;
}
#hcard div {
white-space: nowrap;
visibility:hidden;
}
.n ,.country-name{
display: none;
}
#hcard .adr {
float: left;
display:inline;
}
#stage h2#hcard-first-last .email, #stage h2#hcard-first-last .org {
display:none;
}
ul#nav {
float:left;
display:block;
clear:both;
width: 735px;
height: 19px;
background-color: #c00;
padding: 4px 20px 0 20px;
margin-bottom: 30px;
color: #fff;
text-transform:lowercase;
font-size: 1.1em;
overflow:hidden;
}
ul#nav li {
display: inline;
float:left;
letter-spacing: 1px;
}
ul#nav li#portfolio a {
background-position: -2px 2px;
width: 54px;
}
ul#nav li#clients a {
background-position: -78px 2px;
width: 41px;
}
ul#nav li#about a {
background-position: -141px 2px;
width: 38px;
}
ul#nav li#press a {
background-position: -202px 2px;
width: 32px;
}
ul#nav li#contactus a {
background-position: -257px 2px;
width: 48px;
}
ul#nav li a {
background-image:url('/i/nav.gif');
background-repeat: no-repeat;
border-bottom: 3px solid #c00;
margin: 0 61px 0 15px;
padding-bottom: 1px;
display:block;
overflow:hidden;
height: 15px;
color: #fff;
text-decoration: none;
text-indent: -9000px;
}
ul#nav li a:hover {
border-bottom: 3px solid #fff;
}
ul#nav li a#active {
border-bottom: 3px solid #fff;
}
#stage {
float: left;
width: 400px;
margin: 0 70px 50px 35px;
display:inline;
}
#full {
float: left;
width: 705px;
margin: 0 70px 50px 35px;
display:inline;
}
#contact {
float: left;
width: 705px;
margin: 0 70px 50px 35px;
display:inline;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size: .9em;
}
#thanks {
float: left;
width: 705px;
margin: 0 70px 50px 35px;
display:inline;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size: .9em;
}
#stage img,#full img {
display:block;
clear:both;
margin: 0 0 5px 0;
}
#stage ul#pages {
display:block;
clear:both;
text-align:left;
margin: 0 0 5px 0;
width: 400px;
text-transform:lowercase;
color: #c00;
font-size: 0.9em;
}
#stage ul#pages li {
display:inline;
margin: 0 3px 0 3px;
}
ul#pages li#back {
float:left;
margin: 0;
}
ul#pages li#next {
display: inline;
float:right;
margin: 0;
}
#stage ul#pages a {
color: #666;
}
#stage ul#pages a:hover {
color: #c00;
text-decoration: underline;
}
h2 {
margin: 10px 0 8px 0;
text-transform:uppercase;
text-align:right;
font-size: 0.9em;
color: #c00;
font-weight: 100;
letter-spacing: 3px;
text-align:left;
}
#description{
padding:8px 0 0 0;
border-top:1px #ccc solid;
border-bottom:1px #ccc solid;
width:400px;
}
h3 {
display: block;
clear:both;
margin: 0 0 15px 0;
font-size: 1.1em;
text-transform:uppercase;
font-weight: 100;
letter-spacing: 2px;
}
h4 {
display: block;
margin: -3px 0 10px 0;
font-weight: 100;
color: #c00;
font-size: 0.9em;
font-weight: 100;
letter-spacing: 1px;
text-transform:uppercase;
}
h5 {
font-size: 0.9em;
font-weight: 100;
font-style:italic;
color:#c00;
text-transform:uppercase;
letter-spacing: 1px;
}
#archive h2 {
margin: 0 0 3px 0;
font-size: 1em;
display:inline;
}
#archive h4 {
clear:none;
margin: 3px 0 5px 0;
}
ul#archive {
list-style:none;
margin-top: -5px;
}
ul#archive li {
border-top: 1px solid #ccc;
padding-top: 25px;
margin-bottom: 25px;
clear:both;
display:block;
}
ul#archive li img {
float:left;
margin-right: 10px;
}
ul#archive li p a {
text-transform: uppercase;
border-left: 1px solid #c00;
padding-left: 5px;
margin-left: 5px;
}
h6 {
border-top: 1px solid #ccc;
margin: 10px 0 5px 0;
padding: 15px 0 0 0;
display:block;
font-size: 1em;
font-weight: 100;
color: #c00;
letter-spacing: 2px;
}
#stage ul.download {
list-style:none;
}
#stage ul.download li span {
display:block;
clear:both;
letter-spacing: 1px;
margin-top: 1px;
}
#stage ul.download li a {
text-transform: uppercase;
letter-spacing: 1px;
}
#full .client_list {
list-style:none;
width: 130px;
float: left;
margin: 0 23px 0 23px;
line-height: 1.6em;
display:inline;
}
#full .client_list ul {
list-style:none;
}
#full .client_list h2 {
margin: 0 0 15px 0;
padding: 0 0 5px 0;
border-bottom: 1px solid #ccc;
color: #666;
letter-spacing: 1px;
}
#full .client_list h2 a {
margin: 0 0 15px 0;
padding: 0 0 5px 0;
text-decoration:none;
color: #666;
letter-spacing: 1px;
}
#full .client_list h2 a:hover {
margin: 0 0 15px 0;
padding: 0 0 5px 0;
text-decoration:none;
color: #c00;
letter-spacing: 1px;
}
#full .client_list ul li {
display:block;
margin: 0 0 7px 0;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size: .9em;
}
#contact h4.error {
color: #c00;
font-size: 1.1em;
clear:both;
float:none;
display:block;
padding: 0;
margin: -10px auto 5px auto;
text-align:center;
}
#error_message { visibility:hidden;height:0; }
#contact form input.error,#contact form select.error {
border: 1px solid #c00;
}
#contact form label.error_text {
color: #c00;
}
#contact p.thanks {
clear:both;
}
#contact h2 {
font-size: 1em;
color: #666;
margin: 0 0 25px 0;
letter-spacing: normal;
text-transform: none;
font-weight: 100;
}
#contact h2 span {
margin-right: 25px;
}
#contact h3 {
display:block;
clear:both;
float:left;
width: 400px;
padding-bottom: 5px;
text-transform: none;
letter-spacing: normal;
font-weight: 100;
font-size: 1em;
}
#contact h3 span {
color: #c00;
}
#contact h4 {
font-size: 1em;
color: #666;
width:250px;
margin: 0 100px 15px 0;
float:left;
display:inline;
white-space:nowrap;
font-weight: 100;
text-transform: none;
}
#contact h4 a {
text-transform:none;
}
#contact form {
display:block;
clear:both;
margin: 10px 0 50px 0;
float:left;
}
div#left {
float:left;
width: 300px;
margin-right: 50px;
display:inline;
}
div#right {
float:left;
width: 300px;
display:inline;
}
#contact form #left div,#contact form #right div {
width: 300px;
text-align:right;
line-height: 2.5em;
}
#contact form .tooltip {
position: absolute;
margin: -2.4em 0 0 305px;
height: auto;
width: 150px;
padding: 2px;
background-color: #c00;
color: #fff;
line-height: 1.6em;
font-size: 0.9em;
letter-spacing: 1px;
text-align:center;
display: none;
}
#contact form span {
color: #c00;
}
#contact form div span {
clear:none;
display:inline;
}
#contact form div label {
float: left;
text-align: left;
}
#contact form input {
border: 1px solid #ccc;
padding: 2px;
width: 150px;
color: #333;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size: 0.9em;
}
#contact form input:hover,#contact form textarea:hover,#contact form select:hover {
border: 1px solid #666;
}
#contact form select {
border: 1px solid #ccc;
padding: 2px;
width: 156px;
color: #333;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size: 0.9em;
}
#contact form textarea {
border: 1px solid #ccc;
padding: 2px;
margin: 0;
height: 75px;
width: 294px;
color: #333;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size: 0.9em;
overflow:auto;
}
#contact form #submit {
margin-top: 6px;
padding: 2px;
float:left;
clear: none;
width: 75px;
background-color: #c00;
border-color: #c00;
color: #fff;
}
#contact form #submit:hover {
border-color: #fff;
}
#contact form #right #tip10 {
margin: -9em 0 0 305px;
}
#contact form #right #tip11 {
margin: 5px 0 0 100px;
}
#thanks h2 {
font-size: 1em;
color: #666;
margin: 0 0 25px 0;
letter-spacing: normal;
text-transform: none;
font-weight: 100;
}
#thanks h2 span {
margin-right: 25px;
}
#thanks h3 {
display:block;
clear:both;
margin: 0 auto 15px auto;
text-transform:uppercase;
text-align:center;
letter-spacing: 1px;
font-size: 1.2em;
color: #c00;
}
#thanks h4 {
display:block;
clear:both;
margin: 0 auto 20px auto;
text-transform:none;
font-size: 1em;
text-align:center;
letter-spacing: 1px;
color: #666;
}
#thanks p span {
display:block;
clear:both;
width: 200px;
color: #c00;
text-transform:uppercase;
letter-spacing: 1px;
}
#contact {
float: left;
width: 705px;
margin: 0 70px 50px 35px;
display:inline;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size: .9em;
}
#terms {
float: left;
width: 705px;
margin: 0 70px 50px 35px;
display:inline;
}
#terms h2{
font-size: 1.3em;
}
#terms h3{
color:#c00;
margin:5px 0 3px 0;
}
#terms p {
width: 705px;
}
#sidebar {
width: 220px;
float:left;
text-align:right;
display:inline;
margin-left: 15px;
min-height: 500px;
}
#sidebar ul#subnav {
margin-bottom: 45px;
list-style:none;
text-transform:uppercase;
text-align:right;
font-size: 0.9em;
letter-spacing: 3px;
font-weight: 100;
}
#sidebar ul#subnav li {
margin: 0 0 5px 0;
padding: 0 0 5px 0;
}
#sidebar ul#subnav li a {
display: block;
color: #666;
padding: 5px 0 5px 0;
border-bottom: 1px solid #ccc;
}
#sidebar ul#subnav li a:hover {
color: #c00;;
text-decoration: none;
/* border-bottom: 1px solid #c00; */
}
#sidebar ul#subnav li a#category {
color: #c00;
}
#sidebar ul#thumbs {
width: 220px;
list-style:none;
float:right;
text-align:right;
margin-top: 35px;
padding-bottom: 10px;
margin-bottom: 10px;
display:inline;
padding-left: 3px;
}
#sidebar ul#thumbs li {
float: left;
display:inline;
margin: 0 0 6px 6px;
background-position: 2px 2px;
}
#sidebar ul#thumbs li.gutter_1 {
margin-left: 60px;
}
#sidebar ul#thumbs li.gutter_2 {
margin-left: 115px;
}
#sidebar ul#thumbs li.gutter_3 {
margin-left: 170px;
}
#sidebar ul#thumbs li a {
display:block;
height: 45px;
width: 45px;
border: 2px solid #fff;
background-image:url('../i/gray.png');
background-position: 0 0;
overflow:hidden;
text-indent: 500px;
white-space:nowrap;
}
#sidebar ul#thumbs li a:hover {
border: 2px solid #c00;
background-image:none;
}
#sidebar ul#thumbs li a#current {
border: 2px solid #c00;
background-image:none;
}
#sidebar h3 {
margin: 10px 3px 10px 0;
font-size: 1em;
text-transform:uppercase;
font-weight: 100;
letter-spacing: 2px;
text-align:right;
display:inline;
}
#sidebar h3#thumb_title {
text-transform:uppercase;
text-align:right;
font-size: 0.9em;
font-weight: 100;
letter-spacing: 3px;
visibility: hidden;
}
#sidebar h4 {
display:block;
clear:both;
letter-spacing: 2px;
text-align:right;
color: #c00;
font-weight: 100;
margin: 0 0 10px 0;
font-size: 1em;
}
#sidebar ul.calendar {
width: 148px;
list-style:none;
display:block;
float:right;
line-height: 1.6em;
margin: 0 0 30px 0;
}
#sidebar ul.calendar li {
border-left: 1px solid #ccc;
padding-left: 3px;
float:left;
width: 30px;
display:inline;
margin: 0 0 0px 3px;
text-align: center;
}
#sidebar ul.calendar li a {
display:block;
}
#sidebar .calendar .noborder {
border: none;
}
ul#footer {
display:block;
clear:both;
padding: 50px 0 35px 35px;
font-size: 0.75em;
text-align:left;
text-transform: uppercase;
letter-spacing: 1px;
color:#999;
}
ul#footer li {
display: inline;
margin: 0 3px 0 3px;
padding-left: 10px;
border-left: 1px solid #ccc;
}
ul#footer li a {
color:#999;
}
ul#footer li a:hover {
color:#c00;
}
ul#footer li:first-child {
padding-left: 0;
border-left: 0;
}
.clearfloat {
display:block;
clear:both;
}
#portfolio_display{
height:300px;
width:400px;
}
#portfolio_display img{
float:left;
margin:0 auto;
max-height:300px;
max-width:400px;
}
.empty{color:#ccc;}