@charset "utf-8";
/* -------------------
	CSS Document 	with media queries
	Site:			Svetlana Vasilchenko Website
	CSS Author:		Svetlana Vasilchenko
	Update:			December 3 2012
---------------------------------------- */


/* 1em = 12pt = 16px = 100%  */


/* ---------------------
	simple reset
------------------------ */


/* 1 - SCREEN WIDTH: 1000px+ */

html, body, ul, ol, li, form, fieldset, legends, h1, h2, ul { margin: 0; padding: 0; }
html, body { height: 100%; }
ul li { list-style: none; }
img { border: 0; }
html {
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%; 
	}

/* Elements */

body {
	width: 100%;
	font-size: 1em ; 
	line-height: 1.5em ; 
	color:#7d7d7d;
	font-family: verdana;
	text-align:left;
	background-attachment: fixed ;
    background-color: #FFFFFF;
    background-image: url(../images/bg-svetlanav-drebezgi-2.jpg);
	background-repeat: no-repeat;
	}
	
p {	padding: 4px 0px 0px 20px; }
a { color: #70B6C7; }
h1{	background: url(../images/leaf_small.gif) left bottom no-repeat;
	color: #70b6c7;
	font-size: 1.6em;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0px auto 20px;;
	padding: 40px 0px 0px 50px; }
	
h2{	font-family: Georgia, "Times New Roman", Times, serif; color: #056175; margin-left: 12px; }

.strong { font-weight: bold; }
.site-title {
    display: block;
    margin: 0;
	padding-left: 4px;
	font:  3.8em Impact,Helvetica,arial,sans-serif;
    text-transform: uppercase;
	color: #fff;
	text-shadow: 2px 2px #369;
	}

#wrapper { min-height: 100%; height: auto !important; height: 100%; width:100%;	margin: 0 auto -81px; }
#container { width: 100%; }
#header { background: url(../images/green-top-layers.png) repeat-x; width: 100%; clear: both; height: 95px; }
#logo {	width: 376px; height: 144px; margin: 0px; }

.vcard {
	color: #056175;
    float: right;
    font-size: 1em;
    height: 45px;
    line-height: 1.1em;
    margin: 0;
    padding: 90px 26px 0 0;
    text-align: right;
    width: 160px;
	}	
	
/* Content */

#content {
	width:900px;
	overflow:hidden;	  
	margin:40px auto 10px;
	border:1px #CCC solid;
	-moz-border-radius: 4px;
	border-radius:4px;
	background:url(../images/bg-paper.jpg);
	box-shadow: 4px 4px 5px #999;
	}
#maincontent { width: 80%; clear: both; margin: 50px 65px; overflow: hidden; }
.center { width: 100%; clear: both; text-align: center; height: 50px; }

/* Nav */

#nav { width: 620px; margin-left: 260px; font: Helvetica, sans-serif;  font-size: 1.4em; }
#nav ul { height: 42px; }  
#nav li { float: left; }
#nav a { width: auto; height: 22px; float: left; padding: 10px 14px; color: #fff; text-decoration: none; text-transform: uppercase; }
#nav a:hover { color: #fe9900;  transition: color 1s ease-out 0s; }

#small { float: right; padding: 0px; }
#small p{ margin: 0px; padding: 0px; }
#small a{ text-decoration: none; color: #FC9; }
#small a:hover{ color: #CCC; }


/* Images -  Home page */

.article { width: 100%; padding: 30px; clear: both; float: left;	}
.article img { border: 4px #fff solid; }
.image { float:left; width: 40%;	}
.description{ float: left; width: auto; padding: 10px; }
.description p{ padding: 2px; }
.description p a { font-size: 90%; }
#aside { width:40%;	float:right; padding:40px 0px; }


/* Slideshow ColorBox - Porfolio */

.slideshow { width:90%; min-height:200px; float:left; margin:8px; color:#666; }	
.slideshow img { display: block;  clear:both; margin:40px 2px 10px; padding: 20px; border: 1px #CCC solid; -moz-border-radius: 15px; border-radius: 6px; background-color:#FFF; }
.slideshow p { padding-top: 2px; margin: 0px; font-size:120%; }
.slideshow a { width: 100%; float: left; clear:both; text-align: left; font-size:120%; }

/* Slideshow ColorBox - Photos */

.slideshow-photos { width: 280px; float: left; margin: 8px; color: #666; border: 1px #CCC solid; font-size: 85%; background: #FFF; }
.slideshow-photos p { margin: 0; padding: 0;}	
#slide-photos1 { background: url(../images/photos/slide-nature.jpg) top no-repeat; }
#slide-photos2 { background: url(../images/photos/slide-people.jpg) top no-repeat; }
#slide-photos3 { background: url(../images/photos/slide-animals.jpg) top no-repeat; }
#slide-photos1, #slide-photos2, #slide-photos3 { padding: 180px 10px 10px; }
.boxsmall p { margin: 0px; }

/* Form */

form {
	width:460px;
	clear:both;
	margin: 25px auto;
	padding: 10px 20px 0px;
	background:url(../images/bg-form-5.jpg) no-repeat;
	border:1px #CCC dotted;}
	
#contact p { padding: 6px; margin: 2px; }	
label { display: block;	padding: 3px; }	
input[type="text"], textarea { display:block; width:220px; padding:4px; background: url(../images/bg-form-input.jpg); border:1px #CCC dotted; color:#666; }
input[type="text"]:focus, textarea:focus { background:#e9ddc1; border-bottom:2px #FFF solid; border-right:2px #FFF solid; }
input[type="submit"]{ padding: 4px 15px; background: #FFF; color: #333; border: 1px #70b6c7 dashed; }
input[type="submit"]:hover{ text-shadow:1px 1px 1px #CCC; border:1px #666 dashed; color: #70b6c7; }
#thankyou { text-align:right; }


/* Go to Top */

.gototop {
	width:60px;
	height:40px;
	padding:10px;
	margin:20px auto;
	background-color:#FFF;
	color: #056175;
	font-family: Helvetica, sans-serif;
	font-weight:bolder;
	font-size:1.4em;
	border:1px #CCC solid;
	-moz-border-radius: 2px 28px 28px 28px;
	border-radius:2px 28px 28px 28px;
	}
a.gototop { text-decoration: none; }
.gototop:hover { background-color: #F93; color:#FFF; }
	
/* Footer   */

.push {	height:81px;}
#footer { background: url(../images/orange-top-transparent.png) repeat-x; width:100%; clear: both; height:51px; text-align:center; color:#f8f8f8; padding-top:30px; }	
#footer p {	margin-top: 10px; line-height: 1em; }

/* Resume */

.education, .experience, .skills {margin: 15px 15px;}

/* Slideshow  Nivo*/

#slideshow { width:600px; height:450px; margin: 15px auto; border: 2px #999 solid; }
.nivo-controlNav { position:absolute; left:47%; bottom:-20px; }

/* Extra */

#extraDiv1 { position:absolute; top: 350px; left:0px; width: 55px; height: 145px; }
#extraDiv1 a { text-decoration: none; }
#extraDiv1 img { border: 0px; }



/* 2 - Screen Width: 768px - 1000px */
@media only screen and (min-width: 768px) and (max-width: 999px){

#header { width: auto; }
#content { width: 90%; overflow: hidden; clear: both; }
#maincontent { width: 90%; margin: 20px auto; }
.vcard { padding: 6px 2px; line-height: 1em; }
.fn { display: none; }
.email a { color: #056175; }
#small a { text-shadow: 1px 1px 2px #999; }

/* Nav */

#nav{ width: 60%; margin: 0px auto; padding: 6px; float: right; font-size:90%; font-weight: bold; }
#nav ul {width: 100%; height: auto; margin: 0px auto; }
#nav li{ margin: 0px; padding: 2px; }
#nav li a { display: block; width: auto; padding: .4em; color: #FFF; border-right: 1px #CCC solid; }
#nav li a:hover { color: #F90; transition: color 1s ease-out 0s; }
	

/* Images - Home page */

.article { padding: 20px 4px; margin: 0px auto; }
.article img { border: 4px #fff solid; }
.image { float: left; width: auto; }
.description{ float: left; width: auto; }
.description p { margin:2px; }

/* Slideshow */

.slideshow { float: none; margin: 6px; width: 85%; }
.slideshow img { width: 100%; margin-top: 4px; padding: 12px; }

}


/* 3 - Screen Width: 650px - 770px */
@media only screen and (min-width: 650px) and (max-width: 767px){

h1 { padding: 20px 0 0 50px; }	
body { background-image: url(../images/bg-svetlanav-drebezgi-dark.jpg) no-repeat; }	
#header { background: url(../images/green-top-layers-1.png) repeat-x; width: auto; clear: both; height: 80px; }
#content { width: 90%; overflow: hidden; clear: both; }
#maincontent { width: 90%; margin: 10px auto; }
.vcard { padding: 8px 4px; line-height: 1em; }
.email a { color: #056175; }
.fn { display: none; }
#small a { }

/* Nav */

#nav{ width: 60%; float: right; margin: 0px; padding: 6px; font-size:90%; font-weight: bold;  }
#nav ul {width: 100%; float:right; height: auto; margin: 0px auto; }
#nav li{ margin: 0px; padding: 2px; }
#nav li a { display: block; width: auto; padding: .4em; color: #FFF; }
#nav li a:hover { color: #F90; transition: color 1s ease-out 0s; }
	

/* Images - Home page */

.article { clear: both; float:left; padding: 4px 0px; width: 100%; text-align: center; }
.image { float: none; width: auto; }
.description { float: left; clear: both; width: 100%; padding: 4px 0px 16px; font-size: 90%;}
.description p { margin: 0px; padding: 0px; }

/* Slideshow */

.slideshow { float: none; margin: 6px; width: 85%; }
.slideshow img { width: 100%;margin-top: 4px; padding: 12px; }

/* Slideshow  - Photos */

.slideshow-photos { width: 280px; float: none; margin: 8px auto; color: #666; border: 1px #CCC solid; font-size: 85%; background: #FFF; }



}


/* 4 - Screen Width: 480px - 650px */
@media only screen and (min-width: 480px) and (max-width: 649px){

h1 { padding: 20px 0 0 50px; }	
body { background: url(../images/bg-svetlanav-drebezgi-small.jpg) no-repeat; background-attachment: fixed; }	
#header { background: url(../images/green-top-with-stamp.jpg) repeat-x; width: auto; clear: both; height: 66px; }
#content { width:90%; clear: both; }
#maincontent { width: 90%; margin: 0px auto; padding: 4px;  }
.vcard{ text-align: right; padding: 8px 4px; line-height: 1em; }
.fn { display: none; }
.email a { color: #056175; }
.intro { display: none; }

/* Nav */

#nav{ width: 80%; float: right; margin: 0px; padding: 4px; font-size: 90%; font-weight: bold;}
#nav li{ margin: 0px; padding: 0px; }
#nav li a { display: block; width: auto; padding: .4em; color: #FFF; }
#nav li a:hover { color: #F90; transition: color 1s ease-out 0s; }

/* Images - Home page */

.article { clear: both; float:left; padding: 4px 0px; width: 100%; text-align: center; }
.image { float: none; width: auto; }
.description { float: left; clear: both; width: 100%; padding: 4px 0px 16px; font-size: 110%;}
.description p { margin: 0px; padding: 0px; }

/* Slideshow */

.slideshow { color: #666666; float:none; margin: 6px; width: 90%;}
.slideshow img { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 6px 6px 6px 6px; margin-top: 20px; padding: 12px; width:100%; }
.slideshow p { font-size: 90%; padding: 0px; margin: 0px; } 

/* Slideshow  - Photos */

.slideshow-photos { width: 280px; float: none; margin: 8px auto; color: #666; border: 1px #CCC solid; font-size: 85%; background: #FFF; }


/* Form */

form { width: 280px; margin: 0px 7px; padding: 8px 1px; background:url(../images/bg-form-iphone.jpg) top right no-repeat; border:1px #CCC dotted; }
label { display: block; }
input[type="text"], textarea { display:block; width:200px; padding:3px; background: url(../images/bg.jpg); color:#666; }
input[type="text"]:focus, textarea:focus { background:#e9ddc1; border-bottom:2px #FFF solid; border-right:2px #FFF solid; }
input[type="submit"]{ padding:4px 8px; background:#FFF; color:#333; border:1px #70b6c7 dashed; }
input[type="submit"]:active{ text-shadow:1px 1px 1px #CCC; border:1px #666 dashed; color:#70b6c7; cursor: pointer; }

}


/* 5 - Screen Width: 320px - 479px */
@media only screen and (min-width: 320px) and (max-width: 479px){

h1 { float: none; clear:both; padding: 0px 20px 0px 50px; color: #056175; font-size: 110%; margin: 10px 4px 0px;}
p { padding: 0px 6px; font-size: 90%; line-height: 1.1em; }
body { background: url(../images/bg-svetlanav-drebezgi-small.jpg) no-repeat; background-attachment: fixed; }
#header { background: url(../images/green-top-with-stamp.jpg) repeat-x; width: auto; clear: both; height: 55px; }

#content { width: 90%; clear: both; margin: 10px auto; }
#maincontent { width: 100%; margin: 0px auto; }
.vcard{ height:auto; padding: 6px 4px; text-align: right; line-height: 1.2em; color: #056175; }
.fn { display: none; }
.email a { color: #056175; }
.tel a { color: #056175; }
.intro { display: none; }
#small a {display: none; }      /* color: #630; text-shadow: 1px 1px 2px #999; */

/* Nav */

#nav { width: 100%; height: auto; clear:both; padding: 0; margin: 0; font-size: 90%; font-weight: bold; background: #FFF; border-bottom: #19626b dotted; }
#nav ul {}
#nav li { padding: 4px;	float:left;	list-style:none; }
#nav li a { display: block; width: auto; padding: 6px; margin: 1px; color:#44280b; text-decoration: none; border-right: 1px #CCC solid; }
#nav li a:active { color: #F90; transition: color 1s ease-out 0s; }
li#contacts { display: none; }

/* Images - Home page */

.article { clear: both; float: none; padding: 2px; width: auto; text-align: center; font-size: 90%; }
.article a { font-size: 90%; }
.image { float: none; width: auto; }
.description { float: left; clear: both; width: 100%; padding: 2px 0px 10px; }
.description p { margin: 0px; padding: 0px; font-size: 90%;}

/* Slideshow - Portfolio */

.slideshow { color: #666666; float: none; margin: 6px; width: 90%;}
.slideshow img { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 6px 6px 6px 6px; margin: 20px auto; padding: 12px; width:100%; }
.slideshow p { font-size: 100%; padding: 0px; margin: 0px; } 


/* Slideshow  - Photos */

.slideshow-photos { width: 280px; float: none; margin: 8px auto; color: #666; border: 1px #CCC solid; font-size: 85%; background: #FFF; }


/* Form */

form { width: 280px; margin: 0px 7px; padding: 8px 1px; background:url(../images/bg-form-iphone.jpg) top right no-repeat; border:1px #CCC dotted; }
label { display: block; }
input[type="text"], textarea { display:block; width:200px; padding:3px; background: url(../images/bg.jpg); color:#666; }
input[type="text"]:focus, textarea:focus { background:#e9ddc1; border-bottom:2px #FFF solid; border-right:2px #FFF solid; }
input[type="submit"]{ padding:4px 8px; background:#FFF; color:#333; border:1px #70b6c7 dashed; }
input[type="submit"]:active{ text-shadow:1px 1px 1px #CCC; border:1px #666 dashed; color:#70b6c7; cursor: pointer; }

/* Footer */

#footer p { margin: 8px 0px 0px; font-size: 90%; line-height: 1em; }

}


/* Extra 
	transform: rotate(10deg);
	transition: background 0.5s ease-out 0s;
	border-radius: 6px 6px 0px 0px;
	font-style font-variant font-weight font-size/line-height font-family
 */