/*
Theme Name: Ideestuudio
Version: 1.0
Author: Creative.ee
Author URI: http: //www.creative.ee
*/

body, html{
background: #000000 url(images/header-bg.png) repeat-x;
margin: 0;
font-family: Arial;
color:#757573;
font-size: 16px;
height: 100%;
margin-bottom: -70px;
text-align:center;
}

h2{
font-family: Arial;
font-weight: normal;
font-size: 15px;
text-transform:uppercase;
color:#FAF9F1;
}

a{
text-decoration: none;
color: #fff;
}

img{
border:0px;
}

/* Header
-------------------------------------------------------------- */
header{
height: 60px;
background: #fff;
width: 100%;
text-align:left;
overflow: hidden;
}

#header{
width: 980px;
margin: 0 auto;
padding-right: 20px;
}

#logo{
padding-top: 21px;
width: 143px;
display:block; 
float: left;
margin-left: 20px;
}

/* Topnav
-------------------------------------------------------------- */
#nav{
display: block; 
width: 500px;
margin-top: 34px;
float: right;
text-align:right;
}

#nav ul{
margin: 0px;
padding: 0px;
}

#nav li{
list-style: none; 
display: inline;
}

.menu a{
font-family: Arial;
font-weight: bold;
color: #333333;
padding: 7px 20px 10px 20px;
font-size: 15px;
}

.menu-item a:hover{
background: #000;
color: #fff;
font-family: Arial;
font-weight: bold;
padding: 7px 20px 10px 20px;
font-size: 15px;
}


.current_page_item a{
background: #000;
color: #fff;
font-family: Arial;
font-weight: bold;
padding: 7px 20px 10px 20px;
font-size: 15px;
}

/* Homepic
-------------------------------------------------------------- */
#home-pic{
overflow: hidden;
text-align:center;
width: 100%; 
height: 80%;
background: url(images/home.jpg) no-repeat; 
background-size: 100%;
}

.suur-logo{
margin-top: 20%;}

/* Wrapper
-------------------------------------------------------------- */
#wrapper{
width: 986px;
display: block; 
overflow: hidden;
height: auto;
margin: 0 auto;
min-height: 80%;
text-align:left;
}

/* Page
-------------------------------------------------------------- */
#title{
background: #282828;
margin-top: 24px;
font-size: 34px;
color: #757575;
font-family: Arial narrow;
padding-left: 20px; 
padding-top: 12px;
padding-bottom: 10px;
width: 966px;
text-transform: uppercase;
}

#left{
width: 213px;
height: 155px;
background: #282828;
display: block; 
float: left;
margin-top: 20px;
padding: 20px;
line-height: 28px;
}

#right{
width: 700px;
float: right; 
margin-top: 0px;
line-height: 26px;
}

/* Gallery
-------------------------------------------------------------- */
#thumbs{
width: 1030px;
overflow: hidden;
}

.bwWrapper {
position:relative;
display:block;
width: 222px;
height: 222px;
float: left;
text-align: center;
}

.container{
height:222px;width:222px;
background:#000;
overflow:hidden;
position:relative;
display:block;
float: left;
margin-right: 33px;
margin-top: 33px;

}
.text{
background:rgba(0,0,0,0.7);
top:-70px;
color:white;
font:14px Georgia,serif;
height:auto;width:inherit;
position:absolute;
/* CSS3 Transition Magic */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}

.text a{
color:#fff;
display:block;
padding:15px;
text-decoration:none;

/* CSS3 Transition Magic */

-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}

.text a:hover{
color:red;
text-decoration:none;
}

.container:hover .text{
top:0;
}

/* Naitus
-------------------------------------------------------------- */
.naitus{
display: block; 
overflow: auto;
border-bottom: 1px solid #808080;
}

.naitus-thumb{
margin: 20px;
width: 222px;
height: 222px;
display: block; 
float: left;
}

.naitus-text{
display: block; 
width: 724px;
float: right;
margin-top: 20px;
font-size: 16px;
line-height: 28px;
}

.vaata-galeriid a{
padding: 18px;
color:#fff;
background: #333333;
font-size:13px;
display: block;
border: 1px solid #333333;
}

/* Footer
-------------------------------------------------------------- */
#footer{
background: url(images/footer.png);
height: 130px;
width: 100%;
margin-top: 40px;
bottom: 0;
position: fixed;
}

#footer2{
background: url(images/footer.png);
height: 130px;
width: 100%;
margin-top: 40px;
bottom: 0;
}


#footer-block{
width: 980px;
height: 130px;
margin: 0 auto;
background: url(images/clients.png) no-repeat center;
}

.creative{
font-size: 9px; 
font-family: Arial;
margin-top: 100px;
color: #A8A8A8;
float: right;
}

.push{
height: 140px;
}

/* Galerii
-------------------------------------------------------------- */
h1 {
letter-spacing:3px;
text-transform:uppercase;
font-size:1.2em;
margin:10px 0;
}

#main {
width:980px;
margin:0 auto;
}

#images {
display:none;	
}

#images li{
list-style:none;	
}

.panel {
float:left;	
}

ul.exposureThumbs {
background:#111;
border:12px solid #111;
border-right:none;
padding:0;
margin:0;
list-style-type:none;
}

ul.exposureThumbs li {
margin:0 0 12px 0;
padding:0;
text-align:center;
display:none;
}

ul.exposureThumbs li img {
cursor:pointer;
}

ul.exposureThumbs li.last {
margin:0;	
}

.exposureTarget {
width:800px;
height:600px;
display: block;
background-color:#111;	
background-image:url(images/loader.gif);
background-repeat:no-repeat;
background-position:center center;
float:left;	
padding:0;
margin:0;
border:12px solid #111;
position:relative;
overflow:hidden; 
text-align:center;
}

.exposureTarget img{
}

.exposureWrapper {
position:absolute; 
top:0; 
left:0;
}

.exposureWrapper img {
cursor:pointer;
position:absolute;
top:0;
left:0;
}

.exposureLoaded {
background-image:none;	
}

.exposureData {
position:absolute;
left:0;
right:0;
bottom:-2000px;
height:0px;
padding:0px;
color:#fff;
font-family:Arial,Verdana,Helvetica,sans-serif;
display:none;
font-size:0px;
}

ul.exposureThumbs li {
width:150px;
height:79px;
}

.exposureSlideshowControls a,
.exposureControls span,
.exposureControls a {
font-family:Arial,Verdana,Helvetica,sans-serif;
font-size:11px;
padding:8px;
background-color:#000;
display:block;
float:left;
}

.exposureSlideshowControls a {
float:right;	
}

.exposureSlideshowControls a,
.exposureControls a {
color:#ccc;
text-decoration:none;
outline:none;
}

.exposureSlideshowControls a:active,
.exposureSlideshowControls a:hover,
.exposureControls a:active,
.exposureControls a:hover {
background-color:#444;
color:#ddd;
}

.exposurePaging .active {
color:#fff;
background-color:#111;	
}

.clear {
clear:both;	
}

p.info {
margin:40px auto;
text-align:center;	
width:600px;
}

p.info a {
color:#006fc0;	
}

p.info a:hover, p.info a:active {
color:#0084e7;	
}