/**************************************************************/
/*           Barebone Framework Base Structure                */
/*                                                            */
/*              Developed by SYZYGY UK LTD                    */
/*                                                            */
/*         Project:	Debeers Forevermark Consumer              */
/*         Module:	New User Interface                	      */
/**************************************************************/

/**********************/
/*    Grid System     */
/**********************/
#grid						{ background: #eee url(../images/main_bg.jpg) repeat-x; }
#grid .row					{ background-color: #FFF; overflow: hidden; }
#grid .row .col .wrap		{ padding: 20px 5px 0; }
#grid .row .col .wrap h1	{ font-size: 1em; font-weight: normal; text-transform: uppercase; margin: 5px 0 0 2px; background: transparent url(../images/left_brd.gif) no-repeat scroll 0pt 2px; padding-left: 8px; }
#grid .row h2				{ font-size: 1.1em; font-weight: normal; text-transform: uppercase; margin: 8px 0 15px 2px; padding: 0 0 0 8px; border-left: 1px solid #000; }
#grid .row #breadcrumbs	{ color: #999; font-size: .8em; text-transform: uppercase; font-weight: normal; background-color: #FFF; padding: 4px 0px 2px 14px; border-bottom: 1px solid #999; }
#grid .row #breadcrumbs strong { color: #000; }
#grid .row img				{ margin: 10px 0; }
#grid .row p				{ font-size: 0.9em; margin: 10px 0; }
#grid .row .more			{ float: right; font-size: 0.8em; text-decoration: none; text-transform: uppercase; }

/**********************/
/*    Small Columns   */
/**********************/
#small .row .col			{ float: left; position: relative; width: 225px; height: 365px; color: #000; background: transparent url(../images/faded_line.gif) no-repeat top right; padding: 0 10px 0; z-index: 1; overflow-x: hidden; overflow-y: auto;  }
#small .row #col-last		{ background-image: none; padding: 0; width: 244px; }
#small .row #col-last .wrap	{ padding-left: 12px; }
#small .row .col .text-wrap	{ position: absolute; top: 40px; width: 215px; }

#small .row #col-image .thumbs { position: absolute; top: 0; width: 70px; list-style-type: none; padding: 20px; margin: 0; }
#small .row #col-image .thumbs li { float: left; width: 60px; height: 60px; border: 1px solid #fff; margin: -1px; }
#small .row .col ul, #small .row .col ol { font-size: 0.9em; padding-left: 15px; margin-left: 8px; }
#small .row .col ul li, #small .row .col ol li { margin-bottom: 2px; }
#small .row #col-image-slim { padding-left: 0; }
#small .row #col-image,
#small .row #carousel-panel	{ width: 489px; padding: 0; overflow: hidden; }
#small .row #col-image img,
#small .row #col-last img,
#small .row #carousel-panel #carousel-content img,
#small .row #col-image-slim img	{ margin: 0; display: block; }

/* Image Viewer */
#small .row .col #viewer { position: relative; }
#small .row .col #viewer img { position: absolute; top: 0; left: 0; }

/* Carousel */
#small .row .jcarousel-skin-fm { width: 490px; height: 60px; bottom: 18px; }
#small .row .jcarousel-skin-fm .jcarousel-container-horizontal { width: 442px; height: 70px; margin: 0; padding: 0px 24px; }
#small .row .jcarousel-skin-fm .jcarousel-clip-horizontal { width: 432px; margin-left: 6px; }
#small .row .jcarousel-skin-fm .jcarousel-item { width: 88px; margin-right: 0px; }


/**********************/
/*   Medium Columns   */
/**********************/
#medium .row .col			{ float: left; position: relative; width: 300px; height: 365px; color: #000; background: transparent url(../images/faded_line.gif) no-repeat top right; padding: 0 10px 0; z-index: 1; overflow: hidden; }
#medium .row #col-last		{ background-image: none; padding: 0; width: 339px; }
#medium .row #col-last .wrap{ padding-left: 12px; }
#medium .row .col .text-wrap	{ position: absolute; top: 40px; width: 290px; }
#medium .row .col ul, #medium .row .col ol { font-size: 0.9em; padding-left: 15px; margin-left: 8px; }
#medium .row .col ul li, #medium .row .col ol li { margin-bottom: 2px; }

