@import url(reset.css);
       
#index, #page
{
font: 12px Tahoma, Arial, Verdana, sans-serif;
text-align: center;
background: #e5e5e5 url(../images/bg-body.png) repeat-x;
color: #808080;
}

#wrapper
{
width: 100%;
background: url(../images/bg-wrapper.jpg) center 0 no-repeat;
}

#container
{
width: 910px;
margin: 0 auto;
text-align: left;
position: relative;
}

#page #container
{
background: url(../images/bg-content-page.jpg) no-repeat;
}

#contact-info
{
position: absolute;
color: #656563;
top: 35px;
right: 45px;
font-size: 12px;
z-index: 999;
width: 190px;
background: url(../images/contact-info.png) left 3px no-repeat;
padding: 0 0 0 70px;
}

#contact-info p
{
margin: 0;
}

#contact-info span
{
display: block;
font-size: 20px;
font-weight: bold;
margin: 0 0 5px 0;
}

#heading
{
position: absolute;
color: #fff;
top: 166px;
left: 46px;
font-size: 14px;
font-weight: bold;
z-index: 999;
text-transform: uppercase;
text-align: center;
}

/* --------------------- HEADER --------------------- */

#header
{
height: 148px;
position: relative;
background: url(../images/bg-header.jpg) 184px 0 no-repeat;
z-index: 10;
}

#page #header
{
height: 271px;
}

#logo
{
width: 510px;
height: 64px;
position: absolute;
top: 25px;
left: 40px;
text-indent: -10000px;
z-index: 1000;
}

.logo
{
 background: url(../images/logo-ocg.png) no-repeat;
}

.logo-coatings
{
background: url(../images/logo-coatings.png) no-repeat;
}

.logo-paiting
{
background: url(../images/logo-painting.png) no-repeat;
}

#logo a
{
display: block;
width: 500px;
height: 64px;
}

#menu-side
{
margin: 0 0 15px 0;
}

#menu-sider li
{
}

#menu-side a
{
display: block;
color: #33559d;
font-size: 12px;
font-weight: bold;
padding: 13px 15px 13px 30px;
border-bottom: 1px solid #e5e5e5;
text-align: left;
background: url(../images/bg-menu.png) 15px 16px no-repeat;
}

#menu-side .last a
{
background: none;
}

#menu-side a:hover, #menu-side .current-menu-item a
{
background: #34569d url(../images/bg-menu-over.png) 15px 16px no-repeat;
color: #fff;
}


#slider-wrapper
{
width: 917px;
height: 275px;
position: absolute;
top: 96px;
left: -7px;
background: url(../images/bg-slider-wrapper.png) left 0 no-repeat;
}

#slider
{
width: 876px;
height: 196px;
position: absolute;
top: 32px;
left: 39px;
}

#slider-mask
{
position: absolute;
z-index: 999;
width: 876px;
height: 196px;
background: url(../images/bg-slider.png) no-repeat;
top: 32px;
left: 39px;
}

.navpaged, .navboth
{
padding: 0 0 30px 0 !important;
}

.meteor-buttons
{
left: 320px !important;
}

.meteor-buttons a
{
width: 28px !important;
height: 21px !important;
background: url(../images/bg-slider-nav.png) 0 -24px no-repeat !important;
text-indent: 0 !important;
text-align: center;
color: #33559d;
padding: 3px 0 0 0;
margin: 0 1px !important;
}

.meteor-buttons a.activeSlide, .meteor-buttons a:hover
{
background: url(../images/bg-slider-nav.png) 0 0 no-repeat !important;
color:#fff;
}


/* --------------------- END HEADER --------------------- */


/* --------------------- CONTENT --------------------- */
#content
{
padding: 230px 0 0 0;
background: url(../images/bg-content.png) repeat-y;
}

#column-wrapper
{
width: 648px;
}

#column-1
{
width: 183px;
padding: 0 0 0 20px;
margin: 0 25px 0 20px;
display: inline;
}

#column-2
{
width: 400px;
}

#column-2 p
{
line-height: 20px;
margin: 10px 0 0 0;
}

#column-2 h1, #column-2 h2, #column-2 h3, #column-2 h4, #column-2 h5, #column-2 h6
{
color:#ed1b24;
margin: 8px 0;
}

#column-2 h1
{
font-size: 24px;
}

#column-2 h2
{
font-size: 22px;
}

#column-2 h3
{
font-size: 20px;
}

#column-2 h4
{
font-size: 18px;
}

#column-2 h5
{
font-size: 16px;
}

#column-2 h6
{
font-size: 14px;
}

#column-2 ul
{
list-style-type: none;
margin: 8px 0 8px 15px;
padding: 0;
}

#column-2 li
{
background: url(../images/bullet.png) 0 8px no-repeat;
padding: 0 0 0 12px;
line-height: 20px;
}

#column-2 a
{
color:#0e3095;
}

#column-3
{
width: 185px;
margin: 0 40px 0 0;
display: inline;
}

.button
{
padding: 10px 0;
background: url(../images/line.png) 0 bottom no-repeat;
}

.button p
{
text-align: center;
margin: 5px 0 0 0;
}

.button a
{
color: #33559d;
font-weight: bold;
}


/* --------------------- END CONTENT --------------------- */


/* --------------------- FOOTER --------------------- */
#footer-wrapper
{
width: 100%;
text-align: center;
background: url(../images/bg-footer.png) center 0 repeat-x;
}

#footer
{
width: 870px;
margin: 0 auto;
padding: 80px 40px 20px 0;
text-align: right;
font-size: 12px;
}

#footer a, #footer p
{
color: #fff;
margin: 0;
}

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

/* --------------------- END FOOTER --------------------- */


/* --------------------- HEADINGS --------------------- */


/* --------------------- END HEADINGS --------------------- */

i, em
{
font-style: italic;
}

p
{
margin: 18px 0;
line-height: 16px;
}

a
{
text-decoration: none;
color: #ffffff;
}

img
{
border: 0;
} 

/* floats */

.left
{
float: left;
}

.right
{
float: right;
}

.clear
{
clear: both;
}

/* basic text classes */

.italic
{
font-style: italic;
}

.bold
{
font-weight: bold;
}

/* text aligns */

.justify
{
text-align: justify;
}

.align-r
{
text-align: right;
}

.align-l
{
text-align: left;
}

.align-c
{
text-align: center;
}

/* WPCF7 */
.wpcf7
{
width: 260px;
margin: 0 auto !important;
}

.wpcf7 input, .wpcf7 textarea
{
width: 250px;
padding: 4px;
border: 1px solid #CCCCCC;
}

.wpf7 select
{
border: 1px solid #CCCCCC;
padding: 4px;
}

.wpcf7-submit
{
width: auto !important;
float: right;
padding: 5px 15px;
}


img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 12px;
}