html{
background-color:#FFFFFF;
}
body{
width: 100%;
}
#container{
position: relative;
margin:0 auto;
margin-top:-10px;
width: 900px;
height: 1000px;
border: none;
background-color:#474747;
box-shadow:inset 0px 0px 10px #000000;
z-index:0;
}
/* BASIC */
#canvas_cover_holder{
width:100%;
height:800px;
margin-top:-804px;
}
#section_primary{
position:relative;
display:inline-block;
height:auto;
width:100%;
border:none;
background:none;
margin:0 auto;
}
#section_secondary{
position:relative;
display:inline-block;
width:100%;
height:auto;
background:none;
}
.cursor_pointer{
cursor:pointer;
}
#image_box{
position:absolute;
width:100%;
height:0;
top:600px;
background-color:#333333;
color:rgba(0,0,0,0.0);
box-shadow: inset 0px 0px 15px #000000;
z-index:3;
}
#button_hide_image_box{
position:relative;
width:auto;
float:right;
margin-top:5%;
right:-1%;
border:none;
background:none;
font-family:helvetica;
font-size:10pt;
font-weight:100;
color:#FFFFFF;
opacity:0;
cursor:pointer;
}
#image_shadow{
position:absolute;
width:100%;
padding-left:40%;
height:90%;
padding-top:10%;
background-color:rgba(0,0,0,0.6);
border:none;
opacity:0.0;
z-index:10;
pointer-events:none;
}
/* END */
/* TATTOO */
#tattoo_holder{
position:relative;
display:inline;
width:50%;
height:auto;
float:right;
margin-top:50px;
border:none;
background:none;
z-index:2;
}
#tattoo_canvas_holder{
position:relative;
width:100%;
height:auto;
background:none;
margin:0;
z-index:1;
}
#tattoo_titles{
position:absolute;
width:100%;
height:auto;
top:0;
background:none;
margin:0;
z-index:1;
}
canvas #canvas_tattoo{
z-index:1;
}
canvas #canvas_tattoo_cover{
z-index:2;
}
#button_tattoo{
position: fixed;
display:inline;
left:70%;
margin-top:50px;
width:40px;
height:40px;
border-style:solid;
border-width:1px;
border-radius:100%;
text-align:center;
vertical-align:top;
font-family:'Open Sans Condensed', sans-serif;
font-weight:100;
font-size:12pt;
border-color:rgba(204,255,255,0.6);
background-color:rgba(204,255,255,1.0);
box-shadow:0 0 5px 2px rgba(204,255,255,0.7);
z-index:4;
}
#button_tattoo:hover{
opacity:1.0;
}
#button_tattoo.focus{
opacity:1.0;
}
.tattoo_tangent_hider{
position:absolute;
width:100px;
height:20px;
background-color:#474747;
border:none;
}
#tangent_one.tattoo_tangent_hider{
left:15px;
top:0px;
}
#tangent_two.tattoo_tangent_hider{
left:15px;
top:35px;
}
#tangent_three.tattoo_tangent_hider{
left:13px;
top:45px;
height:50px;
}
#tangent_four.tattoo_tangent_hider{
left:40px;
top:140px;
height:125px;
}
.button_tattoo_title{
position: relative;
display:inline-block;
margin-bottom:25px;
margin-left:22%;
margin-right:50%;
width:10px;
height:15px;
margin-top:2px;
border-style:solid;
border-width:1px;
border-radius:100%;
text-align:center;
vertical-align:top;
font-family:'Open Sans Condensed', sans-serif;
font-weight:100;
font-size:12pt;
border-color:rgba(204,255,255,0.6);
background-color:rgba(204,255,255,1.0);
box-shadow:0 0 5px 2px rgba(204,255,255,0.7);
opacity:0.0;
z-index:2;
}
.span_tattoo_title{
position:relative;
display:inline-block;
marlin-left:22%;
margin-right:50%;
width:auto;
font-family:helvetica;
font-size:10pt;
font-weight:100;
color:rgb(204,255,255);
opacity:0.0;
z-index:2;
}
#mural{
}
#pin_up_girl{
}
#pretty_ugly{
width:20px;
height:20px;
margin-top:2px;
}
#test_one{
}
#test_two{
}
.button_tattoo_title.focus{
opacity:1.0;
}
.button_paint_title.focus{
opacity:1.0;
}
.button_tattoo_image{
position:relative;
width:110px;
height:130px;
float:left;
margin:auto;
margin-top:1%;
margin-right:25px;
left:-5%;
border:none;
background-image:url('images/tattoo/pin_up.jpg');
font-family:helvetica;
font-size:10pt;
font-weight:100;
color:#999999;
box-shadow:0px 2px 2px #000000;
opacity:0;
cursor:pointer;
z-index:0;
}
.button_tattoo_image:hover{
color:#999999;
}
.button_tattoo_image.focus{
color:#FFFFFF;
}
img.image_tattoo{
position:relative;
width:25%;
margin:0 auto;
display:none;
}
/* END */
/* PAINT */
#paint_holder{
position:relative;
display:inline;
width:50%;
height:auto;
float:left;
margin-top:50px;
border:none;
background:none;
z-index:2;
}
#paint_canvas_holder{
position:relative;
width:100%;
height:auto;
background:none;
margin:0;
z-index:1;
}
#paint_titles{
position:absolute;
width:100%;
height:auto;
top:0;
background:none;
margin:0;
z-index:1;
}
canvas #canvas_paint{
z-index:1;
}
#button_paint{
position: fixed;
display:inline;
left:28%;
margin-top:50px;
width:40px;
height:40px;
border-style:solid;
border-width:1px;
border-radius:100%;
text-align:center;
vertical-align:top;
font-family:'Open Sans Condensed', sans-serif;
font-weight:100;
font-size:12pt;
border-color:rgba(255,214,214,0.6);
background-color:rgba(255,214,214,1.0);
-moz-box-shadow:0 0 5px 2px rgba(255,214,214,0.7);
-webkit-box-shadow:0 0 5px 2px rgba(255,214,214,0.7);
box-shadow:0 0 5px 2px rgba(255,214,214,0.7);
z-index:4;
}
#button_paint:hover,#button_paint.focus{
color: #474747;
}
.paint_tangent_hider{
position:absolute;
width:100px;
height:20px;
background-color:#474747;
border:none;
}
#tangent_one.paint_tangent_hider{
left:320px;
top:0px
}
#tangent_two.paint_tangent_hider{
left:310px;
top:20px;
height:78px;
}
.button_paint_title{
position:relative;
width:10px;
height:15px;
margin-top:2px;
border-style:solid;
border-width:1px;
border-radius:100%;
text-align:center;
vertical-align:top;
font-family:'Open Sans Condensed', sans-serif;
font-weight:100;
font-size:12pt;
border-color:rgba(255,214,214,0.6);
background-color:rgba(255,214,214,1.0);
-moz-box-shadow:0 0 5px 2px rgba(255,214,214,0.7);
-webkit-box-shadow:0 0 5px 2px rgba(255,214,214,0.7);
box-shadow:0 0 5px 2px rgba(255,214,214,0.7);
opacity:0.0;
z-index:2;
}
#paint_test_three{
width:20px;
height:20px;
}
/* END */