/*
Title: Styles CSS file for jorobalinov.com
Author: Joro Balinov
Website: http://www.jorobalinov.com/
Email: joro@jorobalinov.com
*/

* {
margin: 0;
padding: 0;
}

body {
font-family: "Lucida Sans", Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
background: #212121 url('../img/page_bknd.png') repeat-x fixed;
min-width: 1000px;
color: #fff;
}

input, textarea, select {
font-family: "Lucida Sans", Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
}

a {
color: #60bded;
outline: none;
}

a:hover {
color: #fff;
}

/* ---------------------------- */

#mainWrapper {
width: 960px;
position: relative;
margin: 0 auto;
}

/* ---------------------------- */

#header {
padding: 50px 0 0 0;
overflow: hidden;
}

/* ---------------------------- */

#header #logo {
float: left;
width: 300px;
padding: 0 10px 20px 0;
margin: 5px;
border-bottom: 5px solid #fff;
}

#header #logo h2 {
font-size: 30px;
font-weight: normal;
line-height: 30px;
}

#header #logo small {
display: block;
font-size: 9px;
line-height: 9px;
color: #666;
}

/* ---------------------------- */

#header ul#navigation {
float: left;
overflow: hidden;
list-style: none;
}

#header ul#navigation li {
float: left;
}

#header ul#navigation li a {
display: block;
float: left;
text-decoration: none;
color: #ccc;
font-size: 26px;
line-height: 30px;
margin: 5px;
width: 98px;
padding: 0 10px 33px 10px;
border-bottom: 1px solid #666;
}

#header ul#navigation li a:hover {
}

/* ---------------------------- */

.title {
margin: 30px 0 5px 0;
position: relative;
}

.title .main {
padding: 0 0 10px 0;
width: 310px;
margin: 5px;
border-bottom: 5px solid #60bded;
}

.title .secondary {
width: 630px;
margin: 5px;
border-bottom: 1px solid #666;
position: absolute;
bottom: -5px;
right: 0;
}

.title h2 a {
display: block;
color: #fff;
font-size: 40px;
font-weight: normal;
}

.title small {
display: block;
color: #666;
font-size: 9px;
}

/* ---------------------------- */

.loading {
background: url('../img/loading.gif') no-repeat;
padding: 0 0 0 25px;
margin: 10px;
}

/* ---------------------------- */

.projectsList {
overflow: hidden;
}

.projectsList .projectItem {
float: left;
height: 160px;
background: url('../img/thumb_temp.gif') center center no-repeat;
position: relative;
overflow: hidden;
margin: 5px;
}

.projectsList.big .projectItem {
width: 310px;
}

.projectsList.small .projectItem {
width: 150px;
}

.projectsList .projectItem a {
color: #fff;
text-decoration: none;
display: block;
height: 150px;
border: 5px solid #666;
}

.projectsList.big .projectItem a {
width: 300px;
}

.projectsList.small .projectItem a {
width: 140px;
}

.projectsList .projectItem a:hover {
border-color: #fff;
}

.projectsList .projectItem .projectTitle {
position: absolute;
height: 40px;
padding: 5px 10px;
background: #fff;
background: rgba(255,255,255,0.7);
bottom: -50px;
left: 5px;
color: #000;
}

.projectsList.big .projectItem .projectTitle {
width: 280px;
}

.projectsList.small .projectItem .projectTitle {
width: 120px;
}

.projectsList .projectItem .projectTitle h3 {
font-size: 14px;
}

.projectsList .projectItem .projectTitle small {
font-size: 9px;
color: #666;
}

.projectsList.small .projectItem .projectTitle small {
display: none;
}

.projectsList .projectItem .projectThumbnail {
height: 150px;
}

.projectsList.big .projectItem .projectThumbnail {
width: 300px;
}

.projectsList.small .projectItem .projectThumbnail {
width: 140px;
}

/* ---------------------------- */

#projectView {
margin: 20px 0 0 0;
}

/* ---------------------------- */

