@import url(https://fonts.googleapis.com/css?family=Varela+Round);
body {
background-color: #776;
color: #f0f0f0;
}
/**
* CSS2 images preloading: Instead of creating an empty div with a class on it, we can utilise the requirement of the :after (or :before) pseudo-element.
* This needs to be there for the content property to work. We apply it to generate the content after the body tag and then set it to display: none,
* that way the preloaded images aren’t shown but are still loaded. We know have a pure CSS solution that requires no mark-up.
*/
body:after {
content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/009.jpg) url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/027.jpg) url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/037.jpg) url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/179629/040.jpg);
display: none;
}
.uc-pager {
position: absolute;
width: 100%;
height: 100%;
}
.uc-pager ul {
list-style-type: none;
padding: 0;
margin: 440px 0 0 0; /*image-height - pager-height*/
float: left;
text-align: center;
list-style: none;
position: relative;
display: block;
left: 50%;
}
.uc-pager ul li {
list-style: none;
position: relative;
float: left;
display: block;
right: 50%;
}
.uc-pager ul li a {
border: 0;
color: #00f;
outline: none;
padding: 8px;
text-decoration: none;
font-size: 25pt;
padding: 0 0.1em;
color: #e8ede0;
}
.uc-pager ul li a:hover {
color: #fff;
}
.uc-pager ul li a.last {
border-right-width: 1px;
}
/*
div {
border: solid 0px #f00;
overflow: auto;
padding: 0;
}*/
.uc-main-outer {
border: solid 10px #f0f0f0;
width: 640px;
height: 470px; /*image-height - border-height*/
}
.uc-main-inner {
_margin: 5px 0;
overflow: hidden;
padding: 0;
position: relative;
width: 640px;
height: 470px; /*image-height - border-height*/
}
.uc-main-inner div {
overflow: hidden;
}
.uc-label {
height: 100%;
}
.uc-label .uc-left,
.uc-label .uc-right {
background-color: rgba(255, 255, 255, .3);
color: #fff;
font-family: "Varela Round", sans-serif;
font-size: 60pt;
line-height: 60px;
width: 40px;
opacity: 0;
position: absolute;
z-index: 200;
text-align: center;
text-decoration: none;
text-shadow: 0px 0px 15px rgb(119, 119, 119);
transition: opacity .2s;
margin: 210px 0;
padding-bottom: 10px;
}
.uc-label .uc-left {
left: 0;
-moz-border-top-right-radius: 25%;
-moz-border-bottom-right-radius: 25%;
-ms-border-top-right-radius: 25%;
-ms-border-bottom-right-radius: 25%;
-o-border-top-right-radius: 25%;
-o-border-bottom-right-radius: 25%;
-webkit-border-top-right-radius: 25%;
-webkit-border-bottom-right-radius: 25%;
border-top-right-radius: 25%;
border-bottom-right-radius: 25%;
}
.uc-label .uc-right {
right: 0;
-moz-border-top-left-radius: 55%;
-moz-border-bottom-left-radius: 25%;
-ms-border-top-left-radius: 25%;
-ms-border-bottom-left-radius: 25%;
-o-border-top-left-radius: 25%;
-o-border-bottom-left-radius: 25%;
-webkit-border-top-left-radius: 25%;
-webkit-border-bottom-left-radius: 25%;
border-top-left-radius: 25%;
border-bottom-left-radius: 25%;
}
.uc-left:hover, .uc-right:hover {
opacity: 1;
-o-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, .75);
-moz-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, .75);
-ms-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, .75);
-webkit-box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 4px 1px rgba(255, 255, 255, .75);
}
#uc-s1 .uc-pager li a[href="#uc-s1"],
#uc-s2 .uc-pager li a[href="#uc-s2"],
#uc-s3 .uc-pager li a[href="#uc-s3"],
#uc-s4 .uc-pager li a[href="#uc-s4"] {
color: #fff;
}
#uc-s1:target img,
#uc-s2:target img,
#uc-s3:target img,
#uc-s4:target img {
}
.uc-hotspot-wrapper {
height: 110px;
width: 110px;
}
.uc-hotspot-wrapper:hover {
opacity: 0.8;
}
.uc-hotspot-slices {
height: 110px;
width: 110px;
color: white;
}
uc-hotspot-slices:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6+IE7 slices clear:both */
* html .uc-hotspot-slices,
*:first-child+html .uc-hotspot-slices {
zoom: 1;
}
.uc-hotspot-slice1 {
height: 15px;
width: 15px;
float: left;
}
.uc-hotspot-slice2 {
overflow: hidden;
height: 15px;
width: 80px;
float: left;
}
.uc-hotspot-slice3 {
height: 15px;
width: 15px;
float: left;
}
.uc-hotspot-slice4 {
height: 80px;
width: 15px;
float: left;
}
.uc-hotspot-slice5 {
background-color: rgba(230, 145, 23, 0.8);
height: 80px;
width: 80px;
-moz-border-radius: 36px;
-ms-border-radius: 36px;
-o-border-radius: 36px;
-webkit-border-radius: 36px;
border-radius: 36px;
float: left;
}
.uc-hotspot-slice6 {
height: 80px;
width: 15px;
float: left;
}
.uc-hotspot-slice7 {
height: 15px;
width: 15px;
float: left;
}
.uc-hotspot-slice8 {
height: 15px;
width: 80px;
float: left;
}
.uc-hotspot-slice9 {
height: 15px;
width: 15px;
float: left;
}
.uc-hotspot-outer {
display: table;
height: 80px;
width: 80px;
overflow: hidden;
*position: relative;
}
.uc-hotspot-inner {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
/* IE6+IE7 specific rules */
* html .uc-hotspot-inner,
*:first-child+html .uc-hotspot-inner {
position: absolute;
top: 50%;
}
.uc-hotspot-element {
}
.uc-hotspot-element:hover {
text-shadow: 0px 0 20px #fff;
}
/* IE6+IE7 specific rules */
* html .uc-hotspot-element,
*:first-child+html .uc-hotspot-element {
position: relative;
top: -50%;
}
.uc-hotspot-element a {
display: block;
outline: none;
text-decoration: none;
color: #fff;
font-family: arial, sans-serif;
font-weight: 700;
font-size: 72%;
}
.uc-hotspot-arrow-right div {
margin-top: 33px;
width: 0;
height: 0;
border-style: solid;
border-width: 7.5px 0 7.5px 15px;
border-color: transparent transparent transparent rgb(230, 145, 23);
border-color: transparent transparent transparent rgba(230, 145, 23, 0.8);
line-height: 0px;
_border-color: #000000 #000000 #000000 #e69117;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.uc-hotspot-arrow-left div {
margin-top: 33px;
width: 0;
height: 0;
border-style: solid;
border-width: 7.5px 15px 7.5px 0;
border-color: transparent rgb(230, 145, 23) transparent transparent;
border-color: transparent rgba(230, 145, 23, 0.8) transparent transparent;
line-height: 0px;
_border-color: #000000 #e69117 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.uc-hotspot-arrow-up div {
margin-left: 33px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 15px 7.5px;
border-color: transparent transparent rgb(230, 145, 23) transparent;
border-color: transparent transparent rgba(230, 145, 23, 0.8) transparent;
line-height: 0px;
_border-color: #000000 #000000 #e69117 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.uc-hotspot-arrow-down div {
margin-left: 33px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 7.5px 0 7.5px;
border-color: rgb(230, 145, 23) transparent transparent transparent;
border-color: rgba(230, 145, 23, 0.8) transparent transparent transparent;
line-height: 0px;
_border-color: #e69117 #000000 #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
.uc-hotspot-description {
position: absolute;
width: 100%;
height: 100%;
margin-left: -9999px;
outline: none;
text-decoration: none;
color: #fff;
font-family: arial, sans-serif;
font-weight: 700;
font-size: 72%;
overflow: hidden;
}
.uc-hotspot-description:focus {
margin-left: 0;
}
.uc-hotspot-description div {
position: relative;
height: 100%;
margin-top: -20px;
}
.uc-hotspot-description div div {
postion: absolute;
z-index: 300;
top: 15%;
margin: 0 auto;
display: block;
height: 140px;
width: 280px;
line-height: 24px;
padding: 100px 30px;
-moz-border-radius: 170px;
-ms-border-radius: 170px;
-o-border-radius: 170px;
-webkit-border-radius: 170px;
border-radius: 170px;
background-color: rgba(230, 145, 23, 0.99);
cursor: default;
text-align: center;
word-wrap: break-word;
overflow: hidden;
}
.uc-hotspot-close {
background-color: gray;
outline: none;
text-decoration: none;
display: block;
background-color: #808080;
padding: 12px;
cursor: pointer;
font-size: 22px;
font-weight: bold;
text-align: center;
font-family: "Open Sans", Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
height: 24px;
width: 24px;
line-height: 24px;
position: absolute;
z-index: -1;
left: 430px;
-moz-border-radius: 24px;
-ms-border-radius: 24px;
-o-border-radius: 24px;
-webkit-border-radius: 24px;
border-radius: 24px;
}
#uc-s1 .uc-hotspot-close {
top: 100px;
}
#uc-s2 .uc-hotspot-close {
top: 580px; /*+480px*/
}
#uc-s3 .uc-hotspot-close {
top: 1060px; /*+960px*/
}
#uc-s4 .uc-hotspot-close {
top: 1540px; /*+1440px*/
}
.uc-hotspot-description:focus ~ .uc-hotspot-close {
color: #ccc;
display: block;
z-index: 300;
}
.uc-hotspot-description:focus ~ .uc-hotspot-close:hover {
color: #fff;
-o-box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, .75);
-moz-box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, .75);
-ms-box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, .75);
-webkit-box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, .75);
}
#uc-s1-h1 {
top: 200px;
left: 120px;
position: absolute;
z-index: 101;
}
#uc-s1-h2 {
top: 280px;
left: 420px;
position: absolute;
z-index: 102;
}
#uc-s1-h3 {
top: 95px;
left: 410px;
position: absolute;
z-index: 103;
}
#uc-s1-h4 {
top: 95px;
left: 210px;
position: absolute;
z-index: 104;
}
#uc-s1-h5 {
top: 100px;
left: 10px;
position: absolute;
z-index: 105;
}
#uc-s2-h1 {
top: 695px; /*+480px*/
left: 310px;
position: absolute;
z-index: 101;
}
#uc-s2-h2 {
top: 795px; /*+480px*/
left: 130px;
position: absolute;
z-index: 102;
}
#uc-s2-h3 {
top: 685px; /*+480px*/
left: 150px;
position: absolute;
z-index: 103;
}
#uc-s3-h1 {
top: 1040px; /*+960px*/
left: 200px;
position: absolute;
z-index: 101;
}
#uc-s4-h1 {
top: 1600px; /*+1440px*/
left: 200px;
position: absolute;
z-index: 101;
}
#uc-s4-h2 {
top: 1600px; /*+1440px*/
left: 365px;
position: absolute;
z-index: 102;
}
#uc-s4-h3 {
top: 1750px; /*+1440px*/
left: 385px;
position: absolute;
z-index: 103;
}
!
