/*
* Web Fonts from fontspring.com
*
* All OpenType features and all extended glyphs have been removed.
* Fully installable fonts can be purchased at http://www.fontspring.com
*
* The fonts included in this stylesheet are subject to the End User License you purchased
* from Fontspring. The fonts are protected under domestic and international trademark and
* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
* distributing this font software.
*
* (c) 2010-2011 Fontspring
*
*
*
*
* The fonts included are copyrighted by the vendor listed below.
*
* Vendor: Philatype
* License URL: http://www.fontspring.com/fflicense/philatype
*
*
*/
@font-face {
font-family: 'MergeLight';
src: url('merge_light-webfont.eot');
src: url('merge_light-webfont.eot?#iefix') format('embedded-opentype'),
url('merge_light-webfont.woff') format('woff'),
url('merge_light-webfont.ttf') format('truetype'),
url('merge_light-webfont.svg#MergeLight') format('svg');
font-weight: normal;
font-style: normal;
}
* { margin: 0; padding: 0; }
p { font-family: "MergeLight", Arial, sans-serif; text-shadow: 0px 1px 0px #ddd; padding: 0; margin: 0; }
ul { list-style-type: none; }
li { font-family: "MergeLight", Arial, sans-serif; text-shadow: 0px 0.5px 0px #000000; color: #0099cc; }
a:link { font-family: "MergeLight", Arial, sans-serif; text-shadow: inherit; padding: 0; margin: 0; color: inherit; text-decoration: none;}
a:visited { font-family: "MergeLight", Arial, sans-serif; text-shadow: inherit; padding: 0; margin: 0; color: inherit; text-decoration: none;}
a:hover { font-family: "MergeLight", Arial, sans-serif; text-shadow: inherit; padding: 0; margin: 0; color: inherit; text-decoration: none;}
a:active { font-family: "MergeLight", Arial, sans-serif; text-shadow: inherit; padding: 0; margin: 0; color: inherit; text-decoration: none;}
h1 { font-family: "MergeLight", Arial, sans-serif; text-shadow: 0px 1px 0px #ddd; padding: 0; color: #fff; margin: 0; }
.keywords p { font-family: "MergeLight", Arial, sans-serif; text-shadow: 0px 1px 0px #ddd; padding: 0; margin: 0; font-size: 30%; text-transform: uppercase !important;}
#keywords2 p { font-family: "MergeLight", Arial, sans-serif; text-shadow: 0px 1px 0px #ddd; padding: 0; margin: 0; font-size: 10%; text-transform: uppercase !important;}
body { margin: 0; height: 100%;}
html { height:100% }
#top { background: #413b3d; height: 20px; font-size: 90%; margin:0%; padding: 0%; line-height: 90%; color: #ffffff; padding:8px 0px 0px 12px; text-shadow: none; }
.menuu { background: #333333 url('grungeback3.jpg') left bottom repeat-x; height: 60px; margin: 0; color: #fff; -moz-box-shadow: inset 0 0 10px #000000; }
#title { font-size: 300%; text-align:right; margin: 0; line-height: 60%; text-shadow: 1px 2px 1px #000000; }
#titlehome { color: #fff; font-size: 300%; margin: 0; line-height: 60%; text-shadow: 1px 2px 1px #000000; margin-bottom: 10px; border-bottom: 7px #0099cc solid; padding-bottom: 7px; width: 830px; }
#titlehow { color: #fff; font-size: 300%; margin: 0; line-height: 60%; text-shadow: 1px 2px 1px #000000; margin-bottom: 10px; border-bottom: 7px #0099cc solid; padding-bottom: 7px; width: 810px; font-weight: normal; letter-spacing: -1px; }
#titlehistory { color: #fff; font-size: 300%; margin: 0; line-height: 60%; text-shadow: 1px 2px 1px #000000; margin-bottom: 10px; border-bottom: 7px #0099cc solid; padding-bottom: 7px; width: 827px; font-weight: normal; letter-spacing: -1px; }
.title2 { font-size: 200%; text-align:right; margin: 0; line-height: 60%; text-shadow: 1px 2px 1px #000000; padding: 9px 0px 0px 0px; margin:0;}
.title3 { font-size: 170%; text-align:right; margin: 0; line-height: 60%; text-shadow: 1px 2px 1px #000000; padding: 11px 0px 0px 0px;}
.tabshow { font-size: 100%; text-align:right; margin: 0; line-height: 60%; text-shadow: 1px 2px 1px #000000; }
.explanation { font-size: 100%; color: #0099cc; text-align:right; margin:0; line-height: 13pt; text-shadow: 0px 0px 0px; padding:0px; margin: 0px;}
#help { font-size: 200%; color: #ff0000; text-align:right; margin: 0; line-height: 60%; text-decoration: none; text-shadow: 1px 2px 1px #000000; padding: 11px 0px 0px 0px; }
#outnow { font-size: 150%; color: #cc3366; text-align:center; margin: 0; line-height: 80%; text-decoration: none; text-shadow: 1px 2px 1px #000000; padding: 11px 0px 0px 0px; margin-left: -5px;}
#view { font-size: 180%; color: #fff; text-align:center; margin: 0; line-height: 90%; text-shadow: 1px 2px 1px #000000; padding: 11px 0px 0px 0px; border-bottom: 4px solid #fff; vertical-align: 10px; margin-top: -5px; margin-left: -5px; }
#fb { left: 127px;}
.wrapper{
position: relative;
float: left;
top: 25%;
left: 20%;
width: 80.00%;
margin-bottom: 0%;
margin-right:0%;
color: #fff;
z-index:101;
}
.menu1{
position: relative;
float: left;
left: 0%;
width: 13.00%;
height: 40px;
}
div.wrapper div:hover .explanation
{
color: #fff !important;
-webkit-transition: color 1s;
-moz-transition: color 1s;
-o-transition: color 1s;
}
div.wrapper div:hover
{
color: #0099cc;
-webkit-transition: color 1s;
-moz-transition: color 1s;
-o-transition: color 1s;
}
#top a:hover {
color: #0099cc;
-webkit-transition: color 1s;
-moz-transition: color 1s;
-o-transition: color 1s;
}
.menu2{
position: relative;
float: left;
left: 0%;
width: 15.00%;
height: 40px;
}
.menu3{
position: relative;
float: left;
left: 0%;
width: 19.00%;
height: 40px;
}
.menu4{
position: relative;
float: left;
left: 0%;
width: 18.00%;
height: 40px;
}
.menu5{
position: relative;
float: left;
left: 0%;
width: 15.00%;
height: 40px;
}
.menu6{
position: relative;
float: right;
right: 2%;
width: 10.00%;
height: 40px;
}
.main { background: #000 url(new-background.jpg) left top no-repeat; height: 100%; overflow: auto; font-size: 100%; padding: 20px; padding-bottom: 350px;}
#logo {
width: 222px;
height: 107px;
position: absolute;
float: left;
top: 2.7%;
z-index:100;
background: url(logo.png) no-repeat;
}
#bee {
width: 142px;
height: 162px;
position: absolute;
float: right;
right: 2.7%;
top: 1.0%;
z-index:100;
background: url(beetop.png) no-repeat;
}
#creature {
width:300px;
height: 331px;
position: fixed;
float: right;
right: 0%;
bottom: 0.0%;
z-index:101;
background: url(creature.png) no-repeat;
}
.crowd {
height: auto !important;
position:fixed;
float: right;
right: 0%;
bottom: 0.0%;
z-index:101;
}
#skype {
position:absolute;
right:0.8%;
top:0px;
z-index:100;
width: 390px;
height: 10px;
font-size: 80%;
color:#877b7f;
text-shadow:0px 0px 0px;
letter-spacing: 1px;
padding-top:6px;
}
#skype p { text-shadow:0px 0px 0px; }
#skype a:hover {
color: #0099cc;
-webkit-transition: color 1s;
-moz-transition: color 1s;
-o-transition: color 1s;
}
.clientlogin {
position:absolute;
right:10%;
top:0px;
z-index:150;
width: 385px;
height: 10px;
font-size: 80%;
color:#877b7f;
text-shadow:0px 0px 0px;
letter-spacing: 1px;
padding-top:3px;
}
.button {
width: 25px;
height: 20px;
background-color: #fff;
border: solid 1px #000;
border-radius: 50%;
}
.clientlogin p {
display:inline;
color:#fff;
margin-bottom: 0px;
}
#crowd1 {
width: 429px;
}
#crowd2 {
width: 162px;
}
#crowd3 {
width: 442px;
}
#crowd4 {
width: 400px;
}
#crowd5 {
width: 406px;
}
#crowd6 {
width: 272px;
}
#face {
width: 150px;
height: 150px;
position: fixed;
top:100px;
left: 85%;
color: #fff;
background: #0099cc;
border: 1px solid;
border-radius: 75px;
margin: 20px auto;
opacity: 0.5;
box-shadow: 1px 2px 1px 0px #000000;
}
#facetext {
position: fixed;
top:100px;
left: 86%;
opacity: 1;
}
.wrapper2{
position: relative;
left:0%;
height:100%;
top: 4.7%;
width: 1112px;
margin-left: auto;
margin-right: auto;
}
.col1 {
position: relative;
float: left;
left: 0%;
width: 275px;
height: 186px;
}
.col2 {
position: relative;
float: left;
left: 3px;
width: 275px;
height: 186px;
background-color: #828282;
}
.col3 {
position: relative;
float: left;
left: 6px;
width: 275px;
height: 186px;
background-color: #828282;
}
.col4 {
position: relative;
float: left;
left: 9px;
width: 275px;
height: 186px;
background-color: #828282;
}
.sliding1{
-webkit-transition: left 3s ease, height 0.3s ease;
-moz-transition: left 3s ease, height 0.3s ease;
-o-transition-property: left 3s ease, height 0.3s ease;
-transition-property: left 3s ease, height 0.3s ease;
position: relative;
overflow: hidden;
height:276px;
top: 0;
background: #ddd;
left:0;
width:760px;
display:block;
}
.sliding2{
-webkit-transition: left 3s ease, height 0.3s ease;
-moz-transition: left 3s ease, height 0.3s ease;
-o-transition-property: left 3s ease, height 0.3s ease;
-transition-property: left 3s ease, height 0.3s ease;
position: absolute;
overflow: hidden;
height:276px;
top: 30px;
background: #0099cc;
left: 783px;
width:760px;
}
.oversliding2{
-webkit-transition: left 5s ease, height 0.3s ease;
-moz-transition: left 5s ease, height 0.3s ease;
-o-transition-property: left 5s ease, height 0.3s ease;
-transition-property: left 5s ease, height 0.3s ease;
position: absolute;
overflow: hidden;
height:140px;
top: 130px;
left: 1140px;
width:140px;
z-index:105;
display:block;
}
#next:target {
}
#next:target .sliding1{
-webkit-transition: left 3s ease, height 0.3s ease;
-moz-transition: left 3s ease, height 0.3s ease;
-o-transition-property: left 3s ease, height 0.3s ease;
-transition-property: left 3s ease, height 0.3s ease;
left: -760px !important;
}
#next:target .sliding2{
-webkit-transition: left 3s ease;
-moz-transition: left 3s ease;
-o-transition-property: left 3s ease;
-transition-property: left 3s ease;
left: 0px !important;
}
#next:target .oversliding2{
-webkit-transition: left 5s ease;
-moz-transition: left 5s ease;
-o-transition-property: left 5s ease;
-transition-property: left 5s ease;
left: 350px !important;
}
.slideshow {
position: relative;
height: 400px; /* This part sucks */
clear: both;
margin: 0px;
z-index:100;
width:827px;
overflow:hidden;
}
.slide {
float: left;
}
.slide .gonext p {
margin-right: 4px;
position: absolute;
left: 790px;
top: 180px;
font-size: 250%;
-webkit-transition: background-color .17s linear;
-moz-transition: background-color .17s linear;
transition: background-color .17s linear;
z-index:300;
opacity:1;
display:none;
}
.slide .goprevious p{
position: absolute;
left: 5px;
top: 180px;
font-size: 250%;
-webkit-transition: background-color .17s linear;
-moz-transition: background-color .17s linear;
transition: background-color .17s linear;
z-index:1001;
opacity:1;
display:block;
}
.slide p:hover {
text-shadow: 1px 1px 1px #000;
}
.slide [type=radio] {
display: none;
}
ol>li:nth-of-type(2) label{
}
.content {
position: absolute;
top: 0px;
left: 827px;
background: white;
width: 827px;
opacity: 1;
height: 400px;
z-index:0;
-webkit-transition: left 1.5s ease, opacity 5.5s linear;
-moz-transition: left 1.5s ease, opacity 5.5s linear;
transition: left 1.5s ease, opacity 5.5s linear;
}
.content2 {
position: absolute;
top: 0px;
left: -827px;
background: white;
width: 827px;
opacity: 1 !important;
height: 400px;
z-index:2;
-webkit-transition: left 1.5s ease, opacity 5.5s linear;
-moz-transition: left 1.5s ease, opacity 5.5s linear;
transition: left 1.5s ease, opacity 5.5s linear;
}
.content3 {
position: absolute;
top: 140px;
left: 1040px;
-webkit-transition: left 1.6s ease;
-moz-transition: left 1.6s ease;
transition: left 1.6s ease;
width: 140px;
opacity: 1;
height: 140px;
z-index:1;
}
.content4 {
position: absolute;
top: 140px;
left: -1040px;
-webkit-transition: left 1.6s ease;
-moz-transition: left 1.6s ease;
transition: left 1.6s ease;
width: 140px;
opacity: 1;
height: 140px;
z-index:3;
}
#firstover {
width: 278px;
height: 233px;
top: 167px;
}
#secondover {
width: 206px;
height: 258px;
top: 146px;
}
#thirdover {
width: 548px;
height: 400px;
top: 0px;
}
.previousradio:checked + .goprevious p{
z-index:0;
padding: 3px 7px;
border: 1px solid #CCC;
margin-right: 4px;
display:none;
}
.previousradio:checked + .goprevious ~ .goprevious p{
z-index:0;
padding: 3px 7px;
border: 1px solid #CCC;
margin-right: 4px;
display:none;
}
.previousradio:checked + .goprevious .content2 {
opacity: 1;
-webkit-transition: left 1.5s ease;
-moz-transition: left 1.5s ease;
transition: left 1.5s ease;
left:0px;
z-index:299;
}
.previousradio:checked + .goprevious .content {
z-index: 0;
opacity: 1;
left: 0px;
-webkit-transition: left 1.5s ease;
-moz-transition: left 1.5s ease;
transition: left 1.5s ease;
}
.previousradio:checked ~ .gonext .content2 {
z-index: 0;
opacity: 0;
display:none;
}
.previousradio:checked ~ .gonext .content4 {
z-index: 0;
opacity: 0;
display:none;
}
.previousradio:checked ~ .goprevious ~ .goprevious .content2 {
z-index: 0;
opacity: 0;
display:none;
}
.previousradio:checked ~ .goprevious ~ .goprevious .content4 {
z-index: 0;
opacity: 0;
display:none;
}
.previousradio:checked + .goprevious .content4 {
z-index: 300;
opacity: 1;
left: 270px;
-webkit-transition: left 2s ease;
-moz-transition: left 2s ease;
transition: left 2s ease;
}
.previousradio:checked + .goprevious .content3 {
opacity: 1;
-webkit-transition: left 2s ease;
-moz-transition: left 2s ease;
transition: left 2s ease;
left:270px;
z-index:0;
}
#show li .nextradio:checked ~ .goprevious p{
z-index:0;
display:none;
}
#show li .nextradio:checked ~ .goprevious ~ .goprevious p{
z-index:0;
display:none;
}
#show li .nextradio:checked ~ .goprevious ~ .goprevious ~ .goprevious p{
z-index:0;
display:none;
}
#show li .previousradio:checked ~ .gonext p {
z-index:700;
display:block;
}
#show li .previousradio:checked ~ .gonext ~ .gonext p{
z-index:600;
display:none;
}
#show li .nextradio:checked + .gonext p{
z-index:1000;
display:none;
}
#show li .nextradio:checked + .gonext ~ .gonext p{
z-index:700;
display:block;
}
#show li .nextradio:checked + .gonext ~ .gonext ~ .gonext p{
z-index:0;
display:none;
}
#show li .nextradio:checked + .gonext .content {
z-index: 199;
opacity: 1;
left: 0px;
-webkit-transition: left 1.5s ease;
-moz-transition: left 1.5s ease;
transition: left 1.5s ease;
}
#show li .nextradio:checked + .gonext .content2 {
opacity: 1;
-webkit-transition: left 1.5s ease;
-moz-transition: left 1.5s ease;
transition: left 1.5s ease;
left:0px;
z-index:1;
}
#show li .nextradio:checked + .gonext + .gonext .content {
z-index: 199;
opacity: 0;
left: 0px;
-webkit-transition: left 1.5s ease;
-moz-transition: left 1.5s ease;
transition: left 1.5s ease;
}
#show li .nextradio:checked + .gonext + .gonext .content2 {
opacity: 0;
-webkit-transition: left 1.5s ease;
-moz-transition: left 1.5s ease;
transition: left 1.5s ease;
left:0px;
z-index:1;
}
.nextradio:checked + .gonext #lastslide.content {
z-index: 999;
opacity: 1;
left: 0px;
-webkit-transition: left 1.5s ease;
-moz-transition: left 1.5s ease;
transition: left 1.5s ease;
}
.nextradio:checked + .gonext #lastslide2.content2 {
opacity: 1;
-webkit-transition: left 1.5s ease;
-moz-transition: left 1.5s ease;
transition: left 1.5s ease;
left:0px;
z-index:1;
}
.nextradio:checked + .gonext .content3 {
z-index: 200;
opacity: 1;
left: 270px;
-webkit-transition: left 2s ease;
-moz-transition: left 2s ease;
transition: left 2s ease;
}
.nextradio:checked + .gonext .content4 {
opacity: 1;
-webkit-transition: left 2s ease;
-moz-transition: left 2s ease;
transition: left 2s ease;
left:270px;
z-index:1;
}
.nextradio:checked + .gonext #lastslide3.content3 {
z-index: 1000;
opacity: 1;
left: 270px;
-webkit-transition: left 2s ease;
-moz-transition: left 2s ease;
transition: left 2s ease;
}
.nextradio:checked + .gonext #lastslide4.content4 {
opacity: 1;
-webkit-transition: left 2s ease;
-moz-transition: left 2s ease;
transition: left 2s ease;
left:270px;
z-index:2;
}
.left1{
-webkit-transition: background-position 0.3s ease, height 0.3s ease;
-moz-transition: background-position 0.3s ease, height 0.3s ease;
-o-transition-property: background-position 0.3s ease, height 0.3s ease;
-transition-property: background-position 0.3s ease, height 0.3s ease;
position: relative;
overflow: hidden;
top: 0px;
height: 186px;
border:5px solid #fff;
}
.img1 {
-webkit-transition: top 0.3s ease;
-moz-transition: top 0.3s ease;
-o-transition-property: top 0.3s ease;
-transition-property: top 0.3s ease;
position: relative;
top: 0;
left: 0;
height: 186px;
width:267px;
display:block;
}
#img44 {
-webkit-transition: top 0.3s ease;
-moz-transition: top 0.3s ease;
-o-transition-property: top 0.3s ease;
-transition-property: top 0.3s ease;
position: relative;
top: 0;
left: 0;
height: 186px;
width:547px;
display:block;
}
.left12 {
position: relative;
top: 3px;
height: 186px;
background: url(t-cemu01.jpg) no-repeat;
border:5px solid #fff;
z-index:30;
}
.writings{
-webkit-transition: z-index 1s ease 0s, opacity 2s;
-moz-transition: z-index 1s ease 0s, opacity 2s;
-o-transition: z-index 1s ease 0s, opacity 2s;
position: absolute;
left: 0%;
top: 0%;
height: 186px;
width:267px;
color: #000000;
font-size: 90%; text-align:justify;margin: 3px; line-height: 120%; text-decoration: none; text-shadow: 0px 0px 0px;
opacity:0;
background: rgba(255,255,255, 0.4);
}
#workwritings{
position: absolute;
left: 0%;
top: 0%;
height: 345px;
width:267px;
color: #000000;
font-size: 90%; text-align:justify; margin: 3px; line-height: 120%; text-decoration: none; text-shadow: 0px 0px 0px;
opacity:1;
background: rgba(255,255,255, 0.4);
}
.heading1 {
color: #0099cc;
text-shadow: 0px 0px 0px;
font-size: 130%; text-align:right; margin: 3px; line-height: 100%; font-style:normal; letter-spacing: -0.5px; font-weight: 900;
}
.heading2 {
color: #fff;
padding: 8px 8px 0px 0px !important;
font-size: 210%; text-align:right; margin: 3px; line-height: 80%; letter-spacing: -1.5px; vertical-align: top; font-weight: 300; text-shadow: 1px 2px 1px #000000;
}
.writings p{
padding: 0px 8px 8px 8px;
}
#workwritings p{
padding: 0px 8px 8px 8px;
}
#workwritings a {
color: #0099cc;
text-shadow: 1px 0.5px 0.5px #ccc;
letter-spacing: 1px;
}
#workwritings a:hover {
text-shadow: 1px 0.5px 0.5px #000;
}
.left1on {
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-o-transition-property: background-position 0.3s ease;
position: absolute;
float: left;
left: 0px;
top: 0px;
overflow: hidden;
width: 100%;
height: 186px;
}
.img2 {
-webkit-transition: top 0.3s ease;
-moz-transition: top 0.3s ease;
-o-transition-property: top 0.3s ease;
-transition-property: top 0.3s ease;
position: absolute;
top: 186px;
left: 0px;
height: 186px;
width:267px;
}
.left1on2 {
-webkit-transition: background-position 0.3s ease, opacity 1s;
-moz-transition: background-position 0.3s ease, opacity 1s;
-o-transition-property: background-position 0.3s ease, opacity 1s;
position: relative;
float: left;
left: 0px;
top: 186px;
height: 186px;
z-index:1;
opacity:0;
}
#img3 {
-webkit-transition: top 0.3s ease;
-moz-transition: top 0.3s ease;
-o-transition-property: top 0.3s ease;
-transition-property: top 0.3s ease;
position: relative;
top: -186px;
left: 0px;
height: 186px;
width:267px;
}
.keywords {
position: relative;
top: -22px;
background:#ededed;
z-index:100;
height:35px;
opacity:1;
font-size:185%;
padding-top: 2px;
padding-left: 3px;
}
#keywords2 {
position: relative;
top: 348px;
background:#ededed;
z-index:100;
height:35px;
opacity:1;
font-size:565%;
padding-top: 2px;
padding-left: 3px;
}
.keywordsall {
font-size:565%;
}
.left1:hover .left1on2 .writings {
opacity: 1;
z-index: 3;
}
.left1:hover {
background-position: 0 -186px !important;
height: 385px;
}
.left1:hover .left1on .img1 {
-webkit-transition: top 0.3s ease;
-moz-transition: top 0.3s ease;
-o-transition-property: top 0.3s ease;
-transition-property: top 0.3s ease;
top:-186px !important;
}
.left12:hover {
background-position: 0 -186px !important;
height: 372px;
}
.left1:hover .left1on {
background-position: 0 0px !important;
}
.left1:hover .left1on .img2{
-webkit-transition: top 0.3s ease;
-moz-transition: top 0.3s ease;
-o-transition-property: top 0.3s ease;
-transition-property: top 0.3s ease;
top: 0px !important;
}
.left1:hover .left1on2 {
background-position: 0 0px !important;
opacity: 1;
-webkit-transition: background-position 0.3s ease, opacity 0s;
-moz-transition: background-position 0.3s ease, opacity 0s;
-o-transition-property: background-position 0.3s, opacity 0s;
}
.left1:hover .left1on2 #img3 {
-webkit-transition: top 0.3s ease;
-moz-transition: top 0.3s ease;
-o-transition-property: top 0.3s ease;
-transition-property: top 0.3s ease;
top: 0px !important;
}
.left1:hover .left1on2 hr {
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition-property: opacity 0.3s ease;
-transition-property: opacity 0.3s ease;
opacity:1;
}
.left1:hover .left1on2 .keywords {
opacity:1;
}
.left2{
position: relative;
float: left;
left: 4px;
width: 275px;
height: 186px;
background-color: #828282;
}
.left3{
position: relative;
float: left;
left: 8px;
width: 275px;
height: 186px;
background-color: #828282;
}
.left4{
position: relative;
float: left;
left: 12px;
width: 275px;
height: 186px;
background-color: #828282;
}
.left5{
-webkit-transition: background-position 0.3s ease, height 0.3s linear;
-moz-transition: background-position 0.3s ease, height 0.3s linear;
-o-transition-property: background-position 0.3s ease, height 0.3s linear;
-transition-property: background-position 0.3s ease, height 0.3s linear;
position: relative;
float: left;
top:30%;
left: 0%;
width: 275px;
height: 186px;
background: url(t-deusex02.jpg) no-repeat;
}
.worksboard{
position: relative;
left: 0%;
top: 0%;
width: 827px;
height: 143%;
margin-left: auto;
margin-right: auto;
}
.videowork{
position: relative;
float: left;
left: 9px;
width: 827px;
height: 465px;
border:5px solid #fff;
}
.clientareawork{
position: relative;
float: left;
left: 9px;
width: 827px;
height: 465px;
border:5px solid #fff;
background: rgba(255,255,255, 0.6);
}
.clientareawork p{
padding:10px 0px 0px 20px;
padding:1.0rem 0rem 0rem 2.0rem;
}
#home { height: 232.5px;
width: 820px;
background: rgba(255,255,255, 0.6);
margin-bottom: 20px;
display:block;
}
#home div p { position: relative; display:inline-break; top: 0px; padding: 20px; padding-bottom:0px; text-align:justify; font-size:140%;}
.historywork{
position: relative;
float: left;
background: #fff url(history-bg-white.jpg)bottom right no-repeat;
width: 777px;
height: 275px;
border:5px solid #0099cc;
padding: 20px;
text-align: justify;
overflow: hidden;
margin-top:8px;
}
#next{
position: relative;
float: left;
background: #fff;
width: 760px;
height: 275px;
border:5px solid #0099cc;
padding: 20px;
text-align: justify;
overflow: hidden;
left:0px;
}
.slideshow2 {
position: relative;
min-height: 475px; /* This part sucks */
clear: both;
padding:0px;
}
.videoslide {
float: left;
padding:0px;
}
.videoslide li label:before,
.videoslide li label:after {
border: 1px solid #AAA;
position: absolute;
bottom: -1px;
width: 5px;
height: 5px;
content: " ";
}
.videoslide li label:before {
left: -6px;
border-bottom-right-radius: 6px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #D1D1D1;
}
.videoslide li label:after {
right: -6px;
border-bottom-left-radius: 6px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #D1D1D1;
}
.videoslide li label {
padding: 3px 7px;
border: 1px solid #CCC;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
margin: 0 1.5px;
text-align:right;
text-shadow: 1px 2px 1px #000000;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), outset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
letter-spacing:0.5px;
display:inline-block;
position: relative;
left: 0px;
width:160px;
top: -35px;
}
.videoslide li label: hover {
text-shadow: 0 1px 0.5px #ccc;
}
#a:before {
display:none;
}
#a {
margin-left:0px;
}
.videoslide li [type=radio] {
display: none;
}
.container {
position: absolute;
top: -1px;
left: -827px;
width: 827px;
padding: 0px;
display:inline-block;
opacity: 0;
height: 100%;
-webkit-transition: all .6s linear;
-moz-transition: all .6s linear;
transition: all .6s linear;
}
.videoslide [type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
text-shadow: 1px 1px 0.5px #000;
z-index: 2;
}
.videoslide [type=radio]:checked ~ label:before {
box-shadow: 2px 2px 0 #fff;
}
.videoslide [type=radio]:checked ~ label:after {
box-shadow: -2px 2px 0 #fff;
}
.videoslide li [type=radio]:checked ~ label ~ .container {
z-index: 1;
opacity: 1;
left: 0px;
}
.videowork iframe { margin:0; padding:0; border:none;}
#home iframe {float: left; display:inline;}
.widework{
position: relative;
float: right;
width: 547px;
right: -19px;
top: -392px;
border:5px solid #fff;
padding:0px;
}
.descriptionwork{
position: relative;
float: left;
width: 267px;
height: 385px;
left: 9px;
top: 3px;
border:5px solid #fff;
background-color: #fff;
}
.smallwork{
position: relative;
float: right;
right: -19px;
top: -389px;
border:5px solid #fff;
}
.smallwork2{
position: relative;
float: right;
right: -16px;
top: -389px;
border:5px solid #fff;
}
hr { height:16px; width:240px; background: #fff; padding: 3px; opacity:0;}
#m { color:#fff; }
#bottom { background: url('grungeback4.png') left bottom repeat-x; height: 66px; font-size: 90%; position:fixed;
left:0; right:0;
bottom:0px; width:100%; z-index: 100; padding-top:9px; padding-bottom: 6px; padding-left:4px;}
#bottomlogos { z-index:102; height: 66px; font-size: 90%; position:fixed;
left:0; right:0; bottom:0px; width:100%; padding-top:9px; padding-bottom: 6px; padding-left:4px;}
#page-wrap {
width: 660px;
background: white url('white-bg.jpg') right bottom;
padding: 20px 50px 20px 50px;
margin: 0px auto;
min-height: 300px;
height: auto !important;
height: 300px;
opacity: 1;
border:5px solid #0099cc;
}
#contact-area {
width: 700px;
margin-top: 25px;
opacity: 1;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 481px;
font-size: 1.0em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
opacity: 1;
font-family: "MergeLight", Arial, sans-serif; text-shadow: 0px 1px 0px #ddd;
}
#contact-area textarea {
height: 130px;
opacity: 1;
font-family: "MergeLight", Arial, sans-serif; text-shadow: 0px 1px 0px #ddd;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #0099cc;
opacity: 1;
}
#contact-area input.submit-button {
width: 100px;
float: right;
opacity: 1;
font-family: "MergeLight", Arial, sans-serif; text-shadow: 0px 1px 0px #ddd;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
opacity: 1;
color: #0099cc;
font-family: "MergeLight", Arial, sans-serif; text-shadow: 0px 1px 0px #ddd;
}
@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
{
.explanation { font-size: 78%; }
#title { font-size: 234%; }
.title2 { font-size: 156%; }
.title3 { font-size: 132.6%; }
}
@media only screen and (device-width: 600px) and (device-height: 1024px)
{
.explanation { font-size: 78%; }
#title { font-size: 234%; }
.title2 { font-size: 156%; }
.title3 { font-size: 132.6%; }
}
@media (max-device-width: 1024px)
and (min-device-width: 600px)
and (orientation: landscape)
{
.explanation { font-size: 78%; }
#title { font-size: 234%; }
.title2 { font-size: 156%; }
.title3 { font-size: 132.6%; }
}
@media only screen and (max-device-width: 480px)
{
.explanation { font-size: 78%; }
#title { font-size: 234%; }
.title2 { font-size: 156%; }
.title3 { font-size: 132.6%; }
}
@media only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2)
{
.explanation { font-size: 78%; }
#title { font-size: 234%; }
.title2 { font-size: 156%; }
.title3 { font-size: 132.6%; }
}