#medium .row #col-image		{ width: 488px; padding: 0; }
#medium .row #col-image img,
#medium .row #col-last img,
#medium .row #carousel-panel #carousel-content img,
#medium .row #col-image-slim img	{ margin: 0; }

/**********************/
/*    Large Columns   */
/**********************/
#large .row .col			{ float: left; position: relative; width: 472px; height: 365px; color: #000; background: transparent url(../images/faded_line.gif) no-repeat top right; padding: 0 10px 0; z-index: 1; overflow: hidden; }
#large .row #col-last		{ background-image: none; padding: 0; width: 487px; }
#large .row #col-last .wrap	{ padding-left: 12px; }
#large .row .col .text-wrap	{ position: absolute; top: 40px; width: 465px; }
#large .row .col ul, #large .row .col ol { font-size: 0.9em; padding-left: 15px; margin-left: 8px; }
#large .row .col ul li, #large .row .col ol li { margin-bottom: 2px; }

#large .row #col-image		{ width: 488px; padding: 0; }
#large .row #col-image img,
#large .row #col-last img,
#large .row #carousel-panel #carousel-content img,
#large .row #col-image-slim img	{ margin: 0; }

/**********************/
/*    Huge Columns    */
/**********************/
#huge .row .col				{ float: left; position: relative; height: 360px; color: #000; background: transparent url(../images/faded_line.gif) no-repeat  scroll 482px 0; padding: 0 10px 0; z-index: 1; overflow: hidden; }
#huge .row #col-thumb-list	{ float: left; width: 940px; padding: 0; margin: 10px 14px; list-style: none; }
#huge .row #col-thumb-list	li { float: left; width: 440px; height: 75px; margin-right: 30px; }
#huge .row #col-thumb-list img	{ margin: 0; float: left; border: 1px solid #D4D3D2; }
#huge .row #col-thumb-list	.list-item { margin-left: 80px; font-size: 0.9em; }
#huge .row #col-thumb-list	.list-item h1 { margin: 0; font-size: 1.1em; }
#huge .row #col-thumb-list	.list-item a { line-height: 2em; text-decoration: none; }

/**********************/
/*  Hub Page Carousel */
/**********************/
#small .row #col-thumbs { position: relative; width: 319px; height: 385px; background: none; padding: 0; overflow: hidden; }
#small .row #col-thumbs .thumbs { margin: 0; padding: 0;  }
#small .row #col-thumbs .thumbs li { display: inline; margin-bottom: 0; }
#small .row #col-thumbs .thumbs li a { float: left; display: block; position: relative; text-decoration: none; border: 1px solid #000; margin-top: -1px; }
#small .row #col-thumbs .thumbs img { display: block; float: right; width: 80px; margin: 0; padding: 0; }
#small .row #col-thumbs .thumbs li h3 { float: left; width: 223px; text-transform: uppercase; text-decoration: none; padding: 10px 0 5px 14px; }
#small .row #col-thumbs #nav-up { float: left; width: 303px; height: 15px; background-color: #fff; border-left: 1px solid #000; border-right: 1px solid #000; padding: 8px 0 7px 14px; }
#small .row #col-thumbs #nav-down { float: left; width: 303px; height: 16px; background-color: #fff; border-left: 1px solid #000; border-right: 1px solid #000; padding: 8px 0 7px 14px; }
#small .row #col-thumbs #nav-up span,
#small .row #col-thumbs #nav-down span { float: left; }
#small .row #col-thumbs #nav-up a { display: block; width: 15px; height: 12px; background: transparent url(../images/hub_nav.gif) no-repeat scroll left top; margin: 0 auto; }
#small .row #col-thumbs #nav-up a.last { background: transparent url(../images/hub_nav.gif) no-repeat scroll right top; }
#small .row #col-thumbs #nav-down a { display: block; width: 15px; height: 12px; background: transparent url(../images/hub_nav.gif) no-repeat scroll left bottom; margin: 0 auto; }
#small .row #col-thumbs #nav-down a.last { background: transparent url(../images/hub_nav.gif) no-repeat scroll right bottom; }
#small .row #viewer-panel { position: relative; width: 660px; height: 385px; padding: 0; overflow: hidden; }
#small .row #viewer-panel img { margin: 0; }
#small .row #viewer-panel .viewer-content { position: absolute; left: 0; bottom: 0; width: 620px; height: 120px; background-color: #fff; text-align: right; padding: 0 20px 10px; }
#small .row #viewer-panel .viewer-content h2 { border: none; }