body, html{
display: block;
background-color: #f2f2f2;
margin: 0px;
padding: 0px;
font-family: "arial";
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
}
p{
line-height: 1.5em;
}
/* Layout Styles */
.mainContainer, .warper{
display: block;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
}
.headerContainer, .bodyContainer, .navContainer{
display: block;
width: 100%;
min-width: 100%;
}
.headerContainer{
background-color: #fff;
color: #000;
}
.navContainer{
background-color: #303030;
}
.bodyContainer{
background: rgb(204,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(204,0,0,1) 0%, rgba(107,0,0,1) 70%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,0,0,1)), color-stop(70%,rgba(107,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,0,0,1) 0%,rgba(107,0,0,1) 70%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,0,0,1) 0%,rgba(107,0,0,1) 70%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(204,0,0,1) 0%,rgba(107,0,0,1) 70%); /* IE10+ */
background: linear-gradient(to bottom, rgba(204,0,0,1) 0%,rgba(107,0,0,1) 70%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#6b0000',GradientType=0 ); /* IE6-9 */
}
.headerContainer .innerHeaderContainer, .bodyContainer .innerBodyContainer, .navContainer .innerNavContainer{
display: block;
width: 960px;
margin: 0px auto;
}
.headerContainer .innerHeaderContainer .contactPhoneNumber{
display: block;
text-align: right;
font-weight: bold;
color: #000;
float: right;
padding-top: 20px;
}
.headerContainer .innerHeaderContainer .contactPhoneNumber img{
vertical-align: middle;
float: left;
width: 35px;
padding: 0px 10px 5px 0px;
}
.headerContainer .innerHeaderContainer .contactPhoneNumber ul{
margin: 0px;
padding: 0px;
list-style: none;
float: right;
}
.headerContainer .innerHeaderContainer .contactPhoneNumber ul li{
display: block;
vertical-align: middle;
padding-right: 8px;
font-size: 0.86em;
}
.headerContainer .innerHeaderContainer .logoSection{
display: block;
float: left;
padding: 8px 0px;
}
.headerContainer .innerHeaderContainer .logoSection a img{
height: 100px;
}
.headerContainer .innerHeaderContainer .logoSection a{
text-decoration: none;
}
.navContainer .innerNavContainer ul.navHolder{
margin: 0px;
padding: 0px;
list-style: none;
text-align: right;
}
.navContainer .innerNavContainer ul.navHolder > li{
display: inline-block;
vertical-align: middle;
}
.navContainer .innerNavContainer ul.navHolder > li a{
display: block;
padding: 8px 15px;
text-decoration: none;
color: #888;
}
.navContainer .innerNavContainer ul.navHolder > li a:hover{
color: #ccc;
}
.navContainer .innerNavContainer ul.navHolder > li a.navActive{
background: url('../images/navArrow.png') top center no-repeat;
color: #fff !important;
}
.bodyContainer .innerBodyContainer{
background-color: #fff;
border: 1px solid #303030;
border-top: none;
box-shadow: 1px 1px 5px #000;
}
.bodyContainer .innerBodyContainer .sliderContainer{
display: block;
border-bottom: 1px solid #ccc;
}
.bodyContent{
display: block;
padding: 25px 15px 15px 15px;
color: #555;
}
.bodyContent #introduction{
display: block;
font-size: 0.86em;
padding: 0px 15px;
}
.bodyContent #introduction h3{
display: block;
font-size: 1.2em;
color: #c00;
text-transform: uppercase;
}
.bodyContent #introduction p#more a{
text-decoration: none;
color: #c00;
font-weight: bold;
}
.bodyContent #pageContent{
display: block;
font-size: 0.86em;
padding: 0px 15px;
}
.bodyContent #pageContent h3{
display: block;
font-size: 1.2em;
text-transform: uppercase;
font-weight: normal;
padding-bottom: 10px;
}
.bodyContent #pageContent h3 b{
color: #fff;
background-color: #c00;
padding: 8px 15px;
border-radius: 8px;
box-shadow: 0px 0px 3px #888;
}
.bodyContent #pageContent img#logo{
float: right;
padding: 8px;
}
.bodyContent #pageContent ul#gallery{
margin: 0px auto;
padding: 0px;
list-style: none;
}
.bodyContent #pageContent ul#gallery > li {
display: block;
}
.bodyContent #pageContent ul#gallery > li span#galleryCategoryHeading{
display: block;
background-color: #303030;
color: #fff;
box-shadow: 0px 0px 3px #555;
padding: 8px 0px;
text-align: center;
border-radius: 8px;
font-weight: bold;
margin-top: 30px;
margin-bottom: 10px;
text-transform: uppercase;
}
.bodyContent #pageContent ul#gallery > li ul{
margin: 0px;
padding: 0px;
list-style: none;
}
.bodyContent #pageContent ul#gallery > li ul li{
display: inline-block;
margin: 8px;
background-color: #f2f2f2;
border: 5px solid #fff;
box-shadow: 0px 0px 2px #aaa;
}
.bodyContent #pageContent ul#productList{
margin: 0px auto;
padding: 0px;
list-style: none;
text-align: center;
}
.bodyContent #pageContent ul#productList li{
display: inline-block;
vertical-align: top;
width: 290px;
margin: 10px 5px 10px 0px;
border: 1px solid #000;
}
.bodyContent #pageContent ul#productList li span{
display: block;
height: 180px;
line-height: 180px;
text-align: center;
background-color: #f2f2f2;
}
.bodyContent #pageContent ul#productList li b{
display: block;
padding: 8px 0px;
text-align: center;
background-color: #303030;
color: #fff;
text-transform: uppercase;
font-size: 0.86em;
}
.innerFooterContainer{
display: block;
background-color: #303030;
padding: 10px 0px;
}
.footerElements{
margin: 0px;
padding: 0px 20px;
list-style: none;
}
.footerElements > li{
display: inline-block;
vertical-align: bottom;
margin: 0px 25px;
}
li.socialIcons, li.contactAddress{
padding: 8px;
width: 40%;
/* border: 1px solid #fff;*/
}
li.contactAddress{
text-align: right;
}
li.socialIcons a{
padding: 8px;
}
li.socialIcons a img{
width: 30px;
}
li.contactAddress h4{
display: block;
color: #ccc;
text-shadow: 1px 1px 3px #888;
font-weight: normal;
padding:0px;
margin: 0px 0px 8px 0px;
}
li.contactAddress p{
display: block;
padding: 0px;
margin: 0px;
font-size: 0.86em;
color: #888;
}
li.contactAddress p b{
font-weight: normal;
font-size: 0.96em;
color: #ccc;
}
li.contactAddress p i{
font-size: 0.86em;
}
li.contactAddress p span{
display: block;
padding: 5px 0px;
}
.signature{
display: block;
width: 960px;
margin: 0px auto;
color: #ccc;
padding: 15px 0px;
text-align: center;
font-size: 0.86em;
}
.signature a{
text-decoration: none;
color: #fff;
}
.contactusContainer{
display: block;
padding: 20px 5px;
}
.contactusContainer .contactForm, .contactusContainer .contactAddress{
display: inline-block;
vertical-align: top;
}
.contactusContainer .contactForm{
width: 55%;
border-right: 1px solid #ccc;
}
.contactusContainer .contactForm label{
display: block;
width: 70px;
font-weight: bold;
text-align: right;
padding-right: 15px;
}
.contactusContainer .contactForm input[type="text"], .contactusContainer .contactForm input[type="email"], .contactusContainer .contactForm textarea{
display: block;
width: 350px;
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
font-family: "arial";
}
.contactusContainer .contactForm textarea{
font-size: 0.86em;
}
.contactusContainer .contactForm input[type="submit"]{
padding: 8px;
}
.contactusContainer .contactAddress{
width: 40%;
padding: 0px 15px;
}
.contactusContainer .contactAddress p{
display: block;
color: #555;
}
.contactusContainer .contactAddress p span{
display: block;
padding: 5px 0px;
}
.contactusContainer .contactAddress p b{
font-weight: bold;
color: #000;
font-size: 0.86em;
}
.contactusContainer .contactAddress p a{
text-decoration: none;
color: #c00;
font-weight: bold;
padding-left: 5px;
}
.contactusContainer .contactAddress span#logoTitle{
display: block;
font-size: 1.2em;
}
.contactusContainer .contactAddress span#logoTitle img{
height: 80px;
}
.contactusContainer .contactAddress span#logoTitle i{
font-size: 0.86em;
}
.introImages{
display: block;
margin: 8px 0px;
padding: 8px 0px;
text-align: center;
}
.introImages ul.imgList{
margin: 0px;
padding: 0px;
list-style: none;
}
.introImages ul.imgList li{
display: inline-block;
vertical-align: top;
margin: 0px 5px;
}
.introImages ul.imgList li img{
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 3px #888;
}
.weDealWith li{
margin: 3px 0px;
font-weight: bold;
}