﻿#MiddleSectionCase
{
    position:absolute;
    width:80%;
    height:85%;
    min-width:600px;
    min-heigth:300px;
    top: 100px;
    left:10%;
    margin-left:0;
    margin-top:0;
    background-color:rgba(255,255,255,0);
    z-index:5;
    border-radius:4px;
    cursor:default;

}


#MiddleSectionContent_Case1
{
    position:absolute;
    width:100%;
    height:80%;
    background-color: rgba(255,255,255,0.5);
    border:5px solid #FF4F14;
    border-left:0px solid #FF4F14;
    border-right:0px solid #FF4F14;
    top:0;
    left:0%;
    margin-left:0%;
    overflow:hidden;
    -webkit-box-shadow: inset 0px 0px 20px 0px rgba(100, 100, 100, .9);
    box-shadow:inset  0px 0px 20px 0px rgba(100, 100, 100, .9);

}


#MiddleHomeContainer1
{
    position:absolute;
    height:100%;
    width:100%;
    -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 20, .9);
    box-shadow:inset  0px 0px 20px 0px rgba(0, 0, 0, .9);
    background-color:rgba(255,255,255,0);
    /*background-image: -moz-radial-gradient(center center, circle cover, rgba(255,79,20,1) 0%, rgba(255,127,0,.85) 100%);*/
    background-image: -moz-radial-gradient(center center, circle cover, rgba(255,79,20,1) 0%, rgba(255,79,20,.1) 100%);
    background-image: -webkit-radial-gradient(center center, circle cover, rgba(255,79,20,1) 0%, rgba(255,79,20,.1) 100%);
    background-image: -o-radial-gradient(center center, circle cover, rgba(255,79,20,1) 0%, rgba(255,79,20,.1) 100%);
    background-image: -ms-radial-gradient(center center, circle cover, rgba(255,79,20,1) 0%, rgba(255,79,20,.1) 100%);
    background-image: radial-gradient(center center, circle cover, rgba(255,79,20,1) 0%, rgba(255,79,20,.1) 100%);
}

.HomePreviewCase
{
    position:absolute;
    height:100%;
    width:100%;
    top:8%;
    /*visibility:hidden;*/
}



.HomePreview
{
    position:absolute;
    height:70%;
    width:66%;
    left:17%;
    top:0%;
    transition-duration:.5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
}

.GreyOverLay
{
    position:absolute;
    height:100%;
    width:100%;
    background-color:rgba(90,90,90,0.9);
    
}

