/* ==============================================
CSS STYLES FOR Module OnyakTech Fast Image
Copyright Chris Onyak 2012 All Rights Reserved
www.OnyakTech.com - Sales@OnyakTech.com
=================================================
*/

.StepSection{
	vertical-align:middle;
	border-left:.5em solid #eee;
    padding: 0 2em;
    margin: 10px 0px;
	height: 50px;
	border-bottom: 1px solid #eee;
}

.HeadSection{	
	background:#eee;
    height: 15px;
	border: 1px solid #B6BABE;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}

.WelcomeImage {
    -o-box-shadow:      12px 12px 29px #555;
	-icab-box-shadow:   12px 12px 29px #555;
	-khtml-box-shadow:  12px 12px 29px #555;
	-moz-box-shadow:    12px 12px 29px #555;
	-webkit-box-shadow: 12px 12px 29px #555;
	box-shadow:         12px 12px 29px #555;	
}

.SelectedModule {
background: #eaeff3;
position: relative;
padding: 10px 29px;
margin: 50px 10px 10px 10px;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF56AAD2', endColorstr='#FF0067A0');
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f5f9fc), color-stop(100%, #eaeff3));
background-image: -webkit-linear-gradient(top, #f5f9fc 0%,#eaeff3 100%);
background-image: -moz-linear-gradient(top, #f5f9fc 0%,#eaeff3 100%);
background-image: -o-linear-gradient(top, #f5f9fc 0%,#eaeff3 100%);
background-image: -ms-linear-gradient(top, #f5f9fc 0%,#eaeff3 100%);
background-image: linear-gradient(top, #f5f9fc 0%,#eaeff3 100%);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

.SelectionList {
	padding: 10px 10px;
	margin: 0px 20px 0px 20px;
    border:1px #eaeff3;
	background-color:#eaeff3;    
    -webkit-box-shadow: 0px 0px 2px #000; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 0px 0px 2px #000; /* FF3.5 - 3.6 */
    box-shadow: 0px 0px 2px #000; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

.ONYAKDV_DISPLAYSECTION
{
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 0px;
    margin-left: 0px;
    background-color: #eaeff3;
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
    -moz-border-radius: 12px; /* FF1-3.6 */
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    padding: 5px 5px 5px 5px;
}

.NormalSmall
{
    font-size: x-small;
    margin-left: 15px;
}

/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel *//* Invisible left hotspot */div.scrollingHotSpotLeft
{
    /* The hotspots have a minimum width of 100 pixels and if there is room the will grow and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
    min-width: 75px;
    width: 10%;
    height: 100%; /* There is a big background image and it's used to solve some problems I experienced in Internet Explorer 6. */
    background-image: url(/images/big_transparent.gif);
    background-repeat: repeat;
    background-position: center center;
    position: absolute;
    z-index: 200;
    left: 0; /* The first url is for Firefox and other browsers, the second is for Internet Explorer */
    cursor: url(/images/cursors/cursor_arrow_left.png), url(/images/cursors/cursor_arrow_left.cur),w-resize;
}
/* Visible left hotspot */div.scrollingHotSpotLeftVisible
{
    background-image: url(/images/arrow_left.gif);
    background-color: #fff;
    background-repeat: no-repeat;
    opacity: 0.35; /* Standard CSS3 opacity setting */
    -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
    filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
    zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}
/* Invisible right hotspot */div.scrollingHotSpotRight
{
    min-width: 75px;
    width: 10%;
    height: 100%;
    background-image: url(/images/big_transparent.gif);
    background-repeat: repeat;
    background-position: center center;
    position: absolute;
    z-index: 200;
    right: 0;
    cursor: url(/images/cursors/cursor_arrow_right.png), url(/images/cursors/cursor_arrow_right.cur),e-resize;
}
/* Visible right hotspot */div.scrollingHotSpotRightVisible
{
    background-image: url(/images/arrow_right.gif);
    background-color: #fff;
    background-repeat: no-repeat;
    opacity: 0.35;
    filter: alpha(opacity = 35);
    -moz-opacity: 0.35;
    zoom: 1;
}
/* The scroll wrapper is always the same width and height as the containing element (div). Overflow is hidden because you don't want to show all of the scrollable area. */div.scrollWrapper
{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
div.scrollableArea
{
    position: relative;
    width: auto;
    height: 100%;
}
#makeMeScrollable
{
    width: 600px;
    height: 330px;
    position: relative;
}
#makeMeScrollable div.scrollableArea img
{
    position: relative;
    float: left;
    margin: 0;
    padding: 0; /* If you don't want the images in the scroller to be selectable, try the following block of code. It's just a nice feature that prevent the images from accidentally becoming selected/inverted when the user interacts with the scroller. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}