/*
Theme Name: Horizontal Brand Box
Theme URI: http://Analogo.net/HorizontalBrandBox/
Description: Expand the web space frontiers.
Author: Analogo
Author URI: http://analogo.net/
Tags: horizontal, floating, resizable, panoramic

	HorizontalBrandBox 1.0

	This premium theme is a creation of "Analogo - digital authors" team.

*/


@charset "utf-8";
/* CSS Document */



/* //////// MAIN DECLARATIONS //////// */
Body { margin:0; padding:0; color:#222; font-family:Arial; font-size:14px; font-weight:normal; background:#222 }

A { color:#444; text-decoration:none; outline:none }
A:hover { color:#000; text-decoration:none }

Img { border:none; margin-bottom:-3px; vertical-align:baseline; float:left }

H1, H2, H3, H4, H5, H6 { width:100%; font-family:Arial; font-weight:normal; color:#000; padding:0 10px 10px 0; margin:0; float:left }
H1 { font-size:40px; font-weight:bold; letter-spacing:1px }
H2 { font-size:35px }
H3 { font-size:29px; font-weight:bold }
H4 { font-size:23px }
H5 { font-size:20px; font-weight:bold }
H6 { font-size:16px; text-transform:uppercase; letter-spacing:1px; padding:0 5px 5px 0; font-weight:bold }

H1 Span { font-size:18px; color:#333; text-transform:uppercase; letter-spacing:1px; margin:5px 0 10px 0; display:block }

Ul { padding:0 20px 20px 20px; margin:0; float:left }
Li { margin-bottom:7px }

P { padding:0; margin:0 0 20px 0; line-height:20px; text-align:justify; float:left }
/* /////////////////////////////////// */



/* //////// MAIN NAVIGATION STYLES //////// */
.Navigation { width:180px; height:auto; z-index:1; position:fixed; bottom:0; left:0; padding:30px 0 30px 30px; background:url(img/NavigationBgr.png) repeat }

.Navigation .Logo { margin: -30px 0 0 -30px;}

.NavigationArrow { width:190px; height:47px; z-index:-1; position:absolute; top:30px; left:30px; background:url(img/NavigationArrow.png) no-repeat top right }

.Navigation A { width:160px; font-size:18px; color:#FFF; padding:6px 10px 4px 10px; margin-bottom:1px; display:block; float:left }
.Navigation A:hover { color:#FFF; border-bottom:1px solid #333; margin:0; background:url(img/NavigationBgr.png) repeat }

.Navigation .Active { font-size:30px }
.Navigation .Active:hover { border:none; margin-bottom:1px; background:none }
.Navigation .StaticActive { width:170px; font-size:30px; background:url(img/NavigationArrow.png) no-repeat top right }
.Navigation .StaticActive:hover { width:170px; border:none; margin-bottom:1px; background:url(img/NavigationArrow.png) no-repeat top right }

.SubNavigation { margin-bottom:1px }
.SubNavigation A { width:160px; font-size:18px; word-spacing:5px; text-align:right; color:#FFF; padding:6px 10px 4px 10px; background:#444; margin-bottom:1px; display:block; float:left }
.SubNavigation A:hover {  margin-bottom:1px; border:none; background:#333 }

.SubNavigation .Active { width:160px; font-size:18px; word-spacing:5px; text-align:right; color:#FFF; padding:6px 17px 4px 10px; background:url(img/SubNavigationActive.png) no-repeat top right; margin-bottom:1px; display:block; float:left }
.SubNavigation .Active:hover { border:none; margin-bottom:1px; background:url(img/SubNavigationActive.png) no-repeat top right }

.SubNavSpacer { width:100%; clear:both; height:0px }
/* //////////////////////////////////////// */



/* //////// MAIN CONTAINERS STYLES //////// */
.Screen { width:7650px; height:800px; float:left }
.Page { width:1200px; float:left }
.Header { height:350px }
.Header Img { width:100%; height:100% }
.Content { min-height:350px; text-align:justify; padding:30px 30px 30px 240px; overflow:hidden; background:url(img/PageArrow.png) no-repeat top left }
.Footer { width:100%; height:27px; padding:10px 0; z-index:10; position:fixed; bottom:0; left:0; border-top:1px solid #333; background:#000 }
.Feeds { width:200px; padding-left:20px; display:block; float:left }
.Feeds Img { margin-right:5px }
.Copyright { color:#CCC; font-weight:bold; line-height:27px; margin-right:20px; float:right }
/* //////////////////////////////////////// */



/* //////// SUB PAGE STYLES //////// */
.SubPage Img { margin-bottom:20px; float:left }
.SubPage H2 { width:60%; margin-top:-5px; float:left }
/* ///////////////////////////////// */



/* //////// SHOWCASE STYLES //////// */
.Showcase1 { width:660px; font-size:13px; text-align:justify; line-height:20px; padding:0 15px 0 15px; margin-bottom:20px; border-bottom:1px solid #333; background:url(img/ShowcaseBgr.png) repeat-x bottom #EEE; float:left }
.Showcase1 .ImgDiv { float:left; display:block; margin:0 15px 5px -15px }
.Showcase1 Img { margin:0; padding:0 }
.Showcase1 H4 { width:300px; margin:15px 0 5px 0; float:right }
.Showcase1 P { padding:0 15px; text-align:justify }
.Showcase1 .BaseBtn { margin-right:-15px }


.Showcase2Row { width:730px; float:left }
.Showcase2 { width:335px; margin:0 20px 20px 0; font-size:13px; text-align:justify; line-height:20px; border-bottom:1px solid #333; background:url(img/ShowcaseBgr.png) repeat-x bottom #EEE; float:left }
.Showcase2 Img { margin:0; padding:0 }
.Showcase2 H4 { width:335px; margin:15px 15px 10px 15px; padding:0 }
.Showcase2 H5 { margin:10px; padding:0 }
.Showcase2 P { padding:0 15px 0 15px }


.Showcase3Row { width:730px; float:left }
.Showcase3 { width:210px; font-size:13px; text-align:justify; line-height:20px; margin:0 20px 15px 0; border-bottom:1px solid #333; background:url(img/ShowcaseBgr.png) repeat-x bottom #EEE; display:block; float:left }
.Showcase3 H4 { width:180px; margin:15px 15px 0 15px }
/* ///////////////////////////////// */



/* //////// COLUMN STYLES //////// */
.ColumnRow { width:100%; min-width:690px; float:left }
.Column2 { width:45%; text-align:left; margin-right:30px; float:left }
.Column3 { width:29%; text-align:left; margin-right:30px; float:left }
.Column4 { width:20%; text-align:left; margin-right:30px; float:left }
/* ///////////////////////////////// */



/* //////// BLOG STYLES //////// */
.BlogContent { width:690px; float:left }
.BlogPost { width:460px; float:left }
.BlogPostHead { width:440px; padding:8px 10px; background:#000; float:left }
.BlogPostDate { font-size:18px; font-weight:bold; word-spacing:4px; color:#EEE; float:left }
.BlogPostDate Span { color:#CCC }

.BlogPostInfo { font-family:Arial; font-size:16px; text-transform:uppercase; letter-spacing:1px; color:#EEE; float:right }
.BlogPostInfo A { color:#ffcc99 }

.BlogPostSummary { line-height:20px; border-bottom:1px solid #666; background:url(img/BlogPostSummaryBgr.png) repeat-x bottom #EEE; float:left }
.BlogPostSummary H4 { width:420px; padding:15px 15px 0 15px }
.BlogPostSummary P { padding:0 15px 10px 15px; font-size:13px; margin:0 }

.BlogComments { width:450px; margin-right:280px; float:left }
.BlogCommentRow { width:450px; padding:0; margin-bottom:20px; list-style:none; float:left }
.BlogCommentAvatar { width:80px; height:80px; padding:0; margin:0; text-align:center; border-bottom:1px solid #333; background:url(img/NavigationBgr.png) repeat; float:left }
.BlogCommentSays { width:350px; float:right }
.BlogCommentSays P { width:350px; margin:0 0 3px 0; font-size:13px; line-height:16px }
.BlogCommentSays A { font-size:12px; line-height:18px; font-weight:bold }
.BlogCommentNav { width:450px; padding:0; margin-top:20px; margin-bottom:50px; float:left }
.BlogReplyBox { width:450px; float:left; margin-top:20px }

.BlogCommentForm { width:500px; margin-right:280px; float:left }

.BlogCleaner { width:500px; height:20px; clear:both; float:left }

.BlogSide { width:210px; margin-left:20px; float:right }
.BlogNavigation { width:200px; margin-bottom:10px; float:left }
.BlogNavigation A { width:185px; font-size:18px; color:#000; text-transform:uppercase; letter-spacing:1px; padding:5px 10px 7px 10px; border-bottom:1px solid #444; background:url(img/BlogNavigation.png) repeat-x top left; display:block; float:left }
.BlogNavigation A:hover { color:#000; background:url(img/BlogNavigationHover.png) repeat-x top left #EEE }
.BlogNavigation .Active { width:185px; font-size:18px; color:#EEE; text-transform:uppercase; letter-spacing:1px; padding:5px 10px 7px 17px; margin-left:-7px; border:none; background:url(img/BlogNavigationActive.png) no-repeat top left; display:block; float:left }
.BlogNavigation .Active:hover { color:#FFF; background:url(img/BlogNavigationActive.png) no-repeat top left }

.PassProtForm {width:270px; height:27px}
.PassProtForm input{width:200px; margin:0; float:left}
.PassProtForm input[type=submit]{width:60px; height:27px; float:left}
/* ///////////////////////////// */


/* //////// SEARCH STYLES //////// */
.SearchResults { width:430px; padding:0; float:left }
.SearchResults H2 { width:430px }
.SearchResults H3 { width:430px }
.SearchResults P { float:none; margin-bottom:10px }
/* ///////////////////////////// */


/* //////// BUTTON STYLES //////// */
.BaseBtn { font-family:Arial; font-size:16px; word-spacing:4px; text-transform:uppercase; color:#EEE; padding:7px 9px 6px 10px; margin-left:1px; background:#444; display:block; float:right }
.BaseBtn:hover { color:#EEE; background:#000 }

.SendMessageBtn { width:125px; height:31px; padding:0; margin:0; border:none; background:url(img/SendMessageBtn.png) top left no-repeat; cursor:pointer; float:right }
.SendMessageBtn:hover { background:url(img/SendMessageBtn.png) bottom left no-repeat }

.SearchBtn { width:73px; height:31px; padding:0; margin:0; border:none; background:url(img/SearchBtn.png) top left no-repeat; cursor:pointer; float:right }
.SearchBtn:hover { background:url(img/SearchBtn.png) bottom left no-repeat }

.PostCommentBtn { width:129px; height:32px; padding:0; margin:0; border:none; background:url(img/PostCommentBtn.png) top left no-repeat; cursor:pointer; float:right }
.PostCommentBtn:hover { background:url(img/PostCommentBtn.png) bottom left no-repeat }

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



/* //////// CONTACT FORM STYLES //////// */
.ContactBox { width:690px; float:left }
.ContactForm { width:450px; margin-bottom:20px; float:left }
.ContactMap { width:220px; float:right }

Input { width:300px; height:16px; margin-bottom:5px; padding:5px; font-family:Arial; font-size:14px; line-height:14px; color:#333; background:url(img/InputBgr.png) repeat-x top left #EEE; border:none; border-bottom:1px solid #333 }
Textarea { width:440px; height:100px; margin-bottom:-1px; padding:5px; font-family:Arial; font-size:14px; line-height:18px; color:#333; background:url(img/TextareaBgr.png) repeat-x top left #EEE; border:none; border-bottom:1px solid #333 }

.InputError { background:url(img/InputErrorBgr.png) repeat-x top left #ffffcc }
.TextareaError { background:url(img/TextareaErrorBgr.png) repeat-x top left #ffffcc }
/* ///////////////////////////// */



/* //////// ZOOM STYLES //////// */
.ZoomHolder { z-index:12; position:fixed; top:0; left:0; background:url(img/Loading.gif) no-repeat center #333 }
.ZoomHolderBar { width:100%; height:32px; z-index:-1; position:absolute; background:#333 }/* With title */
.ZoomHolderBar2 { width:100%; height:32px; z-index:-1; position:absolute; background:none }/* Without title */
.ZoomHolder H3 { width:auto; margin:5px 10px 6px 10px; color:#EEE; font-size:18px; float:left }
.ZoomHolder .BaseBtn { float:right }

.ZoomHolder .Next { z-index:13; position:absolute; right:0; cursor: pointer; background: url(TransparentBgr.png) repeat }
.ZoomHolder .Prev { z-index:14; position:absolute; left:0; cursor: pointer; background: url(TransparentBgr.png) repeat }
.ZoomHolder .Next .BaseBtn, .Prev .BaseBtn { font-family:Arial; font-size:16px; word-spacing:4px; color:#EEE; padding:7px 9px 6px 10px; margin: 0 10px; background:#000; visibility:hidden; cursor:pointer }

.ZoomImgHolder { overflow:hidden; border:10px solid #000; float:left }
.ZoomHolderBg { z-index:11; position:fixed; top:0; left:0; background:#000 }
/* //////////////////////////////////// */



/* //////// MISCELLANEOUS ELEMENTS //////// */
.NextPageBtn { width:110px; height:100%; z-index:9; position:fixed; top:0; right:0; display:none; background:#000 }
#NextLabel { z-index:8; position:fixed; display:none }
.ImageLoader { z-index:auto; position:absolute; background:url(img/Loading.gif) no-repeat center #000 }
.ImageLoaderHover { z-index:auto; position:absolute; background:url(img/Loading.gif) no-repeat center }
.ImageHover { z-index:auto; position:absolute; background:#000 }
.ImageZoomHover { z-index:auto; position:absolute; background:url(img/ZoomIcon.png) no-repeat center #000 }
.ImageZoomVideoHover { z-index:auto; position:absolute; background:url(img/PlayIcon.png) no-repeat center #000 }
.PageLoader { z-index:auto; position:fixed; background:url(img/Loading.gif) no-repeat center}
.Cleaner { width:780px; height:50px; clear:both; display:block; float:left }
/* //////////////////////////////////////// */



/* ///////////////////// !! Below are CSS Styles of HORIZONTAL BOX - Version 1 */
.CategoryBox { width:730px; float:left }
.Category { width:220px; margin:0 15px 20px 0; border-bottom:1px solid #666; background:url(img/CategoryBgr.png) repeat-x bottom left #EEE; float:left }
.Category Div { width:200px; padding:10px 15px; text-align:left; line-height:23px; color:#000; float:left }

.Showcase { width:730px; padding:0; margin:0; list-style:none; float:left }
.Showcase Li { width:220px; margin:0 15px 15px 0; border-bottom:1px solid #666; background:url(img/ShowcaseBgr.png) repeat-x bottom left #EEE; float:left }
.Showcase Div { padding:5px 10px; text-align:left }
.Showcase H4 { margin-top:10px }