@import url(/asset/css/font-awesome.css);
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#mainContainer{
    /*background-color:red;*/
    width: 653px; 
    height: 440px; 
    margin:auto;
    margin-top:150px;
}
#img-container{
    background-color: white;
    width: 653px;
    height: 440px;
    margin: 20px auto;
}
#imageContainer{
    /*background-color:green;*/
    width: 204px; 
    height: 440px; 
    float:left;
    position:relative;
}
#itemClosed{
    width: 204px; 
    height: 440px; 
    background-image:url(images/box_closed.jpg);
}
#itemOpened{
    width: 204px; 
    height: 440px; 
    background-image:url(images/box_open.jpg);
    display:none;
}
#txtContainer{
    /*background-color:cyan;*/
    width: 449px; 
    height: 440px; 
    float:left;
    position:relative;
    border-left: 1px solid #ccc;
}
.arrow {
    position:absolute;
    display:block;
    width: 32px;
    height: 32px;
    background: rgb(255,168,76); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,0.3);
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.3);
    text-align: center;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    outline: none;
}
.arrow:hover,
.arrow:focus,
.arrow:active {
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.8);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.8);
    border: 3px solid #fff;
    color: #fff;
    text-decoration: none;
    outline: none;
}
.arrow .fa {
    font-size: 26px;
    margin-left: 4px;
}
#stopper.arrow {
    display:none;
    bottom:10px;
    right:10px;
}
.back {
    position:absolute;
    display:block;
    z-index: 3;
    padding: 8px 20px;
    background: rgb(255,168,76); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,168,76,1)), color-stop(100%,rgba(255,123,13,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,0.3);
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.3);
    text-align: center;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    outline: none;
    font-weight: bold;
    font-size: 20px;
}
.back:hover,
.back:focus,
.back:active {
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.8);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.8);
    color: #fff;
    text-decoration: none;
    outline: none;
}
#stopper.back {
    display:none;
    bottom:10px;
    right:10px;
}
.itemFocused{
    width: 449px; 
    height: 338px; 
}

#itemMonitor,
#itemAdattatore,
#itemPistola,
#itemStampante,
#itemCablaggio,
#itemComputer{
    -webkit-box-shadow:inset 10px 0 10px -5px rgba(0,0,0,0.3);
    box-shadow:inset 10px 0 10px -5px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
    display:none;
}
.itemMainTitle {
    width: 449px;
    padding: 20px;
    font-size: 26px;
    text-align: right;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 5px #000000;
}
#itemMonitor{
    background-image:url(images/list_1.jpg);
}
#itemAdattatore{
    background-image:url(images/list_2.jpg);
}
#itemPistola{
    background-image:url(images/list_5.jpg);
}
#itemStampante{
    background-image:url(images/list_4.jpg);
}
#itemCablaggio{
    background-image:url(images/list_6.jpg);
}
#itemComputer{
    background-image:url(images/list_3.jpg);
}
.txtContainerIntro {
    width: 449px;
    height: 440px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.txtContainerIntro .txtContainerIntroTitle {
    font-size: 20px;
    padding-left: 20px;
}
.txtContainerIntro .txtContainerIntroTitle strong {
    font-size: 24px;
    display: block;
    color: #009ADA;
}
.txtContainerIntro .txtContainerIntroList {
    list-style: none;
    margin: 10px 20px 20px 20px;
    padding: 0;
    font-size: 16px;
    border-top: 1px solid #ccc;
}
.txtContainerIntro .txtContainerIntroList li {
    margin: 0 0 0 0;
    padding: 5px 0 5px 0;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
}
.txtContainerIntro .txtContainerIntroList li .fa {
    width: 30px;
    text-align: center;
}