/* Go Vicinity Graphic Design Canterbury, Faversham, Ashford And Kent Style Sheets
----------------------------------------------- */


/* GV Creative Boiler Plate =====================================

= COLOR REFERENCE GUIDE =

FONT COLOR: #000000
HEADING COLOR: #339900
SECONDARY HEADING: #339900
BACKGROUND COLOR: #666666
SECONDARY BACKGROUND COLOR: #??????
HIGHTLIGHT COLOR: #?????? 
LINK COLOR: #339900

================================================================*/

body {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: small;
margin: 0;
background: #666 url(../images/graphic-design-bg.jpg) repeat-x 50% 0;
}

#wrapper {
text-align: left;
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 856px;
background: url(../images/main-design-bg.jpg) no-repeat 50% 0;
}

#shadow-wrapper {
text-align: left;
width: 776px;
background: url(../images/main-design-bg.jpg) no-repeat 50% 0;
margin: /* Top */ 0 /* Right */ 40px /* Bottom */ 0 /* Left */ 40px;
}

#bottom-shadow-wrapper {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 856px;
height: 20px;
background: url(../images/graphic-design-bottom-bg.png) no-repeat 0 0;
}

h1, h2, h3, p, ul, li {
text-decoration: none;
margin-top: 0;
margin-bottom: 0;
}

img {
border: 0;
font-weight: bold;
}

/* Top logo section
----------------------------------------------- */
#logo-container {
width: 776px;
float: left;
margin: /* Top */ 43px /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
padding: /* Top */ 0 /* Right */ 0 /* Bottom */ 5px /* Left */ 0;
font-weight: normal;
background: url(../images/index-design-bg.jpg) no-repeat right 0;
}

#logo ul {
width: 150px;
height: 166px;
background: url(../images/go-vicinity-design-logo.jpg) no-repeat 0 0;
list-style: none;
margin: /* Top */ 2px /* Right */ 0 /* Bottom */ 5px /* Left */ 0;
padding: 0;
float: left;
}

#logo li {
display: inline;
}

#logo li a:link, #logo li a:visited {
border: none;
width: 150px;
height: 166px;
display: block;
top: 0;
text-indent: -1999px;
outline: none;
float: left;
}

#logo-container #logo {
width: 160px;
float: left;
}

#logo-container #logo img {
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ 0 /* Left */ 0;
}

/* Navigation
----------------------------------------------- */
#navigation {
width: 776px;
float: left;
margin-bottom: 10px;
}

#main_nav { list-style: none; margin: 0; padding: 0; }

#main_nav:hover li a#home { background: url(../images/navigation-design.gif) no-repeat 0 -60px; }
#main_nav:hover li a#services { background: url(../images/navigation-design.gif) no-repeat -85px -60px; }
#main_nav:hover li a#portfolio { background: url(../images/navigation-design.gif) no-repeat -163px -60px; }
#main_nav:hover li a#recruitment { background: url(../images/navigation-design.gif) no-repeat -248px -60px; }
#main_nav:hover li a#placements { background: url(../images/navigation-design.gif) no-repeat -359px -60px; }
#main_nav:hover li a#feedback { background: url(../images/navigation-design.gif) no-repeat -468px -60px; }
#main_nav:hover li a#environment { background: url(../images/navigation-design.gif) no-repeat -558px -60px; }
#main_nav:hover li a#contact { background: url(../images/navigation-design.gif) no-repeat -679px -60px; }


/* ACCESSIBLE ROLL OVERS */
#main_nav li { float: left; }
#main_nav li a { text-indent: -999999px; overflow: hidden; display: block; height: 60px; } 

#home { background: url(../images/navigation-design.gif) no-repeat 0 0; width: 85px; }
#home:hover { background: url(../images/navigation-design.gif) no-repeat 0 0 !important; }
#home.active { background: url(../images/navigation-design.gif) no-repeat -0 -120px; }

#services { background: url(../images/navigation-design.gif) no-repeat -85px 0; width: 78px; }
#services:hover { background: url(../images/navigation-design.gif) no-repeat -85px 0 !important; }
#services.active { background: url(../images/navigation-design.gif) no-repeat -85px -120px; } 

#portfolio { background: url(../images/navigation-design.gif) no-repeat -163px 0; width: 85px; }
#portfolio:hover { background: url(../images/navigation-design.gif) no-repeat -163px 0 !important; }
#portfolio.active { background: url(../images/navigation-design.gif) no-repeat -163px -120px; } 

#recruitment { background: url(../images/navigation-design.gif) no-repeat -248px 0; width: 111px; }
#recruitment:hover { background: url(../images/navigation-design.gif) no-repeat -248px 0 !important; }
#recruitment.active { background: url(../images/navigation-design.gif) no-repeat -248px -120px; } 

#placements { background: url(../images/navigation-design.gif) no-repeat -359px 0; width: 109px; }
#placements:hover { background: url(../images/navigation-design.gif) no-repeat -359px 0 !important; }
#placements.active { background: url(../images/navigation-design.gif) no-repeat -359px -120px; } 

#feedback { background: url(../images/navigation-design.gif) no-repeat -468px 0; width: 90px; }
#feedback:hover { background: url(../images/navigation-design.gif) no-repeat -468px 0 !important; }
#feedback.active { background: url(../images/navigation-design.gif) no-repeat -468px -120px; }

