/************************************************
*Useful stuff*
************************************************/

*{margin:0;padding:0;}

img {border:0;}

.bold {
font-weight:bold;
}

.normal {
font-weight:normal;
}

.italic {
font-style:italic;
}

.clear-both {
clear:both;
}

.clear-left {
clear:left;
}

.clear-right {
clear:right;
}

span.under-line {
text-decoration:underline;
}


/************************************************
*Layout constructs*
************************************************/

body {
font-size:16px;
font-family:arial, verdana;
margin:0;
padding:0;
background:#262626;
}

#wrap {
position:relative;
width:1280px;
height:750px;
margin:0 auto;
}

#logo {
position:absolute;
top:100px;
left:170px;
height:132px;
width:239px;
background:url(/files/graphics/logo.png);
}

/** Panel **/
#panels {
position:relative;
width:952px;
top:386px;
margin:auto;
}

.panel {
float:left;
position:relative; /** For positioning links at bottom of panels **/
width:233px;
height:251px;
margin:0 5px 8px 0;
}

.white-80 {
background:rgba(255, 255, 255);
background:rgba(255, 255, 255, .9);
/** First two are opacity . . . for opacity of .8 use hex(.8*255) http://www.parkenet.com/apl/HexDecConverter.html **/
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#E5ffffff,endColorStr=#E5ffffff);
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#E5ffffff,endColorStr=#E5ffffff);
}

.panel:hover {
background:rgba(255, 255, 255);
background:rgba(255, 255, 255, 1);
/** First two are opacity . . . for opacity of .8 use hex(.8*255) http://www.parkenet.com/apl/HexDecConverter.html **/
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffffff,endColorStr=#ffffffff);
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffffff,endColorStr=#ffffffff);
}

.panel .title {
margin:6px auto 8px auto;
width:221px;
height:105px;
}

.panel .title.meetourfirm {
background:url(/files/graphics/meetourfirm.png);
}

.panel .title.practiceareas {
background:url(/files/graphics/practiceareas-realestate.png);
}

.panel .title.news {
background:url(/files/graphics/news.png);
}

.panel .title.contactus {
background:url(/files/graphics/contactus.png);
}

.panel .content {
margin:0 18px 0 18px;
}

.panel .content div.practice-brochure {
width:176px;
height:120px;
border:1px solid #eeeeee;
margin:auto;
background:url(/brochure-insurance.png);
}

div.practice-brochure a {
display:block;
text-decoration:none;
}

a.construction-page {
height:45px;margin-top:15px;
}

a.construction-brochure {
height:9px;margin-top:43px;
}

.panel .link {
position:absolute;
left:0;
bottom:0;
margin:0 24px 12px 18px;
}

/** Footer **/
#footer {
width:939px;
margin:auto;
}

#footer #left {
float:left;
width:200px;
}

#footer #right {
float:right;
width:300px;
text-align:right;
}


/************************************************
*Styling*
************************************************/

.panel .content p {
font-size:.75em; /** Using 16px as basis **/
margin-bottom:1em;
}

.panel .content.meetourfirm p {
line-height:1.5em;
}

.panel .content.news p {
line-height:1.3em;
}

.panel .content.contactus p {
line-height:1.4em;
}

.panel .content ul {
margin:.6em 0;
list-style:none;
}

.panel .content li {
font-size:.75em;
font-weight:bold;
line-height:1.4em;
margin:0;
}

.panel .content li img {
display:inline;
margin:0 5px 0 0;
vertical-align:2px;
}

.panel .link p {
font-size:.7em;
}

#footer {
font-size:.7em;
font-weight:bold;
color:#dddddd;
}


/************************************************
*Hyperlinks*
************************************************/

.panel a, .panel a:link, .panel a:visited, .panel a:active {
font-weight:bold;
color:#9e4602;
text-decoration:none;
}

.panel a:hover {
font-weight:bold;
color:#9e4602;
text-decoration:underline;
}

.panel .content div.practice-brochure:hover {
background:url(/brochure-insurance.png);
}



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

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