@charset "utf-8";



/* CSS Reset

*******************************************************************************/



body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,form, fieldset, input, textarea, p, blockquote, th, td { margin: 0px; padding: 0px; }



table { border-collapse: collapse; border-spacing: 0px; }



fieldset, img { border:0; }



address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }



ol, ul, li { list-style: none; }



caption, th { text-align: left; }



h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }



q:before, q:after { content:''; }



abbr, acronym { border:0; }



image { border: 0px; }

a img { border: none; }







/* Body

*******************************************************************************/



body { background-image: url('images/main_bg.gif'); background-repeat: no-repeat; background-color: #faa953; }



#all { width: 1000px; margin: 0px auto 0px auto; }









/* Text styles

*******************************************************************************/



a, a:visited { color: #fea039; font-size: 12px; font-family: "arial", "verdana", sans-serif; text-decoration: none; }



a:hover { text-decoration: underline; }



a.white, a.white:visited { color: #474f51; padding: 3px; background-color: #fbbf7f; }



a.white:hover { color: #474f51; background-color: #f9dbbb; text-decoration: none; }



a.home_big, a.home_big:visited { color: #3f330c; font-weight: bold; font-size: 14px;}



a.home_big:hover { text-decoration: underline; }



a.normal, a.normal:visited { color: #fea039; font-size: 12px; font-family: "arial", "verdana", sans-serif; text-decoration: none; }







p { margin-bottom: 10px; }



strong { font-weight: bold; }



i, em { font-style: italic; }



p, ul, ol, td, div { color: #474f51; font-size: 12px; font-family: "arial", "verdana", sans-serif; line-height: 18px; }



h1 { font-weight: bold; font-size: 14px; padding-bottom: 10px; }



h2 { color: #fff; font-weight: bold; font-size: 18px; padding-bottom: 10px; }



h3 { font-weight: bold; font-size: 12px; padding-bottom: 5px; }



h4 { color: #fea13a; font-weight: bold; font-size: 18px; padding-bottom: 10px; }



h5 { color: #3e7ec1; font-weight: bold; font-size: 14px; padding-bottom: 10px; }



h6 { color: #3e7ec1; font-weight: bold; font-size: 15px; padding-bottom: 10px; }



h7 { color: #fea13a; font-weight: bold; font-size: 12px; padding-bottom: 10px; }



h8 { color: #fea13a; font-weight: bold; font-size: 14px; padding-bottom: 10px; }



.rule { margin: 20px 0px 15px 0px; border-top: 1px #fea039 dashed;  }







/* Global

*******************************************************************************/



ul.standard { margin: 10px 0px 15px 35px; }



ul.standard li { padding: 4px; list-style: disc; }





#header { width: 1000px; height: 121px; }



#logo { width: 157px; height: 74px; float:left; margin: 22px 0px 0px 35px; }



#top_right { width: 720px; height: 97px; float: left; }



#top_phone { width: 242px; height: 44px; margin: 0px 0px 37px 550px; }



#column1 { width: 225px; float:left; margin: 15px 0px 0px 0px; }



#column2 { width: 775px; float:left; margin: 0px 0px 0px 0px; }



#column1_home { width: 307px; float:left; padding: 10px 20px 20px 30px; }



.column2_home_edge { width: 416px; height: 19px; padding: 0px 0px 0px 0px; }



#column2_home { width: 418px; float: left; }



#column2_home_content { width: 368px; background-image: url('images/col2_home_bg.png'); background-repeat: repeat-y; padding: 5px 25px 10px 25px; }



#splash_graphics { width: 225px; margin: 15px 0px 15px 0px; }



#hero_container { width: 760px; height: 307px; background-image: url('images/hero_background.png'); padding: 13px 0px 0px 15px; }

#hero_container2 { width: 760px; height: 307px; background-image: url('images/hero_background2.png'); padding: 13px 0px 0px 15px; }

.slideshow { width: 760px; height: 307px; margin: 0px 0px 0px 0px; }

#anim { width: 512px; height: 295px; float: left; }



#anim_text { width: 233px; height: 190px; float: left; padding: 105px 15px 0px 0px; text-align: center; }



#home_login_container { width: 240px; height: 116px; background-image: url('images/home_login_box.png'); padding: 10px 0px 0px 30px; }



.home_login1 { width: 70px; height: 15px; float: left; padding: 15px 0px 0px 0px; color: #fff; }

.home_login2 { width: 150px; height: 15px; float: left; padding: 15px 0px 0px 0px; }

.home_login3 { width: 200px; height: 25px; text-align: right; padding: 15px 0px 0px 0px;}



#home_blog_container { width: 303px; margin-bottom: 10px; }



#home_blog_edge { width: 303px; height: 5px; }



#home_blog_inner { width: 283px; background-color: #fff; padding: 10px; overflow: hidden; }

#home_blog_image { width: 80px; margin: 0px 10px 0px 0px; float: left; }

#home_blog_copy { width: 180px; margin: 0px 10px 0px 0px; float: left; }



#home_rss_icon { width: 32px; height: 32px; float: left; margin: 0px 10px 20px 0px; }

#home_rss_link { width: 150px; height: 20px; float: left; margin: 7px 0px 0px 0px; }





.column2_edge { width: 771px; height: 19px; padding: 0px 0px 0px 3px; }

#column2_content { width: 701px; background-image: url('images/col2_bg.png'); background-repeat: repeat-y; padding: 15px 35px 20px 35px; margin: 0px 0px 0px 3px; overflow: hidden; }



#column2a { width: 400px; float: left; margin: 0px 40px 0px 0px; }

#column2b { width: 260px; float: left; margin: 0px 0px 0px 0px; }



#column2c { width: 330px; float: left; margin: 0px 40px 0px 0px; }

#column2d { width: 330px; float: left; margin: 0px 0px 0px 0px; }



#column2e { width: 160px; float: left; margin: 0px 40px 0px 0px; }

#column2f { width: 500px; float: left; margin: 0px 0px 0px 0px; }



.column2_edge2 { width: 771px; height: 19px; padding: 0px 0px 0px 3px; margin-top: 180px; }



.column2_edge3 { width: 771px; height: 19px; padding: 0px 0px 0px 3px; margin-top: 65px; }



.column2_edge4 { width: 771px; height: 19px; padding: 0px 0px 0px 3px; margin-top: 245px; }



.column2_edge5 { width: 771px; height: 19px; padding: 0px 0px 0px 3px; margin-top: 120px; }



.formpad1 { width: 150px; padding: 7px 7px 7px 0px; vertical-align: top; float: left; }

.formpad2 { padding: 7px 0px 7px 0px; vertical-align: top; float: left; }



.formpad2_column1 { width: 160px; float: left; }

.formpad2_column2 { width: 160px; float: left; }





ul.sitemap li { width: 300px; padding: 5px; border-bottom: 1px #fce7d2 dashed; margin-left: 20px; }  



.linkline { border-bottom: 1px #9cbb2f dashed; }



.linkline a, .linkline a:visited { color: #fea039; }



#local_column1 { width: 450px; float: left; }

#local_column2 { width: 200px; float: right; }



.packages_box { background-color: #ecf1f8; border: 1px #dae4f1 solid; padding: 15px 20px 15px 20px; }



ul.packages li { padding: 5px; border-bottom: 1px #c8d4e3 dashed; }  

ul.packages li.last { padding: 5px; border: 0px; } 



.or { text-align: center; padding: 10px; }



#sem1 { width: 250px; float: left; }

#sem2 { width: 434px; float: right; }

#sem3 { width: 500px; float: left; margin-top: 15px; }

#sem4 { width: 180px; float: left; margin-top: 45px; text-align: center; }



#seo1 { width: 240px; float: left; padding-right: 10px; }

#seo2 { width: 440px; float: right; text-align: center; }



#ppc2 { width: 440px; float: right; }



#oversize_banners { margin-left: -13px; }





/* Footer

*******************************************************************************/



#footer { width: 100%; height: 122px; background-image: url('images/footer_bg.png'); background-repeat: repeat-x; margin-top: 20px; padding: 15px 0px 0px 0px; }



#footer_contents { width: 1000px; height: 127px; margin: 0px auto 0px auto; }





.footer_column { width: 170px; float: left; border-left: 1px #fec98f solid; padding: 5px 10px 0px 15px; }



.footer_column a, .footer_column a:visited { color: #fff; font-size: 11px; text-decoration: none; padding: 3px; }



.footer_column a:hover { background-color: #fbbf7f; padding: 3px; color: #474f51; }



#footer_copyright { width: 400px; color: #fbdd8c; font-size: 11px; text-align: center; margin: 0px auto 15px auto; }



#footer_copyright a { color: #fbdd8c; font-size: 11px; text-decoration: none; }











/* Top nav

*******************************************************************************/



#topmenu_wrap { width: 680px; height: 15px; background: url('images/top_nav_bg.gif') no-repeat; margin: 19px 0px 0px 75px; }



ul#topmenu { width: 680px; height: 30px; display: block; overflow: hidden; list-style: none; padding: 0px; }



ul#topmenu li { float: left; height: 15px; margin: 0px; list-style: none; padding: 0px; }



ul#topmenu li a#home,  ul#topmenu li a#home:visited { display:block; width: 78px; height: 15px; background:url('images/top_nav_bg.gif') no-repeat 0px 0px; text-indent:-9999px; outline:0; }

ul#topmenu li a#home:hover { background-position: 0px -15px; }



ul#topmenu li a#about,  ul#topmenu li a#about:visited { display:block; width: 100px; height: 15px; background:url('images/top_nav_bg.gif') no-repeat -78px 0px; text-indent:-9999px; outline:0; }

ul#topmenu li a#about:hover { background-position:-78px -15px; }



ul#topmenu li a#testimonials,  ul#topmenu li a#testimonials:visited { display:block; width: 135px; height: 15px; background:url('images/top_nav_bg.gif') no-repeat -178px 0px; text-indent:-9999px; outline:0; }

ul#topmenu li a#testimonials:hover { background-position:-178px -15px; }



ul#topmenu li a#links,  ul#topmenu li a#links:visited { display:block; width: 91px; height: 15px; background:url('images/top_nav_bg.gif') no-repeat -313px 0px; text-indent:-9999px; outline:0; }

ul#topmenu li a#links:hover { background-position: -313px -15px; }



ul#topmenu li a#jobs,  ul#topmenu li a#jobs:visited { display:block; width: 92px; height: 15px; background:url('images/top_nav_bg.gif') no-repeat -404px 0px; text-indent:-9999px; outline:0; }

ul#topmenu li a#jobs:hover { background-position: -404px -15px; }



ul#topmenu li a#local,  ul#topmenu li a#local:visited { display:block; width: 96px; height: 15px; background:url('images/top_nav_bg.gif') no-repeat -496px 0px; text-indent:-9999px; outline:0; }

ul#topmenu li a#local:hover { background-position: -496px -15px; }



ul#topmenu li a#contact,  ul#topmenu li a#contact:visited { display:block; width: 88px; height: 15px; background:url('images/top_nav_bg.gif') no-repeat -592px 0px; text-indent:-9999px; outline:0; }

ul#topmenu li a#contact:hover { background-position: -592px -15px; }



/* Left nav

*******************************************************************************/



#mainmenu_wrap { width: 215px; height: 331px; background: url('images/main_nav_bg.png') no-repeat; }



ul#mainmenu { width: 430px; height: 331px; display: block; overflow: hidden; margin: 0px; list-style: none; padding: 0px; }



ul#mainmenu li { margin: 0px; list-style: none; padding: 0px; }



ul#mainmenu li a#logo_design,  ul#mainmenu li a#logo_design:visited { display:block; width: 215px; height: 21px; background:url('images/main_nav_bg.png') no-repeat 0px 0px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#logo_design:hover { background-position: -215px 0px; }



ul#mainmenu li a#business_website_design,  ul#mainmenu li a#business_website_design:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#business_website_design:hover { background-position: -215px -21px; }



ul#mainmenu li a#website_design_portfolio,  ul#mainmenu li a#website_design_portfolio:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#website_design_portfolio:hover { background-position:-215px -45px; }



ul#mainmenu li a#banner_advertising,  ul#mainmenu li a#banner_advertising:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#banner_advertising:hover { background-position:-215px -69px; }



ul#mainmenu li a#graphic_design,  ul#mainmenu li a#graphic_design:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#graphic_design:hover { background-position:-215px -93px; }



ul#mainmenu li a#video_editing,  ul#mainmenu li a#video_editing:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#video_editing:hover { background-position:-215px -117px; }



ul#mainmenu li a#website_hosting,  ul#mainmenu li a#website_hosting:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#website_hosting:hover { background-position:-215px -141px; }



ul#mainmenu li a#search_engine_marketing,  ul#mainmenu li a#search_engine_marketing:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#search_engine_marketing:hover { background-position:-215px -165px; }



ul#mainmenu li a#search_engine_optimisation,  ul#mainmenu li a#search_engine_optimisation:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#search_engine_optimisation:hover { background-position:-215px -189px; }



ul#mainmenu li a#link_building,  ul#mainmenu li a#link_building:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#link_building:hover { background-position:-215px -213px; }



ul#mainmenu li a#pay_per_click,  ul#mainmenu li a#pay_per_click:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#pay_per_click:hover { background-position:-215px -237px; }



ul#mainmenu li a#adwords,  ul#mainmenu li a#adwords:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#adwords:hover { background-position:-215px -261px; }



ul#mainmenu li a#website_analytics,  ul#mainmenu li a#website_analytics:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#website_analytics:hover { background-position:-215px -285px; }



ul#mainmenu li a#social_media,  ul#mainmenu li a#social_media:visited { display:block; width: 215px; height: 24px; background:url('images/main_nav_bg.png') no-repeat 0px 24px; text-indent:-9999px; outline:0; }

ul#mainmenu li a#social_media:hover { background-position:-215px -309px; }









/* Gallery

*******************************************************************************/



#hero_container_gallery { width: 760px; height: 437px; background-image: url('images/gallery_main_bg.png'); padding: 13px 0px 0px 15px; }



/* default link style - needed to make the :active work correctly in IE */

a, a:visited, a:hover, a:active {

color:#000;

}



/* style the outer cntaining div to fit the landscape, portrait and buttons */

#album_web {

width: 747px; 

height: 450px; 

margin: 0 0 0 0; 

background: url(images/web_design_gallery/discoveryhelicopters.jpg) 0 0px no-repeat;

float: left;

}



/* style the outer cntaining div to fit the landscape, portrait and buttons */

#album_logo {

width: 747px; 

height: 450px; 

margin: 0 0 0 0; 

background: url(images/logo_design_gallery/logo_winmax.gif) 0 0px no-repeat;

float: left;

}



/* style the outer cntaining div to fit the landscape, portrait and buttons */

#album_graphic {

width: 747px; 

height: 450px; 

margin: 0 0 0 0; 

background: url(images/graphic_design_gallery/buildtech_brochure.jpg) 0 0px no-repeat;

float: left;

}



/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */

.gallery {

padding: 10px; 

margin: 0 0 0 0; 

list-style-type: none; 

position: absolute; 

top: 575px;

width: 725px;

border: 1px #fff solid;

background: #fec385;



}

/* remove the default image border */

.gallery img {

border: 0;

}

/* make the list horizontal */

.gallery li {

float: left;

}



.gallery li.category {

width: 300px; float: left; padding: 8px 0px 0px 10px; font-weight: bold;

}



.gallery li.category2 {

width: 120px; float: left; padding: 8px 0px 0px 10px; font-weight: bold;

}



/* style the link text to be central in a surrounding box */

.gallery li a, .gallery li a:visited {

font-size: 11px;

float: left; 

text-decoration: none; 

color: #474f51; 

background: #faa953; 

text-align:center; 

width: 26px; 

height: 26px; 

line-height:24px; 

border: 1px solid #474f51;

margin: 2px;

}

/* position the images using an absolute position and hide them from view */

.gallery li a img {

position: absolute; 

top: 0px; 

left: -1px; 

visibility: hidden; 

border: 0;

}

/* fix the top position for the landscape images */

.gallery li a img.landscape {

top:-442px;

}

/* fix the left position for the portrait images */

.gallery li a img.portrait {

left:0;

border-left: 40px solid #e8e3da;

border-right: 40px solid #e8e3da;

}

/* style the hover background color for the text boxes */

.gallery li a:hover {

background: #fec385;

}

/* style the active/focus colors for the text boxes (required for IE) */

.gallery li a:active, .gallery li a:focus {

background: #444; 

color: #fff;

outline:0;

}

/* make the images visible on active/focus */

.gallery li a:active img, .gallery li a:focus img {

visibility:visible;

outline:0;

}





/**** number 2 **/



/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */

.gallery2 {

padding: 10px; 

margin: 0 0 0 0; 

list-style-type: none; 

position: absolute; 

top: 635px;

width: 725px;

border: 1px #fff solid;

background: #fec385;



}

/* remove the default image border */

.gallery2 img {

border: 0;

}

/* make the list horizontal */

.gallery2 li {

float: left;

}



.gallery2 li.category {

width: 300px; float: left; padding: 8px 0px 0px 10px; font-weight: bold;

}



/* style the link text to be central in a surrounding box */

.gallery2 li a, .gallery2 li a:visited {

font-size: 11px;

float: left; 

text-decoration: none; 

color: #474f51; 

background: #faa953; 

text-align:center; 

width: 26px; 

height: 26px; 

line-height:24px; 

border: 1px solid #474f51;

margin: 2px;

}

/* position the images using an absolute position and hide them from view */

.gallery2 li a img {

position: absolute; 

top: 0px; 

left: -1px; 

visibility: hidden; 

border: 0;

}

/* fix the top position for the landscape images */

.gallery2 li a img.landscape {

top:-502px;

}

/* fix the left position for the portrait images */

.gallery2 li a img.portrait {

left:0;

border-left: 40px solid #e8e3da;

border-right: 40px solid #e8e3da;

}

/* style the hover background color for the text boxes */

.gallery2 li a:hover {

background: #fec385;

}

/* style the active/focus colors for the text boxes (required for IE) */

.gallery2 li a:active, .gallery2 li a:focus {

background: #444; 

color: #fff;

outline:0;

}

/* make the images visible on active/focus */

.gallery2 li a:active img, .gallery2 li a:focus img {

visibility:visible;

outline:0;

}









/**** number 3 **/



/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */

.gallery3 {

padding: 10px; 

margin: 0 0 0 0; 

list-style-type: none; 

position: absolute; 

top: 695px;

width: 725px;

border: 1px #fff solid;

background: #fec385;



}

/* remove the default image border */

.gallery3 img {

border: 0;

}

/* make the list horizontal */

.gallery3 li {

float: left;

}



.gallery3 li.category {

width: 300px; float: left; padding: 8px 0px 0px 10px; font-weight: bold;

}



/* style the link text to be central in a surrounding box */

.gallery3 li a, .gallery3 li a:visited {

font-size: 11px;

float: left; 

text-decoration: none; 

color: #474f51; 

background: #faa953; 

text-align:center; 

width: 26px; 

height: 26px; 

line-height:24px; 

border: 1px solid #474f51;

margin: 2px;

}

/* position the images using an absolute position and hide them from view */

.gallery3 li a img {

position: absolute; 

top: 0px; 

left: -1px; 

visibility: hidden; 

border: 0;

}

/* fix the top position for the landscape images */

.gallery3 li a img.landscape {

top:-562px;

}

/* fix the left position for the portrait images */

.gallery3 li a img.portrait {

left:0;

border-left: 40px solid #e8e3da;

border-right: 40px solid #e8e3da;

}

/* style the hover background color for the text boxes */

.gallery3 li a:hover {

background: #fec385;

}

/* style the active/focus colors for the text boxes (required for IE) */

.gallery3 li a:active, .gallery3 li a:focus {

background: #444; 

color: #fff;

outline:0;

}

/* make the images visible on active/focus */

.gallery3 li a:active img, .gallery3 li a:focus img {

visibility:visible;

outline:0;

}



/**** number 4 **/



/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */

.gallery4 {

padding: 10px; 

margin: 0 0 0 0; 

list-style-type: none; 

position: absolute; 

top: 755px;

width: 725px;

border: 1px #fff solid;

background: #fec385;



}

/* remove the default image border */

.gallery4 img {

border: 0;

}

/* make the list horizontal */

.gallery4 li {

float: left;

}



.gallery4 li.category {

width: 300px; float: left; padding: 8px 0px 0px 10px; font-weight: bold;

}



/* style the link text to be central in a surrounding box */

.gallery4 li a, .gallery4 li a:visited {

font-size: 11px;

float: left; 

text-decoration: none; 

color: #474f51; 

background: #faa953; 

text-align:center; 

width: 26px; 

height: 26px; 

line-height:24px; 

border: 1px solid #474f51;

margin: 2px;

}

/* position the images using an absolute position and hide them from view */

.gallery4 li a img {

position: absolute; 

top: 0px; 

left: -1px; 

visibility: hidden; 

border: 0;

}

/* fix the top position for the landscape images */

.gallery4 li a img.landscape {

top:-622px;

}

/* fix the left position for the portrait images */

.gallery4 li a img.portrait {

left:0;

border-left: 40px solid #e8e3da;

border-right: 40px solid #e8e3da;

}

/* style the hover background color for the text boxes */

.gallery4 li a:hover {

background: #fec385;

}

/* style the active/focus colors for the text boxes (required for IE) */

.gallery4 li a:active, .gallery4 li a:focus {

background: #444; 

color: #fff;

outline:0;

}

/* make the images visible on active/focus */

.gallery4 li a:active img, .gallery4 li a:focus img {

visibility:visible;

outline:0;

}


/**** number 5 **/



/* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */

.gallery5 {

padding: 10px; 

margin: 0 0 0 0; 

list-style-type: none; 

position: absolute; 

top: 695px;

width: 725px;

border: 1px #fff solid;

background: #fec385;



}

/* remove the default image border */

.gallery5 img {

border: 0;

}

/* make the list horizontal */

.gallery5 li {

float: left;

}



.gallery5 li.category {

width: 300px; float: left; padding: 8px 0px 0px 10px; font-weight: bold;

}



/* style the link text to be central in a surrounding box */

.gallery5 li a, .gallery5 li a:visited {

font-size: 11px;

float: left; 

text-decoration: none; 

color: #474f51; 

background: #faa953; 

text-align:center; 

width: 26px; 

height: 26px; 

line-height:24px; 

border: 1px solid #474f51;

margin: 2px;

}

/* position the images using an absolute position and hide them from view */

.gallery5 li a img {

position: absolute; 

top: 0px; 

left: -1px; 

visibility: hidden; 

border: 0;

}

/* fix the top position for the landscape images */

.gallery5 li a img.landscape {

top:-682px;

}

/* fix the left position for the portrait images */

.gallery5 li a img.portrait {

left:0;

border-left: 40px solid #e8e3da;

border-right: 40px solid #e8e3da;

}

/* style the hover background color for the text boxes */

.gallery5 li a:hover {

background: #fec385;

}

/* style the active/focus colors for the text boxes (required for IE) */

.gallery5 li a:active, .gallery5 li a:focus {

background: #444; 

color: #fff;

outline:0;

}

/* make the images visible on active/focus */

.gallery5 li a:active img, .gallery5 li a:focus img {

visibility:visible;

outline:0;

}