﻿
/*** CMS Content ***/
    .CMSContent table {}
    .CMSContent table caption {}
    .CMSContent th, .CMSContent td {}
    .CMSContent thead th, .CMSContent thead td, .CMSContent tfoot th, .CMSContent tfoot td {background:#eee;}
    .CMSContent tbody tr:nth-child(odd) td { background:#fafafa}


/*** ASSETS ***/
    .asset { margin:0 0 50px;}
        .assetitem { float:left;}
        .assetitem .inner {}

    /* Columns */
    .cols1 .assetitem { width:100%;}
    .cols2 .assetitem { width:50%;}
    .cols3 .assetitem { width:33.333%;} /* note, Opera rounds percentages */
    .cols4 .assetitem { width:25%;}

    /* Column Inners */
    /* to work out margins: total width (920) - margins required (20 between each col) / num of cols = how wide each inner should be */
    .cols2 .col1 .inner { margin:0 10px 0 0;}
    .cols2 .col2 .inner { margin:0 0 0 10px;}
    .cols3 .col1 .inner { margin:0 13px 0 0;}
    .cols3 .col2 .inner { margin:0 7px;}
    .cols3 .col3 .inner { margin:0 0 0 13px;}
    .cols4 .col1 .inner { margin:0 15px 0 0;}
    .cols4 .col2 .inner { margin:0 10px 0 5px;}
    .cols4 .col3 .inner { margin:0 5px 0 10px;}
    .cols4 .col4 .inner { margin:0 0 0 15px;}

    /** Asset Types **/
    .asset.text {}
    .asset.text a { text-decoration:underline;}
    .asset.text a.button { text-decoration:none;}
    .asset.text ul, .asset.imagetext ul { list-style:none; margin:0 0 18px;}
    .asset.text ul > li, .asset.imagetext  ul > li { background-image:url(../images/common/extras.png); background-repeat:no-repeat; background-position:-389px 5px; padding-left:20px}
    .asset.image { padding:0;}
    .asset.image .inner {}
    .asset.image img { display:block;}
    .asset.imagetext {}
    .asset.imagetext .imgtxt img { float:left; margin-right:20px;}
    .asset.imagetext .txtimg img { float:right; margin-left:20px;}
    .asset.html { margin:0; padding:0;}
    .asset.html .inner {}
    .asset.flash { padding:0;}
    .asset.flashtext {}
    .asset.flashimage {}
    .asset.video {}
    .asset.products {}
    .asset.gallery { padding:0;}
    
    /*** Image slider ***/
    
    .imageslider { padding:0; position:relative; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
    .imageslider .slider { overflow:hidden; position:relative; width:100%;}
    .imageslider .slide-ul { position:absolute; margin:0; padding:0; list-style:none; width:100%; height:100%;}
    .imageslider .slide-li { float:left; margin:0;}
	.imageslider .slide0 {} /* if using an html slide as first slide then set the height here */
	.imageslider .slide-li > a { display:block;}
	.imageslider  .slide-lazy-img { background:#fff url(../images/common/loading.gif) no-repeat center center; text-indent:-90000px; text-align:center;}	
    .imageslider .slide-img { display:block;}
	.imageslider .slide-content > *:first-child,
	.imageslider .slide-content .slide-html > *:first-child	{ margin-top:0;}
	.imageslider .slider-loading { text-align:center; line-height:200px; font-size:15px; background:none;}
	.imageslider .slider-loading-text { padding-left:25px; background:url(../images/common/loading.gif) no-repeat left center;}    
	
    .imageslider .transitionfade { position:relative; width:100%; height:100%;}
    .imageslider .transitionfade .slide-ul-fg { position:relative; background:#fff;}
    .imageslider .slide-li-fg-fade { position:absolute;}
	.imageslider .slide-li-fg-fade.current { z-index:1;}
    .imageslider .slide-img-fg-fade { left:0; top:0;}
    .slide-fade-div-bg { position:absolute; left:0; top:0; width:100%; height:100%; z-index:0;}    
    
    /* slider control containers */
	.imageslider .controls.loading { display:none;}
	.imageslider .button.control { opacity:1; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
    .imageslider .button.control.disabled { opacity:0;}
    .imageslider .slide-control-cont { position:absolute; bottom:0; left:0; width:100%; text-align:center;}
    .imageslider .slide-control-wrap { margin:0 auto; display:inline-block; line-height:0;} .ie7 .imageslider .slide-control-wrap { display:inline;}
    .imageslider .slide-overflow { display:inline-block; overflow:hidden;}
    .imageslider .thumbsover .slide-overflow { max-width:700px;}
    .imageslider .thumbsover.numhoverthumbs .slide-overflow { width:130px;}
    .imageslider .slide-ol { list-style:none; padding:0; display:inline-block; width:auto; margin:0 auto; position:relative; line-height:0;}
    .imageslider .slide-ol-li { display:inline-block; margin:0 2px 0 0; line-height:0;} .ie7 .imageslider .slide-ol-li { float:left;}
    .imageslider .button.control { border-radius:0; text-align:center; position:static; left:auto; right:auto; top:auto; bottom:auto;}
    
	/* arrow controls */
    .imageslider .slide-arrow-wrap { display:inline;}
	.imageslider .button.control.arrows { background:none; border:none; box-shadow:none; position:absolute; z-index:2; top:50%; margin-top:-42px; height:85px; line-height:85px; width:80px;}
    .imageslider .button.control.arrows > span { text-indent:-9000px; border-width:0; background:url(../images/common/large-icons.png) no-repeat 0 0; display:block; width:32px; height:55px; padding:0; margin:0 auto; position:relative; top:15px; text-transform:capitalize; font:700 32px/32px Verdana, Geneva, sans-serif; color:#333;}
    .imageslider .button.control.arrows.moveleft { left:-20px;} .oldie .imageslider .button.control.arrows.moveleft { left:0;}
    .imageslider .button.control.arrows.moveright { right:-20px;} .oldie .imageslider .button.control.arrows.moveright { right:0;}
    .imageslider .button.control.arrows.moveright > span { background-position:0 -70px;}
    .imageslider .button.control.arrows:hover > span { background-position:0 -140px;}
    .imageslider .button.control.arrows.moveright:hover > span { background-position:0 -210px;}
    
	/* number controls */
    .imageslider .slider.hasnumbers { margin-bottom:10px;}
    .imageslider .slider.hasnumbers.thumbsunder { margin-bottom:110px;}
    .imageslider .slide-num-cont { bottom:16px;}
    .imageslider .slide-num-wrap { position:relative; z-index:1; line-height:0; bottom:10px;}
    .imageslider .slide-num-cont .number,
    .imageslider .slide-num-indicator { display:inline-block; width:10px; height:10px; border-radius:5px; border:1px solid #FFF; line-height:12px; background:#CCCCCC; margin:0; position:relative; text-indent:-9000px; box-shadow:none;}
    .imageslider .slide-num-indicator { box-shadow:none; border-width:0;}
    .imageslider .slide-num-cont .number:hover { background-color:#333; box-shadow:none;}
    .imageslider .slide-num-indicator { background:#333; position:absolute; text-indent:-9000px; top:0; z-index:1;}
    .ie7 .imageslider .slide-num-cont .number { display:block; padding:6px; width:0; height:0; font-size:0; line-height:0;}
    .ie7 .imageslider .slide-num-indicator { display:none;}
    .ie7 .imageslider .slide-num-cont .slide-ol-li.current,
    .ie7 .imageslider .slide-num-cont .slide-ol-li.nextslide { background:#333;}
    .ie7 .imageslider .slide-num-cont .slide-ol-li.current .number,
    .ie7 .imageslider .slide-num-cont .slide-ol-li.nextslide .number { background:none;}
    
	/* thumbnail controls */
    .imageslider .slider.thumbsunder { margin-bottom:82px;}
    .imageslider .slide-thumb-cont { background:#777; bottom:0; line-height:0; box-shadow:inset 0 -3px 5px -2px rgba(0,0,0,0.2);}
    .ie7 .imageslider .slide-thumb-cont { display:none !important;}
    .imageslider .thumbsover .slide-thumb-cont { background:none; bottom:35px; left:50%; width:700px; margin-left:-350px; box-shadow:none;}
    .imageslider .thumbsover.numhoverthumbs .slide-thumb-cont { bottom:50px; left:50%; width:130px; margin-left:-58px; z-index:3;}    
    .imageslider .thumbsunder.hasnumbers .slide-thumb-cont { bottom:30px;}
    .imageslider .slide-thumb-wrap { display:none; position:relative;}
    .imageslider .hasnumbers .slide-thumb-wrap { display:block;}
    .imageslider .slide-thumb-cont .slide-ol { background:#333;}
    .imageslider .slide-thumb-cont .slide-ol-li { line-height:0; margin:0; overflow:hidden; vertical-align:middle;}
    .imageslider .slide-thumb-cont .slide-ol-li:first-child { margin-left:0;}
    .imageslider .slide-thumb-cont .thumbnail,
    .imageslider .slide-thumb-cont .nextslide .thumbnail.button.control:hover,
    .imageslider .slide-thumb-indicator { height:74px; width:130px; display:block; margin:0; opacity:0.5; overflow:hidden; text-align:center; line-height:normal; position:relative; box-shadow:none;}
    .imageslider .thumbsover.numhoverthumbs .slide-thumb-cont .thumbnail,
    .imageslider .thumbsover.numhoverthumbs .slide-thumb-indicator { opacity:1;}
	.imageslider .slide-thumb-cont .thumbnail.nothumb { background:#fff;}
    .imageslider .slide-thumb-cont .slide-thumb.lazy { height:74px; width:130px; text-indent:-90000px; display:inline-block; margin:0; background:url(../images/common/loading-search.gif) no-repeat center center;}
	.imageslider .slide-thumb-cont .slide-thumb { width:155px; margin-left:-13px; margin-top:0;}
    .imageslider .slide-thumb-cont .slide-thumb-fg { position:absolute; top:0; left:0;}
    .imageslider .slide-thumb-cont .current .thumbnail.button.control,
    .imageslider .slide-thumb-cont .thumbnail.button.control:hover { border-color:#fff; opacity:1;}
    .imageslider .slide-thumb-indicator { height:72px; width:128px; overflow:visible; opacity:1; border:1px solid #fff; box-shadow:0 0 4px rgba(0,0,0,0.4); position:absolute; text-indent:-9000px; top:0; z-index:2;}
    .imageslider .slide-thumb-indicator:before { content:""; display:block; width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-bottom:12px solid #fff; position:absolute; top:-12px; left:50%; margin-left:-12px; z-index:1; -webkit-filter:drop-shadow(0 -2px 2px rgba(0,0,0,0.2)); -moz-filter:drop-shadow(0 -2px 2px rgba(0,0,0,0.2)); -ie-filter:drop-shadow(0 -2px 2px rgba(0,0,0,0.2)); filter:drop-shadow(0 -2px 2px rgba(0,0,0,0.2));}
    .imageslider .numhoverthumbs .slide-thumb-indicator:before { border-bottom-width:0; border-top:12px solid #fff; top:auto; bottom:-12px; -webkit-filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5)); -moz-filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5)); -ie-filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5)); filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5));}
    .imageslider .slide-thumb-html { background:#333; color:#fff;}
    .imageslider .slide-thumb-content { padding:0 10px;}
	
    /* thumbnail slider arrow controls */
    .imageslider .slide-thumb-arrows .button.control.arrows { z-index:2; background-color:#000; opacity:0.5; border-radius:0; width:25px; height:80px; top:0; margin-top:0; box-shadow:none;}
    .imageslider .numhoverthumbs .slide-thumb-arrows .button.control.arrows { display:none;}
    .imageslider .slide-thumb-arrows .button.control.arrows:hover { background-color:rgba(0,0,0,0.6); opacity:1;}
    .imageslider .slide-thumb-arrows .button.control.arrows.disabled,
    .imageslider .slide-thumb-arrows .button.control.arrows.disabled:hover {}
    .imageslider .thumbsover .slide-thumb-arrows .button.control.arrows.disabled {}
    .imageslider .slide-thumb-arrows .button.control.arrows > span { color:#fff; font-size:22px; width:25px; height:26px; line-height:26px; top:50%; margin-top:-13px; background:none; text-indent:0;}
    .imageslider .slide-thumb-cont .slide-thumb-arrows .button.control.arrows.moveleft { left:0;}
    .imageslider .slide-thumb-cont .slide-thumb-arrows .button.control.arrows.moveright { right:0;}
    .imageslider .slide-thumb-cont .slide-thumb-arrows .button.control.arrows.moveleft > span { background:url(../images/common/icons.png) no-repeat center -411px;}
    .imageslider .slide-thumb-cont .slide-thumb-arrows .button.control.arrows.moveright > span { background:url(../images/common/icons.png) no-repeat center -371px;}
    
	/* autoplay controls - play and pause controls */
    .imageslider .slide-playpause-wrap { display:none; position:absolute; z-index:1; top:50%; left:50%;}
    .imageslider .slide-playpause { float:left; margin:0 5px;}
    .imageslider .slide-playpause .button { background:#fff; display:inline-block; width:50px; height:50px; line-height:50px; margin:-25px 0 0 -25px; border-radius:100px; opacity:0;}
    .imageslider:hover .slide-playpause-wrap .button { opacity:1;}
    .imageslider .slide-playpause .button span { display:inline-block; text-indent:-9000px; top:0; font-size:12px; font-weight:400; white-space:nowrap; width:50px; height:50px; text-shadow:none;}
    .imageslider .slide-playpause .button.play span { background:url(../images/common/large-icons.png) no-repeat center -620px;}
    .imageslider .slide-playpause .button.pause span { background:url(../images/common/large-icons.png) no-repeat center -550px;}
    .imageslider .slide-playpause .button:hover {}
    .imageslider .slide-playpause .button.disabled { display:none;}
    
	/* slide timer - animated bar showing how long before next slide change */
    .imageslider .slide-timer { width:100%; position:absolute; z-index:1; bottom:0; left:0; height:4px; background:rgba(0,0,0,0.5);}
    .imageslider .thumbsunder .slide-timer { bottom:82px;}
    .imageslider .hasnumbers .slide-timer { bottom:30px;}
    .imageslider .thumbsunder.hasnumbers .slide-timer { bottom:110px;}
    
	/* slide counter - shows which slide you are on eg 1 of 16 */
    .imageslider .slide-counter { display:none; opacity:0; position:absolute; z-index:1; bottom:10px; left:50%; width:80px; margin-left:-45px; text-align:center; background:#333; background:rgba(0,0,0,0.5); color:#fff; text-shadow:0 0 1px #000; padding:5px 5px; border-radius:10px; font-size:10px; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
    .imageslider:hover .slide-counter { opacity:1;}
    .imageslider .hasnumbers .slide-counter { bottom:40px;}
    .imageslider .thumbsunder .slide-counter { bottom:95px; left:auto; right:5px; margin:0;}
	.imageslider .thumbsover .slide-counter { bottom:120px;}
    .imageslider .thumbsunder.hasnumbers .slide-counter { bottom:auto; top:5px;}
	
	/* slide captions */
	.imageslider .slide-caption { position:absolute; z-index:1; left:0; top:0; overflow:hidden; width:100%; padding-top:20px;} 
	.imageslider .slide-caption-inner { padding:10px 100px 30px 10px; color:#fff; opacity:0.8; position:relative; top:0; background:#000; background:rgba(0,0,0,0.6);} .oldie .imageslider .slide-caption-inner { opacity:0.7;} /* the difference between top and bottom padding is used as a bottom padding offset to prevent gaps in the background when animating */
	.imageslider .slide-caption-inner p { margin:0 0 6px; font-size:13px; text-shadow:0 0 1px rgba(0,0,0,0.5);}
	.imageslider .slide-caption-title h3 { font-weight:700; font-size:14px; margin:0;}
	.imageslider .slide-caption-control { background:#000; background:rgba(0,0,0,0.6); opacity:0.8; color:#fff; color:rgba(255,255,255,0.5); display:inline-block; padding:0 10px; line-height:20px; height:20px; position:absolute; top:0px; right:0;}
	.imageslider .slide-caption-control:hover { color:#fff;}

    
    

/*** REGIONS ***/
    .region { float:left;}
    .system.region { width:100%;}
        .reg180 { width:180px;}
        .reg240 { width:240px;}
        .reg255 { width:255px;}
        .reg480 { width:480px;}
        .reg705 { width:705px;}
        .reg720 { width:720px;}
        .reg780 { width:780px;}
        .reg960 { width:960px;}
        
        .reg240 + .reg720 .asset { padding-left:0;}
        .reg720 + .reg240 .asset { padding-left:0;}
        .reg480 .asset { padding-left:10px;}        
        .reg480:first-child .asset { padding-right:10px; padding-left:20px} /* IE7 doesnt understand :last-child so have to be backwards */
        .reg480:first-child .html { padding:0;}