/* Graphiczone - Cloverdale Magazine stylesheet */

/*reset*/

html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6,
p, blockquote, a, abbr, acronym, address, cite, em, font, img,
strong, sub, sup, b, u, i, center, 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-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style-type: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

a img {
border: none;
outline: 0;
}

/*end reset*/

/*start layout*/

html, body {
margin:0;
padding:0;
text-align:center;
}

#pagewidth {
width:960px;
text-align:left;
margin: 0 auto;
background-color: #fff
}

#topbar {
position: relative;
width: 100%;
background-color: #383D51;
padding: .5em 0;
}

#branding {
position:relative;
width:100%;
}

div.address {
position: relative;
background-color: #383D51;
padding: .5em 0;
}

div.banner {
position: relative;
border-bottom: 5px #4D507B solid;
}

.magbanner {
height: 125px;
}

.mainpage {
background-image: url(../images/design-elements/drop_shadow.gif);
background-repeat: repeat-x;
background-position: left top;
}

#twocols {
width:760px;
float:left;
position:relative;
margin: 2em 0;
background-image: url(../images/design-elements/leftcol-bg.jpg);
background-repeat: repeat-y;
background-position: left top;
}

.flash #leftcol {
width: 0;
display: none;
}

.flash #twocols {
width: 100%;
position: relative;
float:left;
background-image: none;
}

.flash #maincol {
position: relative;
width: 960px;
float: left;
}

#leftcol {
width:200px;
float:left;
position:relative;
display:inline;
}

div.contentleft {
position: relative;
padding: 1em 0;
}

div.sub {
padding: 1em;
}

#maincol {
float: right;
position: relative;
width:560px;
}

#maincol .photowide {
width: 760px;
}

div.content {
padding: 0 2em 0 2em;
}

#rightcol {
position: relative;
float: right;
width: 200px;
margin: 2em 0;
}

div.contentright {
position: relative;
padding: 1em 10px 0 0;
}

#footer {
clear:both;
padding: .5em 0;
border-top: 1px #9AA2A3 double;
}

/*end layout*/

/* *** float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

/*end float fix*/

/*typography*/

body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
color: #333;
background-color: #000;
}

#topbar p {
font-size: 1em;
font-weight: bold;
font-variant: small-caps;
color: #fff;
text-align: right;
margin: 0 1em;
}

p.description {
text-indent: -9000px;
display: block;
height: 100%;
width: 100%;
margin: 0;
}

.address p {
font-size: .9em;
font-weight: bold;
text-align: center;
color: #fff;
}

p.breadcrumb {
font-size: .9em;
margin: 2em 0 1em 2em;
}

.content h1 {
font-size: 1.4em;
padding-bottom: .33em;
margin-bottom: 1em;
border-bottom: 1px #ccc solid;
}

.content h2 {
font-size: 1em;
font-weight: bold;
padding-bottom: .33em;
margin: 2em 0 .5em 0;
}

.content p {
font-size: 1em;
line-height: 1.4em;
margin-bottom: 1em;
}

.content ul {
margin-left: 3em;
margin-bottom: 1em;
}

.content ul li {
list-style-type: disc;
padding-left: .5em;
padding-bottom: .25em;
}

.content ul.services li {
font-size: 1.1em;
}

.contentright h2 {
font-size: 1.2em;
color: #fff;
font-weight: bold;
padding-bottom: .25em;
margin: 0 0 .5em 0;
border-bottom: 1px #fff solid;
}

.contentright p {
font-size: .8em;
color: #fff;
margin-bottom: .5em;
}

.contentright dl {
font-size: 100%;
color: #fff;
margin-top: 1em;
}

.contentright dt {
color: #000;
font-size: 1em;
color: #fff;
font-weight: bold;
margin-bottom: .25em;
margin-left: 1em;
}

.contentright dd {
font-size: .9em;
line-height: 1.3em;
margin-bottom: .5em;
margin-left: 1.5em;
}

.valid {
margin-top: 4em;
}

.contentleft p {
font-size: .9em;
line-height: 1.4em;
margin-bottom: .5em;
}

#footer p {
font-size: .8em;
margin: 0;
text-align: center;
line-height: 1.3em;
}

/*images*/

.imageslogan {
float: right;
padding: .25em;
margin: 0 0 1em 1em;
}

.imageright {
float: right;
padding: .25em;
margin: 0 0 1em 1em;
border: 1px #f3f3f3 solid;
}

.imageleft {
float: left;
padding: .25em;
margin: 0 1em 1em 0;
border: 1px #ccc solid;
}

.imagecenter {
text-align: center;
}

.centerbanner {
text-align: center;
margin-top: 26px;
}

/*navigation*/

#navlist {
padding-left: 0;
margin-left: 5px;
border-bottom: 1px solid #ccc;
width: 195px;
}

#navlist li {
font-size: 1em;
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid #ccc;
}

#navlist li a:link, #navlist li a:visited {
color: #333;
text-decoration: none;
}

#navlist li a:hover {
color: #7B7B7B;
}

#navlist li a.current{
color: #fff;
background-color: #505050;
padding: .15em;
}

/*links*/

a:link, a:visited {
color: #4D507B;
text-decoration: underline;
}

a:hover {
color: #000;
text-decoration: none;
}

#footer a:link, #footer a:visited {
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

/*test of styles for flash content*/

p.forsale {
margin-bottom: 0;
}

/* box styles */

.box {
position: relative;
width: 100%;
margin: 0 0 20px 0;
}

.orange {
background: #ff6c01 url('gradient-orange.png') top repeat-x;
}

.green {
background: #98d11d url('gradient-green.png') top repeat-x;
}

.blue {
background: #24b2e7 url('gradient-blue.png') top repeat-x;
}

.red {
background: #d94017 url('gradient-red.png') top repeat-x;
}

.silver {
background: #3f3f3f url(../images/design-elements/box/gradient-silver.png) repeat-x top;
}


.inner {
padding: 20px;
}

/* corners */

.corner {
position: absolute;
width: 10px;
height: 10px;
background: url(../images/design-elements/box/corners_whitebg.png) no-repeat;
font-size: 0%;
}


.tl {
top: 0;
left: 0;
background-position: 0 0;
}

.tr {
top: 0;
right: 0;
background-position: -10px 0;
}

.bl {
bottom: 0;
left: 0;
background-position: 0 -10px;
}

.br {
bottom: 0;
right: 0;
background-position:  -10px -10px;
}

div.slogan {
position: relative;
width: 100%;
/*float: right;
width: 200px;
margin-top: 2em;*/
font-size: 2.4em;
line-height: .9em;
color: #000;
text-align: right;
margin-bottom: 1.5em;
}