#largeProjectNavigation {
overflow: hidden;
}

#largeProjectNavigation a {
display: block;
line-height: 19px;
height: 19px;
text-decoration: none;
}

#largeProjectNavigation a#goPrevious {
float: left;
background: url('../img/project_nav_left.gif') no-repeat;
padding: 0 0 0 25px;
}

#largeProjectNavigation a#goNext {
float: right;
background: url('../img/project_nav_right.gif') right 0 no-repeat;
padding: 0 25px 0 0;
}

#largeProjectNavigation a#goPrevious:hover {
background-position: 0 -19px;
}

#largeProjectNavigation a#goNext:hover {
background-position: right -19px;
}

/* ---------------------------- */

.largeProduct {
overflow: hidden;
}

.largeProduct .largePreview {
float: left;
margin: 5px;
position: relative;
}

.largeProduct .largePreview img {
border: 5px solid #fff;
}

.largeProduct .description {
padding: 10px 0;
border-bottom: 1px solid #666;
margin: 5px;
}

.largeProduct .description h2 {
font-size: 30px;
padding: 0 0 2px 0;
}

.largeProduct .description dl {
overflow: hidden;
color: #666;
font-size: 9px;
}

.largeProduct .description dl dd {
float: left;
margin: 0 10px 0 0;
}

.largeProduct .description dl dd strong {
color: #60bded;
}

.largeProduct .thumbnails {
overflow: hidden;
float: right;
width: 320px;
}

.largeProduct .thumbnails a {
display: block;
}

.largeProduct .thumbnails .thumbnail-1 {
width: 300px;
height: 140px;
margin: 5px;
border: 5px solid #666;
float: left;
}

.largeProduct .thumbnails .thumbnail-2,
.largeProduct .thumbnails .thumbnail-3,
.largeProduct .thumbnails .thumbnail-4 {
float: left;
width: 140px;
height: 140px;
margin: 5px;
border: 5px solid #666;
}

.largeProduct .thumbnails .thumbnail-2,
.largeProduct .thumbnails .thumbnail-4 {
background-position: right 0;
}

.largeProduct .thumbnails a:hover {
border-color: #fff;
}

/* ---------------------------- */

.sectionContent {
margin: 15px 0 30px 0;
overflow: hidden;
}

#aboutText dl.textList {
color: #fff;
float: left;
width: 310px;
margin: 5px;
}

#aboutText dl.textList dd {
padding: 5px 0;
overflow: hidden;
}

* html #aboutText dl.textList dd {
height: 1%;
}

#aboutText dl.textList dd label {
display: block;
color: #666;
font-size: 10px;
padding: 0 0 2px 0;
}

#aboutText dl.textList dd span {
display: block;
}

/* ---------------------------- */

#contactForm {

}

#contactForm .row {
width: 310px;
margin: 5px;
float: left;
}

#contactForm .row label {
display: block;
color: #666;
font-size: 10px;
line-height: 10px;
padding: 0 0 5px 0;
}

#contactForm .row input[type=text],
#contactForm .row textarea {
background: #666;
width: 300px;
padding: 5px;
color: #fff;
border: none;
margin: 0 0 5px 0;
}

#contactForm .row.captcha input[type=text] {
width: auto;
}

#contactForm .row img {
vertical-align: top;
}

#contactForm .row input[type=text]:focus,
#contactForm .row textarea:focus {
background: #fff;
color: #000;
}

#contactForm .buttonrow input {
background: #60bded;
border: none;
padding: 5px 20px;
font-weight: bold;
color: #000;
cursor: pointer;
}

#contactForm .buttonrow input:hover {
background: #fff;
}

#contactForm .message {
display: none;
padding: 10px;
}

/* ---------------------------- */

#footer {
margin: 20px 0 50px 0;
overflow: hidden;
}

#footer .copyright {
width: 310px;
border-top: 1px solid #666;
float: left;
margin: 5px;
}

#footer .additional {
width: 630px;
border-top: 1px solid #666;
float: left;
margin: 5px;
}