/*
	Mosaic - Sliding Boxes and Captions jQuery Plugin
	Version 1.0.1
	www.buildinternet.com/project/mosaic
	
	By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
	Released under MIT License / GPL License
*/

/* General Mosaic Styles ========================================= */
.mosaic-block
{
    float: left;
    position: relative;
    overflow: hidden;
    width: 124px;
    height: 86px;
    margin: 0; /*background:#111 url(../images/progress.gif) no-repeat center center;*/
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.destinations-overview-page .mosaic-block
{
    width: 269px;
    height: 143px;
    margin: 0 27px 38px 0;
}
.real-stories-contact-students-overview .mosaic-block
{
    width: 269px;
    height: 161px;
    margin: 0 27px 38px 0;
    background: url(http://www.ef.com.ec/sitecore/__/2012/hsy/images/bg_tileBlue.png) repeat-x #4f6c7a;
}
.mosaic-block.last
{
    margin-right: 0;
}

.destinations-overview-page .mosaic-block.last {margin-right: 0;}

.mosaic-block .details
{
    padding: 10px;
}
.real-stories-contact-students-overview .mosaic-block .details
{
    overflow: hidden;
    font-size: 12px;
    font-weight: bold;
    height: 81px;
    width: 209px;
    color: #fff;
    padding: 25px 30px;
}

.mosaic-block h4
{
    font-size: 11px;
    color: #fff;
    margin-top: 20px; /*text-shadow: 1px 1px 0 black;*/
}

.other.mosaic-block p
{
    font-size: 12px;
    font-weight: normal;
}

.mosaic-block p
{
    color: #fff; /*text-shadow: 1px 1px 0 black;*/
    margin: 0;
}


.mosaic-backdrop
{
    display: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.mosaic-backdrop.noquote {display:block;}

.mosaic-block i
{
    margin-right: 4px;
}

/* Real stories mosaic styles ========================================= */
.real-stories-contact-students-overview .mosaic-backdrop
{
    padding: 30px 25px;
    width: 219px;
    height: 101px;
    z-index:9;
}
.real-stories-contact-students-overview .mosaic-backdrop img
{
    float:left;
    margin: 0 16px 6px 0;
}

.contactstudentdata 
{
    position:relative
}

.real-stories-contact-students-overview .mosaic-backdrop a {color:#fff; text-decoration: underline;}

.mosaic-overlay
{
    display: none;
    z-index: 5;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
}

.dummyOverlay, .dummyOverlay:hover, .dummyOverlay:visited {
    background: url("http://www.ef.com.ec/sitecore/__/2012/hsy/images/bg-black.png") repeat scroll 0 0 transparent;
    height: 15px;
    width:239px;
    display:block;
    color:#fff;
    position:relative;
    top:136px;
    padding:4px 15px 6px;
    font-size: 11px;
    font-weight: bold;
    text-align:right;
    z-index:10;
    cursor:pointer;
}

.mosaic-overlay p
{
    margin: 0;
    font-size:11px !important;
}

/*** Custom Animation Styles (You can remove/add any styles below) ***/
.circle .mosaic-overlay
{
    background: url(../img/hover-magnify.png) no-repeat center center;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
    filter: alpha(opacity=00);
    display: none;
}

.fade .mosaic-overlay
{
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
    filter: alpha(opacity=00);
    background: url(http://www.ef.com.ec/sitecore/__/2012/hsy/images/bg-black.png);
}

.real-stories-contact-students-overview .fade .mosaic-overlay {background:#000;}

.bar .mosaic-overlay
{
    bottom: -30px;
    height: 30px;
    background: url(http://www.ef.com.ec/sitecore/__/2012/hsy/images/bg-black.png);
}

.bar.other .mosaic-overlay
{
    bottom: -70px;
    height: 70px;
    background: url(http://www.ef.com.ec/sitecore/__/2012/hsy/images/bg-black.png);
}

.bar h4, .real-stories-contact-students-overview h4
{
    margin-top: -4px;
    font-size: 14px;
    font-weight: bold;
}
.real-stories-contact-students-overview h4
{
    margin-top: -6px;
}

.bar2 .mosaic-overlay
{
    bottom: -50px;
    height: 100px;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
}

.bar2 .mosaic-overlay:hover
{
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}

.bar3 .mosaic-overlay
{
    top: -100px;
    height: 100px;
    background: url(http://www.ef.com.ec/sitecore/__/2012/hsy/images/bg-black.png);
}
/*** End Animation Styles ***/

/* scrollable */


/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollablemosaic
{
    /* required settings */
    position: relative;
    overflow: hidden;
    width: 868px;
    height: 258px;
}

.ie7 .scrollablemosaic {margin-top:20px;}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollablemosaic .items
{
    /* this cannot be too large */
    width: 20000em;
    position: absolute;
    clear: both;
}

.items div.pane
{
    float: left;
    width: 868px;
}

/* single scrollable item 
.scrollable img {
	float:left;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}*/

/* active item */
.scrollablemosaic .active
{
    position: relative;
    cursor: default;
}


/* this makes it possible to add next button beside scrollable */
.scrollablemosaic
{
    float: left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse
{
    background: url(../img/scrollable/arrow/hori_large.png) green;
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    margin: 40px 10px;
    cursor: pointer;
    font-size: 1px;
}

/* right */
a.right
{
    background-position: 0 -30px;
    clear: right;
    margin-right: 0px;
}
a.right:hover
{
    background-position: -30px -30px;
}
a.right:active
{
    background-position: -60px -30px;
}


/* left */
a.left
{
    margin-left: 0px;
}
a.left:hover
{
    background-position: -30px 0;
}
a.left:active
{
    background-position: -60px 0;
}

/* up and down */
a.up, a.down
{
    background: url(../img/scrollable/arrow/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover
{
    background-position: -30px 0;
}
a.up:active
{
    background-position: -60px 0;
}

/* down */
a.down
{
    background-position: 0 -30px;
}
a.down:hover
{
    background-position: -30px -30px;
}
a.down:active
{
    background-position: -60px -30px;
}


/* disabled navigational button */
a.disabled
{
    visibility: hidden !important;
}


.navi
{
    margin: 10px 0 0 400px;
    width: 200px;
    height: 20px;
}

.navi a
{
    width: 8px;
    height: 8px;
    float: left;
    margin: 3px;
    background: url(../img/scrollable/arrow/navigator.png) 0 0 no-repeat grey;
    display: block;
    font-size: 1px;
}

.navi a.active
{
    background-position: 0 -16px;
    background-color: Black;
}