#environment { background: url(../images/navigation-design.gif) no-repeat -558px 0; width: 121px; }
#environment:hover { background: url(../images/navigation-design.gif) no-repeat -558px 0 !important; }
#environment.active { background: url(../images/navigation-design.gif) no-repeat -558px -120px; }

#contact { background: url(../images/navigation-design.gif) no-repeat -679px 0; width: 97px; }
#contact:hover { background: url(../images/navigation-design.gif) no-repeat  -679px 0 !important; }
#contact.active { background: url(../images/navigation-design.gif) no-repeat -679px -120px; }

/* Portfolio Navigation
----------------------------------------------- */

#portfolio-navigation {
width: 200px;
float: left;
}

#portfolio-navigation ul {
list-style: none;
margin: 0;
padding: 0;
}

#portfolio-navigation ul li {
display: inline;
}

#portfolio-navigation ul li a:link, #portfolio-navigation ul li a:visited {
display: block;
text-decoration: underline;
color: #390;
font-weight: normal;
font-size: 1.2em;
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ .5em /* Left */ 0;
}

#portfolio-navigation ul li a:hover {
color: #5e0101;
text-decoration: none;
}

#portfolio-navigation ul li a.selected:link, #portfolio-navigation ul li a.selected:hover, #portfolio-navigation ul li a.selected:visited  {
display: block;
text-decoration: none;
color: #5e0101;
font-weight: normal;
}

/* Main Content
----------------------------------------------- */
#main-content {
float: left;
width: 776px;
margin-bottom: 25px;
}

#main-content #main-content-image {
width: 776px;
float: left;
text-align: left;
}

#main-content h1 {
color: #390;
font-size: 2.1em;
font-weight: normal;
margin-bottom: .4em;
clear: both;
}

#main-content h2 {
color: #390;
font-size: 1.5em;
font-weight: normal;
margin-bottom: .5em;
}

#main-content p.intro {
color: #5e0101;
font-size: 1em;
font-weight: bold;
margin-bottom: .9em;
}

#main-content p {
font-size: 1em;
font-weight: normal;
margin-bottom: .9em;
}

#main-content a:link, #main-content a:visited {
font-weight: bold;
text-decoration: underline;
color: #390;
}

#main-content a:hover {
font-weight: bold;
text-decoration: none;
color: #390;
}

#main-content ul {
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ 12px /* Left */ 0;
}

#main-content li {
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ 2px /* Left */ 0;
}

#main-content ul.inline {
list-style: none;
padding-left: 0;
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ 15px /* Left */ 0;
}

#main-content ul.inline li {
display: inline;
}

#main-content ul.inline li a, #main-content ul.inline li a:visited {
font-weight: bold;
text-decoration: underline;
color: #390;
}

ul.inline li  a:hover {
font-weight: bold;
text-decoration: none;
color: #390;
}

#portfolio-content {
float: left;
width: 776px;
}

#portfolio-text {
float: left;
width: 556px;
}

#portfolio-navigation {
float: right;
width: 200px;
}

/* Quotes
----------------------------------------------- */
blockquote {
background: transparent url(../images/quote-left.jpg) left top no-repeat;
}

blockquote div {
padding: 0 48px;
background: transparent url(../images/quote-right.jpg) right bottom no-repeat;
}

/* Gallery
----------------------------------------------- */
#gallery-image {
float: left;
height: 400px;
width: 756px;
background: #FFF;
border-left: 10px #5e0101 solid;
border-right: 10px #5e0101 solid;
border-top: 10px #5e0101 solid;
}

#gallery-buttons {
float: left;
height: 58px;
width: 756px;
border-left: 10px #5e0101 solid;
border-right: 10px #5e0101 solid;
border-bottom: 10px #5e0101 solid;
overflow: hidden;

}

.galleria {list-style: none;width: 756px; margin:0; padding: 0;}
.galleria li {display: block;width: 108px;height: 58px;overflow: hidden;float: left;margin: 0;padding: 0;}
.galleria li a {display: none;}
.galleria li div {position: absolute;display: none;top: 0;left: 1111px;}
.galleria li div img {cursor: pointer;}
.galleria li.active div img,.galleria li.active div {display: block;}
.galleria li img.thumb {cursor: pointer;top: auto;left: auto;display: block;width: auto;height: auto;}
* html .galleria li div span {width: 400px;} /* MSIE bug */

/* Main Page Image
----------------------------------------------- */
#main-image {
float: left;
width: 756px;
border: 10px #5e0101 solid;
margin: 0;
}

/* Gallery
----------------------------------------------- */
#main-content #content-text #gallery {
width: 776px;
float: left;
text-align: left;
margin-bottom: 15px;
display: block;
}

/* Footer
----------------------------------------------- */
#footer {
width: 776px;
clear: both;
text-align: left;
padding: /* Top */ 0 /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
}

#footer h1, #footer h2, #footer h3 {
font-weight: normal;
font-size: .8em;
color: #390;
margin: /* Top */ 0 /* Right */ 0 /* Bottom */ 10px /* Left */ 0;
}

#footer h2 a:link, #footer h2 a:visited, #footer h2 a:hover, #footer h3 {
color: #390;
text-decoration: none;
}

#footer span {
color: #5e0101;
font-weight: bold;
}

#footer p {
font-size: .8em;
color: #390;
}

#footer p a:link, #footer p a:visited {
font-weight: bold;
text-decoration: underline;
color: #390;
}

#footer p a:hover {
font-weight: bold;
text-decoration: none;
color: #390;
}