header, footer, nav, article {
display : block;
}
#wrapper {
width : 920px;
margin : 0 auto;
background : #fff;
padding : 10px;
}
body {
margin : 0 auto;
width : 100%;
text-align : center;
font : 13px/22px Helvetica, Arial, sans-serif;
background: url(img/bg.jpg)repeat;
}
h1 {
font-size : 22px;
margin-top : 0px;
font-family : Arial;
}
h2 {
margin : 5px;
font-weight : 600;
font-family : 'Titillium Web', sans-serif;
position : relative;
font-size : 16px;
line-height : 15px;
padding : 12px 12px 12px 5%;
color : #355681;
box-shadow : 0 0 0 1px rgba(53, 86, 129, 0.4) inset, 0 0 8px rgba(53, 86, 129, 0.5) inset, -200px 0 40px white inset;
border-radius : 0 10px 0 10px;
}
.re {
color: red; 
}
h3 {
font-size : 18px;
line-height : 22px;
padding : 11px 0;
}
p {
padding-bottom : 2px;
text-indent : 20px;
text-align : justify;
margin : 0;
color : #666666;
}
.stroke {
font : bold 2.5em Arial, sans-serif;
color : #ccc;
text-shadow : -1px -1px 0 #fff, 1px 1px 0 #222;
}
ul.menu, ul.menu li.visible, .sill-menu {
position : relative;
display : inline-block;
list-style : none;
text-align : center;
padding : 0;
margin : 0;
}
ul.menu li a {
display : block;
text-decoration : none;
}
ul.menu li.visible {
background : url(img/icons/mramora.jpg) no-repeat;
border : #e1e1e1 solid 1px;
float : left;
overflow : hidden;
height : 140px;
width : 180px;
}
ul.menu li.visible:hover {
box-shadow : 0 0 10px #000;
z-index : 1;
}
ul.menu li.visible > a {
color : #707070;
font : normal normal 20px/140px 'Tenor Sans', Verdana, sans-serif;
}
.sill-menu {
position : absolute;
bottom : 100%;
left : 100%;
overflow : hidden;
background : #fff;
color : #000;
height : 100%;
width : 100%;
}
ul.menu li.visible:hover .sill-menu {
bottom : 0%;
left : 0%;
}
.sill-menu li {
position : relative;
right : 110%;
opacity : 0;
}
ul.menu li.visible:hover .sill-menu li {
right : 0;
opacity : 1;
}
.sill-menu li a {
font : normal normal 15px 'Open Sans Condensed', Tahoma, sans-serif;
color : #2c1c00;
opacity : 0.800000011920928955078125;
padding : 1px 5px;
margin : 2px 14px 2px 2px;
height : 100%;
}
.sill-menu li a:hover {
background : #fff;
border-left : 5px solid #666;
color : #5c473d;
box-shadow : 0 0 10px 1px #666;
opacity : 1;
}
.sill-menu {
transition : bottom 0.5s ease-out, left 0.5s ease-out;
}
.sill-menu li {
transition : right 0.8s ease, opacity 1s ease;
}
.sill-menu li a {
transition : border 0.5s ease;
}
.home, .windows, .marble, .granite {
text-align : left;
}
.home:before, .windows:before, .marble:before, .granite:before, .social:before {
content : '';
position : absolute;
height : 100%;
width : 100%;
top : 0;
left : 50%;
transform : scale(1) rotate(-20deg);
opacity : 0.4000000059604644775390625;
}
.home:before {
background : url(img/icons/home.png) no-repeat;
}
.windows:before {
background : url(img/icons/windows.jpg) no-repeat;
}
.marble:before {
background : url(img/icons/marble.png) no-repeat;
}
.granite:before {
background : url(img/icons/granit.png) no-repeat;
}
.social:before {
background : url(img/icons/network.png) no-repeat;
}
.home {
background : #f9f9f9;
background-image : linear-gradient(to right, #f0f0f0 0%, transparent 80%);
}
.windows {
background : #f9f9f9;
background-image : linear-gradient(to right, #f0f0f0 0%, transparent 80%);
}
.marble {
background : #f9f9f9;
background-image : linear-gradient(to right, #f0f0f0 0%, transparent 80%);
}
.granite {
background : #f9f9f9;
background-image : linear-gradient(to right, #f0f0f0 0%, transparent 80%);
}
.home li a:hover:after, .windows li a:hover:after, .marble li a:hover:after, .granite li a:hover:after {
content : "";
position : absolute;
top : 0;
right : 0;
border-width : 13px 2px 13px 12px;
border-style : solid;
border-radius : 0 12px 12px 0;
border-color : transparent transparent transparent #5c473d;
}
.social {
background : #cacaca;
}
.social li {
display : inline-block;
text-align : center;
float : left;
padding : 0;
height : 50%;
width : 50%;
}
.social li a, .social li a:hover {
box-shadow : none;
border : 0;
color : #E6E6E6;
text-shadow : 1px 1px 1px #000;
margin : 0;
}
.social li a:hover {
color : #fff;
}
.social li .facebook {
font : normal normal 20px/3 Impact, sans-serif;
}
.social li .cosmetic {
font : normal bolder 19px/3 Trebuchet MS, sans-serif;
}
.social li .google {
font : normal 500 20px/3 Georgia, serif;
}
.social li .contact {
font : normal bolder 18px/3 Trebuchet MS, sans-serif;
}
.social li .facebook:hover {
background : url(img/social/facebook.png) 100% 50% no-repeat #003399;
}
.social li .cosmetic:hover {
background : url(img/social/cosmetic.jpg) 50% 100% no-repeat;
}
.social li .google:hover {
background : url(img/social/google-plus.png) 0 0 no-repeat #A30000;
}
.social li .contact:hover {
background : url(img/social/contact.png) 0 0 no-repeat #FF9933;
}
div {
}
    .box{
     width: auto;
     height: auto;
     overflow: hidden;
    }
    .box>div{
	padding: 9px;   
	border : #efefef solid 2px;
    width: 30%;
    height: auto;
	background: #fff;
	text-align: left;
    display: inline-block;
}
li{
font-size:14px;
}
ul {
margin : 10px;
padding : 10px;
list-style : none;
}
#breadcrumbs-one {
margin-bottom : 10px;
background : #eee;
border-width : 1px;
border-style : solid;
border-color : #f5f5f5 #e5e5e5 #ccc;
border-radius : 5px;
box-shadow : 0 0 2px rgba(0, 0, 0, 0.2);
overflow : hidden;
}
#breadcrumbs-one li {
float : left;
}
#breadcrumbs-one a {
padding : 0.7em 1em 0.7em 2em;
float : left;
text-decoration : none;
color : #444;
position : relative;
text-shadow : 0 1px 0 rgba(255, 255, 255, 0.5);
background-color : #ddd;
background-image : linear-gradient(to right, #f5f5f5, #ddd);
}
#breadcrumbs-one li:first-child a {
padding-left : 1em;
border-radius : 5px 0 0 5px;
}
#breadcrumbs-one a:hover {
background : #fff;
}
#breadcrumbs-one a::after, #breadcrumbs-one a::before {
content : "";
position : absolute;
top : 50%;
margin-top : -1.5em;
border-top : 1.5em solid transparent;
border-bottom : 1.5em solid transparent;
border-left : 1em solid;
right : -1em;
}
#breadcrumbs-one a::after {
z-index : 2;
border-left-color : #ddd;
}
#breadcrumbs-one a::before {
border-left-color : #70BC06;
right : -1.1em;
z-index : 1;
}
#breadcrumbs-one a:hover::after {
border-left-color : #fff;
}
#breadcrumbs-one .current, #breadcrumbs-one .current:hover {
font-weight : bold;
background : #8DD21F;
}
#breadcrumbs-one .current::after, #breadcrumbs-one .current::before {
content : normal;
}
.col1 {
width : 600px;
}
.table {
width : 100%;
background : #f9f9f9;
color : #275266;
border-spacing : 1px;
table-layout : fixed;
}
td, th {
background : white;
padding : 11px;
}
.block {
width : 100%;
float : left;
background-color : #fff;
}
.appolo {
float : left;
width : 25%;
}
.appolo1 {
margin : 10px;
padding : 10px;
}
.modalDialog {
position : fixed;
font-family : Arial, Helvetica, sans-serif;
top : 0;
right : 0;
bottom : 0;
left : 0;
background : rgba(0, 0, 0, 0.5);
z-index : 99999;
display : none;
}
.modalDialog:target {
display : block;
}
.modalDialog > div {
width : 700px;
position : relative;
margin : 10% auto;
padding : 5px 20px 13px 20px;
border-radius : 10px;
background : #275266;
}
.close {
background : #606061;
color : #FFFFFF;
line-height : 25px;
position : absolute;
right : -12px;
text-align : center;
top : -10px;
width : 24px;
text-decoration : none;
font-weight : bold;
border-radius : 12px;
box-shadow : 1px 1px 3px #000;
}
.close:hover {
background : #00d9ff;
}
.bodytext p {
font-size : 12px;
color : #fff;
}
.za h2 {
font-size : 18px;
color : #fff;
}
#clear {
clear : both;
height : 1px;
}
a.ipod {
color : #187BC2;
margin-bottom : 5px;
}
#clear {
clear : both;
height : 30px;
}
a.ipod {
color : #187BC2;
margin-bottom : 5px;
}
footer {
bottom : 0;
height : 45px;
left : 0;
position : fixed;
width : 100%;
}