/*
THEME NAME:Group eX
*/

/* =structure */
* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }

strong {
font-weight:bold;
}

h1 { 
font-weight: bold; 
font-size:16px;
color:#5c5d5f; 
margin-bottom:10px; 
}


p {
margin-bottom:10px;
}

a {
color:#7262e8;
}

a:hover {
color:#5c5d5f;
}

img {
border:none;
}

hr {
border:1px solid #000;
}

body {
background-color:#5c5d5f;
color:#444;
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
margin:0; 
padding:0;  
}

.thumb {
width:90px;
height:90px;
float:left;
margin:0px 4px 12px 8px;
}

.thumbimg {
width:88px;
height:88px;
border:1px solid #5c5d5f;
}

.detail {
color:#5c5d5f;
font-family:Arial, Helvetica, sans-serif; 
font-size:11px; 
margin:0px 25px 0px 0px; 
padding:0px;  
overflow: hidden;
text-align:right;
}

#wrapper {
padding:0;
margin:0 auto;
width:960px;
position:relative;
margin-top:25px;
}

.cat-title {
color:#444;
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
font-weight:bold;
margin:0px 0px 0px 8px;
}

#top {
width:960px;
height:60px;
background:url(images/top.jpg) #5c5d5f;
background-repeat:no-repeat;
}

#middle {
width:960px;
min-height:500px;
padding: 50px 0px 0px 0px;
background:url(images/middle.jpg) #5c5d5f;
background-repeat:repeat-y;
}

#bottom {
width:960px;
height:110px;
margin-bottom:25px;
background:url(images/bottom.jpg) #5c5d5f;
background-repeat:no-repeat;
}

#home-banner {
float:left;
width:920px;
height:184px;
margin:0px 20px 20px 20px;
background:#F2F2F2;
overflow:hidden;
}

#photo1, #photo2, #photo3, #photo4, #photo5 {
float:left;
width:184px;
height:184px;
background:#ccc;
overflow:hidden;
}

#content {
float:left;
width:600px;
margin-left:95px;
font-family:Arial, Helvetica, sans-serif;
font-weight:lighter;
font-size:12px;
line-height:16px;
color:#5c5d5f;
}

#content-contact {
float:left;
width:500px;
margin-left:95px;
font-family:Arial, Helvetica, sans-serif;
font-weight:lighter;
font-size:12px;
line-height:16px;
color:#5c5d5f;
}

#content-home {
float:left;
width:640px;
margin-left:95px;
font-family:Arial, Helvetica, sans-serif;
font-weight:lighter;
font-size:21px;
line-height:28px;
color:#5c5d5f;
}

#content-portfolio {
width:640px;
margin-left:85px;
font-family:Arial, Helvetica, sans-serif;
font-weight:lighter;
font-size:21px;
line-height:28px;
}

#bizlist {
float:right;
width:184px;
margin-right:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:16px;
color:#5c5d5f;
list-style-type: none;
}

#map {
float:right;
width:255px;
margin:95px 90px 0px 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:16px;
color:#5c5d5f;
list-style-type: none;
}

.clear {
clear:both;
}



/* =nav */
#nav-above {
display:block;
position:fixed;
margin-top:10px;
}

#nav-above .nav-previous a {
display:block;
color:#8b8b8b;
padding-right:10px;
}

#nav-above .nav-next a {
display:block;
color:#8b8b8b;
padding-left:10px;
}

#nav-above .nav-all a {
display:block;
color:#8b8b8b;
padding:0px;
}

#nav-above .nav-cat a {
display:block;
color:#8b8b8b;
padding:0px;
}

#nav-above a:hover, #nav-above a:hover {
color:#7262E8;
text-decoration:none;
}

#nav-above .nav-cat {
position:absolute;
display:block;
width:120px;
left:670px;
text-align:left;
font-size:12px;
line-height:normal;
font-weight:bold;
margin-left:10px;
}

#nav-above .nav-cat li {
list-style: none;
margin-bottom:10px;
}

#nav-above .nav-all {
position:absolute;
display:block;
width:120px;
left:670px;
top:70px;
text-align:left;
font-size:12px;
line-height:18px;
}

#nav-above .nav-previous {
position:absolute;
display:block;
width:30px;
left:-20px;
text-align:right;
font-size:24px;
line-height:350px;
}

#nav-above .nav-next {
position:absolute;
display:block;
width:30px;
right:-645px;
text-align:left;
font-size:24px;
line-height:350px;
}


.portfolio-frame {
height:355px;
width:619px;
padding:11px 0px 0px 12px;
background:url(images/portfolio-bg.jpg) #999;
margin:0px;
}

.full-photo {
height:340px;
width:600px;
overflow:hidden;
margin:0px;
color:#FFF;
position:relative;

}



/* ------------------------------------------------------------------------------------ */

ul#menu {
width:960px;
height:50px;
list-style:none;
margin:0;
padding:0;
padding-top:10px;
padding-left:95px;
}

/* Float LI Elements - horizontal display */
ul#menu li {
float:left;
}

/* Link - common attributes */
ul#menu li a {
background:url(images/nav-sprite.jpg) no-repeat scroll top left;
display:block;
height:50px;
position:relative;
}

/* Specify width and background position attributes specifically for the class: "home" */
ul#menu li a.home {
width:150px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portfolio {
width:150px;
background-position:-150px 0px;
}

/* Specify width and background position attributes specifically for the class: "contact" */
ul#menu li a.contact {
width:150px;
background-position:-300px 0px;

}

/* Specify width and background position attributes specifically for the class: "client" */
ul#menu li a.client {
width:150px;
background-position:-450px 0px;
}

/* Span (on hover) - common attributes */
ul#menu li a span {
background:url(images/nav-sprite.jpg) no-repeat scroll bottom left;
display:block;
position:absolute;
top:0;
left:0;
height:50px;
width:150px;
z-index:100;
}

/* Span (on hover) - display pointer */
ul#menu li a span:hover {
cursor:pointer;
}

/* Shift background position on hover for the class: "home" */
ul#menu li a.home span {
background-position:0px -50px;
}

/* Shift background position on hover for the class: "home" */
ul#menu li a.home-off  {
background:url(images/nav-sprite.jpg) no-repeat;
background-position:0px -50px;
height:50px;
width:150px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portfolio span {
background-position:-150px -50px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portfolio-off  {
background:url(images/nav-sprite.jpg) no-repeat;
background-position:-150px -50px;
height:50px;
width:150px;
}

/* Shift background position on hover for the class: "contact" */
ul#menu li a.contact span {
background-position:-300px -50px;
}

/* Shift background position on hover for the class: "contact" */
ul#menu li a.contact-off  {
background:url(images/nav-sprite.jpg) no-repeat;
background-position:-300px -50px;
height:50px;
width:150px;
}

/* Shift background position on hover for the class: "client" */
ul#menu li a.client span {
background-position:-450px -50px;
}

/* Shift background position on hover for the class: "client" */
ul#menu li a.client-off  {
background:url(images/nav-sprite.jpg) no-repeat;
background-position:-450px -50px;
height:50px;
width:150px;
}