.HomePreviewImgMessage
{
    position:absolute;
    top:100%;
    color:rgba(255,255,255,1);
    font-weight:bold;
    font-size:larger;
    text-shadow: 0px 3px 1px rgba(20,20,20,.75);
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.HomePreview:hover
{
    transform:scale(1.5,1.5);
    -ms-transform:scale(1.5,1.5); /* IE 9 */
    -moz-transform:scale(1.5,1.5); /* Firefox */
    -webkit-transform:scale(1.5,1.5); /* Safari and Chrome */
    -o-transform:scale(1.5,1.5); /* Opera */
}

.HomePreview:hover .HomePreviewImgCase
{
    border-color:orange;
}

.HomePreview:hover .HomePreviewMsgCase
{
    position:absolute;
    opacity:1;
    top:75%;
}

.HomePreview:hover .HomePreviewMsgHookCase
{
    position:absolute;
    opacity:1;
    top:75%;
}

.HomePreviewImgCase
{
    position:absolute;
    height:100%;
    width:100%;
    border:3px solid rgba(255,79,20,1);
    border-bottom:35px solid rgba(255,79,20,1);
    border-radius:4px;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(20, 20, 20, .9);
    box-shadow:  0px 0px 3px 0px rgba(20, 20, 20, .9);
    transition-duration:.5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    background-repeat:no-repeat;
    background-size:100% 100%;
    z-index:2;
}

.HomePreviewMsgCase
{
    position:absolute;
    z-index:4;
    color:White;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}




.HomePreviewMsgCase
{
    position:absolute;
    opacity:0;
    width:108%;
    left:-3%;
    height:20%;
    top:70%;
    transition-duration:.5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    background-color:rgba(40,40,40,.7);
}

.HomePreviewMsg
{
    position:absolute;
    width:80%;
    left:50%;
    margin-left:-40%;
    text-align:center;
    height:90%;
    top:10%;
    margin-top:-3px;
    /*background-color: rgba(255,255,255, 0.1);
    -webkit-box-shadow: inset 0px 0px 10px 1px rgba(50, 50, 50, .8);
    box-shadow: inset 0px 0px 10px 1px rgba(50, 50, 50, .8);*/
    z-index:4;
    cursor:pointer;
    font-style:italic;
    font-size:larger;
 
}



.HomePreviewMsgHookCase
{
    position:absolute;
    opacity:0;
    top:70%;
    margin-top:-49px;
    left:-3%;
    height:50px;
    width:108%;
    z-index:1;
    transition-duration:.5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    
}

.HomePreviewMsgLeftHookCase
{
    position:absolute;
    height:50px;
    width:50px;
    overflow:hidden;
}

.HomePreviewMsgRightHookCase
{
    position:absolute;
    left:100%;
    height:50px;
    width:50px;
    margin-left:-50px;
    overflow:hidden;
}



.HomePreviewMsgLeftHook
{
    position:absolute;
    width:0;
    height:0;
    border:25px solid transparent;
    border-right:25px solid rgba(154,36,6,1);
    border-bottom:25px solid rgba(154,36,6,1);
}


.HomePreviewMsgRightHook
{
    position:absolute;
    border:50px solid transparent;
    border-left-color:rgba(154,36,6,1);
}


#HomePreview1ImgCase1
{

    background-image:url("../Images/First_Bgrnd.jpg");
}

#HomePreview2ImgCase1
{

    background-image:url("../Images/Second_Bgrnd.jpg");
}


#HomePreview3ImgCase1
{

    background-image:url("../Images/Third_Bgrnd.jpg");
}



#HomePreview4ImgCase1
{
    background-image:url("../Images/Fourth_Bgrnd.jpg");
}




#HomePreview1
{
    position:absolute;
    /*left:0%;*/
    animation:MovePreview1 15s 4s infinite;
    -moz-animation:MovePreview1 15s 4s infinite; /* Firefox */
    -webkit-animation:MovePreview1 15s 4s infinite; /* Safari and Chrome */
    -o-animation:MovePreview1 15s 4s infinite; /* Opera */
}
#HomePreview2
{
    position:absolute;
    /*left:0%;*/
    animation:MovePreview2 15s 4s infinite;
    -moz-animation:MovePreview2 15s 4s infinite; /* Firefox */
    -webkit-animation:MovePreview2 15s 4s infinite; /* Safari and Chrome */
    -o-animation:MovePreview2 15s 4s infinite; /* Opera */
}
#HomePreview3
{
    position:absolute;
    /*left:0%;*/
    animation:MovePreview3 15s 4s infinite;
    -moz-animation:MovePreview3 15s 4s infinite; /* Firefox */
    -webkit-animation:MovePreview3 15s 4s infinite; /* Safari and Chrome */
    -o-animation:MovePreview3 15s 4s infinite; /* Opera */
}
#HomePreview4
{
    position:absolute;
    /*left:0%;*/
    animation:MovePreview4 15s 4s infinite;
    -moz-animation:MovePreview4 15s 4s infinite; /* Firefox */
    -webkit-animation:MovePreview4 15s 4s infinite; /* Safari and Chrome */
    -o-animation:MovePreview4 15s 4s infinite; /* Opera */
}



#BottomMiddleSectionCase1
{
     position:absolute;
     width:90%;
     height:100%;
     left:49%;
     margin-left:-45%;
}

.LeftSectionCase
{
    position:absolute;
    width:1%;
    top:30%;
    height:40%;
    background-color:rgba(20,20,20,0.8);
    left:0%;
    margin-left:0%;
    border-radius:0px 3px 3px 0px;
    z-index:5;
}

.LeftSectionElement
{
    position:absolute;
    height :40%;
    background-color:pink;
    width:1200%;
    left:-100%;
    text-align:right;
    border:1px solid rgba(200,200,200,1);
    border-right:8px solid rgba(200,200,200,1);
    border-radius:0px 3px 3px 0px;
    -webkit-box-shadow:  0px 0px 2px 2px rgba(0, 0, 20, .9);
    box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, .9);
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.RightSectionCase
{
    position:absolute;
    width:1%;
    top:30%;
    height:40%;
    left:100%;
    background-color:rgba(20,20,20,0.8);
    border-radius:3px 0px 0px 3px;
    margin-left:-1%;
    z-index:5;
}

.RightSectionElement
{
    position:absolute;
    background-color:Yellow;
    height :40%;
    width:1200%;
    left:-1100%;
    border:1px solid rgba(200,200,200,1);;
    border-left:8px solid rgba(200,200,200,1);
    border-radius:3px 0px 0px 3px;
    -webkit-box-shadow:  0px 0px 2px 2px rgba(0, 0, 20, .9);
    box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, .9);
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.RightSectionElement:hover
{
    position:absolute;
    left:-1150%;
    border-left:8px solid rgba(100,0,0,1);
}

.LeftSectionElement:hover
{
    position:absolute;
    left:-10%;
    border-right:8px solid rgba(100,0,0,1);
}



.SectionElementImg
{
    position:absolute;
    width:100%;
    height:100%;
    background-image: -webkit-linear-gradient(45deg, rgba(30,30,0,0.8) 0%,  rgba(0,80,80,0.8) 100%);
	background-image: -moz-linear-gradient(45deg, rgba(30,30,0,0.8) 0%,  rgba(0,80,80,0.8) 100%);
	background-image: -ms-linear-gradient(45deg, rgba(30,30,0,0.8) 0%,  rgba(0,80,80,0.8) 100%);
	background-image: -o-linear-gradient(45deg, rgba(30,30,0,0.8) 0%,  rgba(0,80,80,0.8) 100%);
	background-image: linear-gradient(45deg, rgba(30,30,0,0.8) 0%,  rgba(0,80,80,0.8) 100%);
}

#LeftSectionElement1
{
    position:absolute;
    background-position:center center;
    background-size:90% 90%;
    background-image:url("../Images/First_Bgrnd.jpg");
}

#LeftSectionElement2
{
    position:absolute;
    background-position:center center;
    background-size:90% 90%;
    background-image:url("../Images/Second_Bgrnd.jpg");
}


#RightSectionElement1
{
    position:absolute;
    background-position:center center;
    background-size:90% 90%;
    background-image:url("../Images/Third_Bgrnd.jpg");
}


#RightSectionElement2
{
    position:absolute;
    background-position:center center;
    background-size:90% 90%;
    background-image:url("../Images/Fourth_Bgrnd.jpg");
}

.TopSectionElement
{
    position:absolute;
    top:5%;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.SectionElementText
{
    position:absolute;
    width:100%;
    height:100%;
    z-index:8;
    color:White;
}

.LeftSectionElementText
{
    position:absolute;
    text-align:center;
    left:-3%;
    font-size:1em;
    top:25%;
    margin-top:-0.5em;
        transition-duration:.5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
}

.RightSectionElementText
{
    position:absolute;
    text-align:center;
    width:90%;
    top:25%;
    font-size:1em;
     transition-duration:.5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    
}


.BottomSectionElement
{
    position:absolute;
    top:55%;
    margin-top:-6px;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}


.QuickUpdateSection
{
    position:absolute;
    width:60%;
    height:5%;
    top:200%;
    background-color:rgba(70,70,70,1);
    border-radius:4px 4px 0px 0px;
    -webkit-box-shadow:  0px 0px 4px 0px rgba(0, 0, 20, .9);
    box-shadow:  0px 0px 4px 0px rgba(0, 0, 0, .9);
    margin-top:0px;
    z-index:9;
    left:20%;
    transition-duration:.5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
}

.QuickUpdateSectionCase
{
    position:absolute;
    width:80%;
    height:250%;
    left:10%;
    margin-left:-2em;
    top:-150%;
    margin-top:-1px;
    border:2em solid #DF2F01;
    border-top:1px solid #DF2F01;
    border-bottom:0em solid #DF2F01;
    border-radius:4px 4px 0px 0px;
    -webkit-box-shadow:  0px 0px 7px 2px rgba(0, 0, 20, .9);
    box-shadow:  0px 0px 7px 2px rgba(0, 0, 0, .9);
    overflow:hidden;
    background-color:rgba(127,127,127,.4);
    
}

.QuickUpdateSectionElement
{
    position:absolute;
    width:100%;
    height:100%;
    top:100%;
    transition-duration:.5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -webkit-box-shadow:  0px 0px 10px 1px rgba(50, 50, 50, .8);
    box-shadow:  0px 0px 10px 1px rgba(50, 50, 50, .8);
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /*border-left:2em solid pink;
    border-right:2em solid pink;*/
}

.QuickUpdateSectionTitleElement
{
    position:absolute;
    height:1.2em;
    width:100%;
    color:White;
    background-color:rgba(100,100,100,1);
    font-weight:bolder;
}

.QuickUpdateSectionBodyElement
{
    position:absolute;
    width:100%;
    height:100%;
    top:1.2em;
}

.QuickSection
{
    position:absolute;
    z-index:14;
    left:10%;
    top:-.9em;
    color:White;
    font-weight:bold;
    margin-left:-2em;
    transform:rotate(270deg);
    -ms-transform:rotate(270deg); /* IE 9 */
    -moz-transform:rotate(270deg); /* Firefox */
    -webkit-transform:rotate(270deg); /* Safari and Chrome */
    -o-transform:rotate(270deg);
}

.UpdateSection
{
    position:absolute;
    transform:rotate(90deg);
    left:88%;
    top:-1em;
    color:White;
    font-weight:bold;
    margin-left:0em;
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg);
    z-index:14;
}

#Trapezium1
{
    position:absolute;
    height:0;
    width:2%;
    top:40%;
    left:49%;/*(100%-width)/2*/
    margin-left:-4000px;
    border:4000px solid transparent;
    border-top:0 solid rgba(60,60,60,1);
    border-bottom:2000px solid rgba(10,5,0,.8);
    z-index:1;
}



#QuickUpdateSectionBodyElement2Content
{
    position:absolute;
    height:72%;
    width:80%;
    left:10%;
    /*background-color:Red;*/
}

.QuickShareButtonElement
{
    width:25%;
    position:absolute;
    height:100%;
    background-repeat:no-repeat;
    background-size:40% 80%;
    background-position:center center;
}

.QuickShareButtonElement:hover
{
    background-color:rgba(40,40,40,1);
}

#FacebookButoon1
{
    background-image:url("../Images/Facebook_Icon.png");
}


#TwitterButton1
{
    background-image:url("../Images/Twitter_Icon.png");
    left:25%;
}
#GoogleButton1
{
    background-image:url("../Images/Google_Plus_Icon.png");
    left:50%;
}
#TumblrButton1
{
    background-image:url("../Images/Tumblr_Icon.png");
    left:75%;
}