/* lets color body */


body {
background: #ffffff;
color: #45484d;
font-size: 16px;
font-family: Times, sans-serif;

}


/* style for input text and button */
.buttoni {
height: 26px;
width: 68px auto;
background-color: #45a4f9;
color: #ffffff;
border: 1px solid white;
border-radius: 4px;
padding: 4px;
margin-left: 3px;
outline:none;
}

.buttoni:hover {
background: #45c4f9;
transition: 0.5s ease-in-out;
box-shadow: 0 0 1px 1px #fff;
}
.butnbig {
height: 35px;
width: 200px;
font-size: 20px;
margin-top:10px;

}
button.bckred {
background: red;
}
button.bckred:hover {
background: #cc0033;
}
button.bckgreen {
background: green;
}
button.bckgreen:hover {
background: #009966;
}
button.bckdown {
background: #00aaa0;
}
.bckdown {
width: 160px;
text-align: center;
}
a.bckdown {
color: white;
width: 160px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
a.bckdown:hover {
background: #41aac4;
}

input {
margin: 3px auto;
outline:none;
}
textarea {
outline: none;
}
input.text{
height: 25px;
width: 150px;
background: #ffffff;
color: #000000;
border: 1px solid grey;
border-radius: 4px;
text-indent: 5px;
}
input.text:focus, input.text:hover{
background: #eeeeee;
border: 1px solid #ffffff;

}
input.textbig {
width: 250px;
height: 35px;
font-size: 20px;
margin-top: 5px;
}

select.langselect {
height: 25px;
width: 150px;
border-radius: 3px;
border: 1px solid grey;
outline: none;

}


.styled-select {
   max-width: 240px;
   height: 36px;
   overflow: hidden;
   background: #9bc9ea;
   background-size: 20px;
   border: 1px solid #ccc;
   position: fixed;
   left: 2px;
   bottom: 0px;
   
  } 
  
.styled-select form {
display: inline-block;
margin-right: 5px;
}

 .multilang {
width: 34px;
height: 34px;
background: transparent url('http://www.cv-yarat.com/themes/standart/iconss/Azerbaijan.png') no-repeat center center;
background-size: 32px;
padding: 4px;
margin-left: 5px;
outline:none;
border: 1px solid transparent;
cursor: pointer;
display: inline;
  }
 
 .multilangru {
width: 34px;
height: 34px;
background: transparent url('http://www.cv-yarat.com/themes/standart/iconss/Russia.png') no-repeat center center;
background-size: 32px;
padding: 4px;
margin-left: 5px;
outline:none;
border: 1px solid transparent;
cursor: pointer;
  }
  
  .multilangen {
width: 34px;
height: 34px;
background: transparent url('http://www.cv-yarat.com/themes/standart/iconss/UK.png') no-repeat center center;
background-size: 32px;
padding: 4px;
margin-left: 5px;
outline:none;
border: 1px solid transparent;
cursor: pointer;
  }

  
#result {
width: 270px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
font-size:14px;
word-wrap: break-word;
padding: 5px auto;

}

input#login {
background-image: url('http://www.cv-yarat.com/themes/standart/iconss/mail.png');
background-repeat: no-repeat;
background-position:0 25%;
text-indent: 20px;
background-size: 20px;
}
div.login input#login {
background-image: url('http://www.cv-yarat.com/themes/standart/iconss/mail.png');
background-repeat: no-repeat;
background-position: 2% 50%;
text-indent: 20px;
background-size: 15px;
}

div.login input#pass {
background-image: url('http://www.cv-yarat.com/themes/standart/iconss/lock.png');
background-repeat: no-repeat;
background-position: 2% 50%;
text-indent: 20px;
background-size: 15px;
}
div.login input#pass:focus, div.login input#login:focus {
background-image: none;
text-indent: 2px;
}
input#mail {
background-image: url('http://www.cv-yarat.com/themes/standart/iconss/mail.png');
background-repeat: no-repeat;
background-position: 2% 50%;
text-indent: 25px;
background-size: 20px;
}
.login .register input#pass1, input#pass2 {
background-image: url('http://www.cv-yarat.com/themes/standart/iconss/lock.png');
background-repeat: no-repeat;
background-position: 1% 40%;
text-indent: 25px;
background-size: 20px;
}
.login .register input#pass:focus, .login .register input#pass2:focus {
background-image: url('http://www.cv-yarat.com/themes/standart/iconss/lock.png');
text-indent: 25px;
}

.red {
color: #d10919;

}
.green {
color: green;

}
.violet {
color: #462066;
font-weight: bold;
}

.forbidden {
height: 100px;
border: 10px;
background: #fbdb79;
position: relative;
text-align: center;
margin-top: 200px;
margin-bottom: 100px;
margin-left: 100px;
margin-right: 100px;
padding-top: 20px;
padding-bottom: 20px;
}

.close {
width: 30px;
height: 30px;
background-color: #ffffff;
position: absolute;
top: 3px;
right: 3px;
border-radius: 100%;
font-size: 22px;
text-align: center;
cursor: pointer;

}
.close:hover {
background-color: #ff3333;
color: #ffffff;
transition: 0.7s ease-in-out;
}
/* header styles */

#head {
background: #16a085 url('http://www.cv-yarat.com/themes/standart/images/2.jpg') no-repeat 10% 19%;
background-size: cover;
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
height: 500px;
border-bottom: 3px solid #c2c8d2;
}

#reg {
padding-top: 10px;

}

.register {
background: #a7d0bc;

width: 320px;
height: 400px auto;
position: fixed;
top: 20%;
right: 40%;
text-align: center;
padding-bottom: 10px;
display: none;
border: 1px solid black;
box-shadow: 0 0 5px 5px grey;
outline: 3px solid white;
}
.register p {
padding-left: 20px;
padding-right: 20px;
word-wrap: break-word;
text-align: left;
}
.regtitle{
width: 320px;
position: relative;
background: #444444;
color: #ffffff;
height: 50px auto;
text-align:center;
font-size: 20px;
word-wrap: break-word;
padding-top: 10px;
padding-bottom: 10px;

}
.intro {
width: 700px auto;
height: 300px auto;
  position: absolute;
  left: 20px;
  top: 22%;
float:left;
}

.intro h1 {
background: #16a085;
color: white;
position: relative;
top: 130px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
padding-top: 3px;
word-wrap: break-word;
font-size: 40px;
border-left: 5px solid white;
opacity: 0.8;
}

.intro p {
top: -50px;
padding-right: 5px;
padding-left: 5px;
color: #ffffff;
position: relative;
font-size: 26px;
word-wrap: break-word;
line-height: normal;
}

/*style for fixed head */
#header {
height: 60px auto;
background: rgba(221,221,221, 1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
padding: auto;
border-bottom: 1px solid grey;
}

.headcontain {
height: 60px auto;
position: relative;
margin: auto;
margin-left: 5px;
margin-right: 5px;
padding-left: 30px;
padding-top: 5px;
float: left;

}

.logo {
/*background: transparent url('images/logo.png') no-repeat center;
background-size: cover; */
width: 300px;
height: 50px;

top: -5px;
left: 5px;
float: left;
text-align: center;

}


.header-menu {
width: 420px auto;
left: 80px;
float: left;
margin-left: 65px;

}

.header-menu ul {
list-style-type: none;
margin: 2px 2px 2px 2px;
display: inline-block;
height: 30px;
}

.header-menu ul li {
display: inline-block;
float: left;
margin-bottom: 3px;
padding-right: 9px;
padding-left: 9px;
padding-top: 4px;
padding-bottom: 3px;
border-top: 3px solid transparent;
}
.header-menu ul li:hover {
background: #e6faf8;
border-radius: 0px;
transition: .6s ease-in;
border-top: 3px solid grey;
}
.header-menu ul li a {
text-decoration: none;
font-size: 18px;
color: #222222;
display:block;

}

.login {
max-width: 380px;
height: auto;
margin-left: 170px;
right: 0px;
top: 5px;
float: left;
padding-top: 6px;
word-wrap:break-word;

}

.login p.pcl{
max-width: 250px;
margin-top: 7px;
margin-left: 10px;
word-wrap: break-word;
text-align: left;
font-size: 15px;
}
.login input {
margin: 2px 2px 8px 2px;

}


#loginpage {
width: 360px; 
height: auto;
background-color: #c1dad6;
position: fixed;
top: 18%;
left: 35%;
display: none;
z-index: 1;
opacity: 2;
text-align: center;
padding-top: 20px;
border: 1px solid #222222;
box-shadow: 0 0 5px 5px grey;
outline: 3px solid white;
padding-bottom: 5px;
}
#loginpage-title {
height: 40px;
width: 360px;
background: #217c7e url('http://www.cv-yarat.com/themes/standart/iconss/48/id_card.png') no-repeat;
background-position: 2% 0%;
background-size: 37px;
position: relative;
top: -20px;
padding-top: 5px;
font-size: 20px;
color: #ffffff;

}

.enterphoto {
width: 340px;
background: #fffccc;
margin:auto;
margin-top: -10px;
border: 1px solid grey;
border-bottom: none;
}
.enterphoto img {
width: 90px;
height: 90px;
border-radius: 100%;
position: relative;
float: left;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
border: 1px solid grey;
}
.imgshow {
background: url('http://www.cv-yarat.com/themes/standart/iconss/user/camera.png') no-repeat center center;
background-size: 20px;
opacity: 0.8;
border: 1px solid white;
box-shadow: 0 0 0 1px white;
transition: 0.6s ease-in-out;
}
.enterphoto p {
max-width: 210px;
float: left;
padding: 10px 10px 10px 10px;
font-size: 16px;
text-align: justify;
word-wrap: break-word;
}

.entermenu {
width:340px;
margin: auto;
height: 30px;
background: #fffccc url('http://www.cv-yarat.com/themes/standart/iconss/user/home.png') no-repeat 2% 50%;
background-size: 24px;
border:1px solid grey;
border-bottom: none;
padding-top: 10px;
text-align: left;
text-indent: 34px;
font-size: 18px;
}
.entermenu:nth-child(4) {
background: #fffccc url('http://www.cv-yarat.com/themes/standart/iconss/user/home.png') no-repeat 2% 50%;
background-size: 24px;
border-bottom: none;
}
.entermenu:nth-child(5) {
background: #fffccc url('http://www.cv-yarat.com/themes/standart/iconss/user/comment.png') no-repeat 2% 50%;
background-size: 24px;
border-bottom: none;
}
.entermenu:nth-child(6) {
background: #fffccc url('http://www.cv-yarat.com/themes/standart/iconss/user/email.png') no-repeat 2% 50%;
background-size: 24px;
border-bottom: none;
}
.entermenu:nth-child(7) {
background: #fffccc url('http://www.cv-yarat.com/themes/standart/iconss/user/file.png') no-repeat 2% 50%;
background-size: 24px;
border-bottom: none;
}
.entermenu:nth-child(8) {
background: #fffccc url('http://www.cv-yarat.com/themes/standart/iconss/user/user.png') no-repeat 2% 50%;
background-size: 24px;
border-bottom: none;
}
.entermenu:nth-child(9) {
background: #fffccc url('http://www.cv-yarat.com/themes/standart/iconss/user/control-panel.png') no-repeat 2% 50%;
background-size: 24px;
border-bottom: none;
}
.entermenu:nth-last-child(1) {
background: #fffccc url('http://www.cv-yarat.com/themes/standart/iconss/user/exit.png') no-repeat 2% 50%;
background-size: 24px;
border-bottom: 1px solid grey;
}

.entermenu:hover {
background-color: #eddccc;
}

.entermenu a {
text-decoration: none;
}

.entermenu:hover  a{
padding-left: 3px;
transition: .2s ease-in;
}
.colorbtnlogin {
background-color: #7aba7a;
height: 32px;
width: 72px auto;
margin-top: -3px;
font-size: 16px;
padding-left: 6px;
padding-right: 6px;
}
.colorbtnreg {
background-color: #028482;
height: 32px;
width: 72px auto;
margin-top: -3px;
font-size: 16px;
padding-left: 6px;
padding-right: 6px;
}

.colorbtnforget {
background-color: #b76bb8;
height: 32px;
width: 72px auto;
margin-top: -3px;
font-size: 16px;
padding-left: 6px;
padding-right: 6px;
text-decoration: none;
}

.colorbtnreg, .colorbtnlogin, .colorbtnforget a {
text-decoration: none;

}

#result2 {
display:none;
height: 40px ;
width: 150px auto;
position: relative;
top: 5%;
left: 35;
text-align:center;
opacity: 1;
border-radius: 3px;
padding-top: 10px;
font-size: 17px;
color: #ffffff;
}
/* styles and divs for statistic part of body */
#statistic {
width: max-width;
height: auto;
background: #ffffff;
margin-left: -8px;
margin-right: -8px;
margin: auto;

}

.contain {

height: 130px auto;
position: relative;
top: 2px;
left: 5px;
right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
margin-top: 10px;
}

.contain h1 {
text-align: center;
position: absolute;
left: 4px;
right: 4px;
top: -20px;

}

.contain p {
text-align:center;
position: absolute;
left: 4px;
right: 4px;
padding-top: 30px;
font-size: 20px;
font-weight: bold;

}

.today {
position: relative;
width: 220px;
height: 90px;
margin: 5px auto;
margin-left: 30px;
margin-right: 30px;
display: inline-block;
text-align: center;
color: #a2a3a4;
}


/* opinions style */

#opinions {

height: auto;
background: #d8f3c3; /* 34728D */
margin-top: 10px;
margin-left: -8px;
margin-right: -8px;
border-top: 3px solid #c2c8d2;
}

.opcontain {
width: 70%;
text-align:center;
position: relative;
margin-left: 2px;
margin-right: 2px;
height: 470px auto;
padding-top: 20px;
padding-bottom: 20px;
margin: auto;
}

.opcontain h3 {
text-align: center;
left: 4px;
right: 4px;
top: 10px;
word-wrap: break-word;
font-size: 22px;
color: #626364;
}

.opcontain p {
text-align: justify;
color: #727374;
left: 6px;
right: 6px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
line-height: normal;
font-size: 18px;
word-wrap: break-word;


}

.show-opinion {
border-radius: 3px;
background: white;
width: 320px;
height: 460px;
margin: 5px auto;
margin-left: 35px;
margin-right: 35px;
display: inline-block;
position: relative;
text-align:center;
overflow: hidden;

}
.show-opinion:after
 {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #aaa;
   bottom: -20px;
    content: '';
    margin-left: -20px;
    position: absolute;
left: 50%;
display: visible;
}

/* Styling for second triangle (border) */

.show-opinion img {
position: absolute;
top: 30px;
left: 100px;
width: 120px;
height: 120px;
border-radius: 100%;

}
@media screen and (max-width: 500px) {
.show-opinion {
margin-left: 3px;
margin-right: 3px;
width: 270px;
}
.show-opinion img {
left: 75px;

}

}
.show-opinion:hover {
background: #f0f1f2;
color: grey;
transition: 0.3s ease-in;
}

/* aforism div style */

#aforism {

height: 140px auto;
background: #ffffff;
color: #a2a3a4;
margin-left: -8px;
margin-right: -8px;
border-top: 3px solid #c2c8d2;
}

#aforism  > p {
position: relative;
padding-left: 25px;
padding-right: 5px;
padding-top: 25px;
padding-bottom: 25px;
overflow: hidden;
word-wrap: break-word;
text-align: left;
font-family: petit;
font-size: 20px;
}

/* style for why we */
#whywe {

height: auto;
background: #fffccc;
margin-left: -8px;
margin-right: -8px;
border-top: 3px solid #c2c8d2;

padding-bottom: 20px;
}

.whycontain {

height: 130px auto;
position: relative;
top: 0px;
left: 5px;
right: 5px;
padding-top: 0px;
padding-bottom: 5px;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}

.reasons {
background: transparent url('http://www.cv-yarat.com/themes/standart/iconss/pdf-icons/awards.png') no-repeat 5% 50%;
background-size: 64px;
position: relative;
width: 40%;
height: 100px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 30px;
margin-right: 30px;
display: inline-block;
text-align: center;
color: #a2a3a4;
}

.reasons:nth-child(2) {
background: transparent url('http://www.cv-yarat.com/themes/standart/iconss/pdf-icons/copy.png') no-repeat 5% 50%;
background-size: 64px;
}

.reasons:nth-child(3) {
background: transparent url('http://www.cv-yarat.com/themes/standart/iconss/pdf-icons/raputation.png') no-repeat 5% 50%;
background-size: 64px;
}

.reasons:nth-child(4) {
background: transparent url('http://www.cv-yarat.com/themes/standart/iconss/pdf-icons/settings.png') no-repeat 5% 50%;
background-size: 64px;
}

.reasons:nth-child(5) {
background: transparent url('http://www.cv-yarat.com/themes/standart/iconss/pdf-icons/work.png') no-repeat 5% 50%;
background-size: 64px;
}

.reasons:nth-child(6) {
background: transparent url('http://www.cv-yarat.com/themes/standart/iconss/pdf-icons/training.png') no-repeat 5% 50%;
background-size: 64px;
}

.reasons:hover {
background-color: #faf9e9;
}

.whycontain h3 {
width: 150px;
height: 30px;
padding-top: 13px;
background: #cbf3c3;
color: grey;
text-align: left;
position: relative;
left: -4px;
right: 4px;
top: 5px;
padding-left: 10px;
margin-bottom: 5px;

}

.reasons p {
width: 75%;
text-align:center;
position: relative;
left: 4px;
right: 4px;
padding-top: 10px;
padding-left: 80px;
padding-right: 15px;
padding-bottom: 10px;
font-size: 20px;
font-weight: bold;
word-wrap: break-word;
float: left;

}

/* news in main page */

#newsinmain {

height: auto;
background: #ffffff;
margin-left: -8px;
margin-right: -8px;
border-top: 3px solid #c2c8d2;

padding-bottom: 20px;
}

.lastnews {

height: 130px auto;
position: relative;
top: 0px;
left: 5px;
right: 5px;
padding-top: 0px;
padding-bottom: 5px;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}

.lastntext {

background-size: 64px;
position: relative;
width: 90%;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 30px;
margin-right: 30px;
display: inline-block;
text-align: center;
color: #a2a3a4;

}


.lastnews h3 {
width: 200px;
height: 30px;
padding-top: 13px;
background: #cbf3c3;
color: grey;
text-align: left;
position: relative;
left: -4px;
right: 4px;
top: 5px;
padding-left: 10px;
margin-bottom: 5px;

}

.lastntext p {
width: 95%;
text-align:center;
position: relative;
left: 4px;
right: 4px;
padding-top: 2px;
padding-left: 30px;
padding-right: 15px;
padding-bottom: 2px;
font-size: 20px;
font-weight: bold;
word-wrap: break-word;
float: left;
text-align: left;
}

/* style for footer */

#footer {

height: auto;
background: rgba(221,221,221,1);
color: #000000;
padding: 20px 5px;
margin-top: 1px;
margin-left: -8px;
margin-right: -8px;
border-top: 3px solid #c2c8d2;
border-bottom: 1px solid grey;
}

.ftcontain {
position: relative;
height: 120px auto;
text-align:center;
padding-top: 5px;
padding-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
float: left;

}

.footmenu {
float: left;
position: relative;
display: inline-block;
height: 80px auto;
margin-left: 40px;
margin-right: 60px;
margin-top: 6px;
padding-left: 6px;
padding-right: 6px;
word-wrap: break-word;

}

#copyright {
width: 260px;
text-align:left;

}

#social {
width: 220px;
text-align:center;

}

#counters {
width: 300px;
text-align:center;

}

/*sidepanel */
#sidepanel {
width: 52px;
height: 400px;
background: #c6c7c8;
position: fixed;
top: 80px; 
right: -8px;
z-index: 1;
border-radius: 3px 0 0 3px;
border: 1px solid #ffffff;
text-align: center;
word-wrap: break-word;
display: block;
}
#sidepanel:hover {
box-shadow: 0 0 1px 1px white;
}
#sidepanel a {
opacity: 0.8;
}
#sidepanel a:hover {

opacity: 1;
}
/* sidepanel divs with icons */
.homeic {
width: 35px;
height: 35px;
border-radius: 100%;

background: url('http://www.cv-yarat.com/themes/standart/iconss/user/home.png') no-repeat center center;
background-size: 28px;
position: absolute;
top: 3px;
right: 8px;
display: block;
margin-left: 2px;
margin-right: 2px;
}

.infoic {
width: 35px;
height: 35px;
border-radius: 100%;

background: url('http://www.cv-yarat.com/themes/standart/iconss/user/comment.png') no-repeat center center;
background-size: 28px;
position: absolute;
display: block;
top: 47px;
right: 1px;
margin-left: 2px;
margin-right: 2px;
right: 8px;
display: block;
}

.mailic {
width: 35px;
height: 35px;
border-radius: 100%;

background: url('http://www.cv-yarat.com/themes/standart/iconss/user/email.png') no-repeat center center;
background-size: 28px;
position: absolute;
display: block;
top: 91px;
right: 8px;
margin-left: 2px;
margin-right: 2px;

}

.mycv {
width: 35px;
height: 35px;
border-radius: 100%;

background: url('http://www.cv-yarat.com/themes/standart/iconss/user/file.png') no-repeat center center;
background-size: 28px;
position: absolute;
display: block;
top: 135px;
right: 8px;
margin-left: 2px;
margin-right: 2px;

}

.notesic {
width: 35px;
height: 35px;
border-radius: 100%;

background: url('http://www.cv-yarat.com/themes/standart/iconss/user/user.png') no-repeat center center;
background-size: 28px;
position: absolute;
display: block;
top: 179px;
right: 8px;
margin-left: 2px;
margin-right: 2px;

}

.zoomic {
width: 35px;
height: 35px;
border-radius: 100%;
background: url('http://www.cv-yarat.com/themes/standart/iconss/user/search.png') no-repeat center center;
background-size: 28px;
position: absolute;
display: block;
top: 223px;
right: 8px;
margin-left: 2px;
margin-right: 2px;
transform: rotateY(180deg);
}

.setic {
width: 35px;
height: 35px;
border-radius: 100%;
background: url('http://www.cv-yarat.com/themes/standart/iconss/user/exit.png') no-repeat center center;
background-size: 25px;
position: absolute;
display: block;
top: 352px;
right: 8px;
margin-left: 2px;
margin-right: 2px;

}


.homeic:hover, .infoic:hover, .mailic:hover, .mycv:hover, .notesic:hover, .setic:hover, .zoomic:hover {
background-color: #eff0c3;
border-radius: 0;
}

/* ################## LETS DESIGN PAGE ABOUT.PHP ##########################*/

div#headabout {
background: #16a085 url('http://www.cv-yarat.com/themes/standart/images/about.jpg') no-repeat 10% 19%;
background-size: cover;
width: max-width;
height: 250px;
position: relative;
margin-left: -8px;
margin-right: -8px;
}
#headabout h1 {
border-radius: 15px;
color: #ffffff;
position: absolute;
top: 30%;
left: 40%;
font-size: 50px;
padding: 5px;
}

#aboutsite {
background: #ffffff;
color: black;

}

#aboutsite img {
float: left;
position: relative;
top: 10px;
left: 5px;
width: 400px;
height: 250px;
margin-right: 15px;
margin-bottom: 10px;
border: 1px solid black;
}
#aboutsite p {
height: auto;
padding-top: 10px;
margin-right: 50px;
text-indent: 20px;
font-size: 19px;
word-wrap: break-word;
text-align: justify;
}

/* ################## LETS DESIGN PAGE CONTACT.PHP ##########################*/
div#headcont {
background: #16a085 url('http://www.cv-yarat.com/themes/standart/images/contact.jpg') no-repeat 10% 19%;
background-size: cover;
height: 250px;
margin-right: -8px;
margin-left: -8px;

}
#headcont h1 {
border-radius: 15px;
color: #ffffff;
position: absolute;
top: 15%;
left: 40%;
font-size: 50px;
padding: 5px;
}

#contsite {
background: #ddffcf;
width: max-width;
height: 600px auto;
text-align: center;
margin: 10px 50px 10px 50px;
position: relative;
border-radius: 6px;

}

.mailinfo {
background: #c1e1a6;
width: 400px;
height: 500px;
margin-top: 50px;
margin-left: 100px;
margin-bottom: 30px;
float: left;
padding: 7px auto;
border-radius: 3px;
position: relative;
}
.mailinfo-title {
background: #74afad;
width: 400px;
height: 50px;
color: #ffffff;
top:0;
left:0;
padding-top: 20px;
font-size: 22px;
border-radius: 3px 3px 0 0;
}
.mailinfo-rules {
background: #f3fab6;
width: 390px;
height: 40px auto;
font-size: 16px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 5px;
padding-right: 5px;
text-align: justify;
text-indent: 6px;
word-wrap: break-word;

}
.mailinfo-rules:nth-child(odd) {
background: #ececea;

}


.contact {
background: #cccccc;
width: 400px;
height: 500px;
margin-top: 50px;
margin-right: 130px;
margin-bottom: 30px;
float: right;
padding: 7px auto;
position: relative;
border-radius: 3px;
}
.contact-title {
background: #74afad;
width: 400px;
height: 50px;
top:0;
left:0;
padding-top: 20px;
font-size: 22px;
color: #ffffff;
border-radius: 3px 3px 0 0;
}
.contact-form {
width: 400px;
height:350px;
font-size: 18px;

}

div.contact input#yourmail {
width: 364px;
font-size: 15px;
text-indent: 10px;
border: 1px solid grey;
}
div.contact input#subject {
width: 364px;
text-indent: 10px;
font-size: 15px;
border: 1px solid grey;
}

div.contact textarea#message {
width: 360px;
text-indent: 10px;
font-size: 15px;
margin-top: 5px;
border-radius: 3px;
font-family: Arial;
text-align: justify;
border: 1px solid grey;
}

/* ################## LETS DESIGN PAGE Help.PHP ##########################*/
div#headhelp {
background: #16a085 url('http://www.cv-yarat.com/themes/standart/images/help.jpg') no-repeat 10% 19%;
background-size: cover;
height: 250px;
margin-right: -8px;
margin-left: -8px;

}
#headhelp h1 {
border-radius: 15px;
color: #ffffff;
position: absolute;
top: 15%;
left: 40%;
font-size: 50px;
padding: 5px;
}

#sitehelp {
background: #ddffcf;
width: max-width;
height: 600px auto;
text-align: left;
margin: 0px 10px 0px 10px;
position: relative;
border-radius: 6px;
padding: 15px;
}
#sitehelp h3 {
color: #16a085;
font-size: 22px;
text-decoration: underline;
}

#sitehelp p {
font-size: 18px;
color: grey;
word-wrap: break-word;
}
/* ################## LETS DESIGN PAGE PROFILE.PHP ##########################*/
div#profhead {
background: #16a085 url('http://www.cv-yarat.com/themes/standart/images/profile1.jpg') no-repeat 10% 19%;
background-size: cover;
height: 280px;
margin-right: -8px;
margin-left: -8px;
margin-top: -8px;
}
#profhead h1 {
border-radius: 15px;
color: #ffffff;
position: absolute;
top: 15%;
left: 30%;
font-size: 50px;
padding: 5px;
}

#profile {
background: #ddffcf;
position: relative;
margin-top: 1px;
margin-bottom: 5px;

}

.profile-left {
background: #74afad;
height: 710px;
width: 31.2%;
float:left;
margin-left: -8px;

}

.profile-left img {
margin-top: 10px;
border: 2px solid white;
margin-left: 50px;
margin-right: 20px;
}

.userprofile {
width: 300px;
margin-left: 50px;
margin-right: 20px;
margin-top: 20px;
height: 400px;


}
.userprofile h4 {
padding-right: 3px;
color: #bbddee;
font-size: 18px;
word-wrap: break-word;
}
.userprofile p {
padding-right: 3px;
color: #ffffff;
font-size: 16px;
line-height: 20px;
word-wrap: break-word;
}

.profile-right1 {
background: #80ceb9;
height: 100px auto;
width: 70%;
float: right;
text-align: center;
margin-right: -8px;
}

.profile-right2 {
background: #cccccc;

height: 610px;
width: 70%;
float: right;
margin-right: -8px;
}

.profile-menu {
float: left;
text-align: center;
margin-top: 10px; 
margin-left: 60px;
margin-bottom: 10px;
}

.profile-menu div {
cursor: pointer;
margin-left: 25px;
margin-right: 25px;

}
.active{
border: 3px solid white;

}

.menu-info {
height: 70px;
width: 120px;
padding-top: 0px;
display: inline-block;
text-align: center;
word-wrap: break-word;

}
.menu-info p {
padding-bottom: 20px;

}
.menu-changedata {

background: #ffec94 url('http://www.cv-yarat.com/themes/standart/iconss/user/file.png') no-repeat center center;
background-size: 52px;
width: 70px;
height: 70px;
display: inline-block;

}

.menu-changepass {

background: #3399cc url('http://www.cv-yarat.com/themes/standart/iconss/user/lock.png') no-repeat center center;
background-size: 52px;
width: 70px;
height: 70px;
display: inline-block;


}

.menu-changefoto {

background: #b378d3 url('http://www.cv-yarat.com/themes/standart/iconss/user/camera.png') no-repeat center center;
background-size: 52px;
width: 70px;
height: 70px;
display: inline-block;


}

.menu-changemail {

background: #99cc00 url('http://www.cv-yarat.com/themes/standart/iconss/user/email.png') no-repeat center center;
background-size: 52px;
width: 70px;
height: 70px;
display: inline-block;


}

.menu-balance {

background: #ef597b url('http://www.cv-yarat.com/themes/standart/iconss/user/settings.png') no-repeat center center;
background-size: 52px;
width: 70px;
height: 70px;
display: inline-block;


}

.menu-premium {

background: #028482 url('http://www.cv-yarat.com/themes/standart/iconss/user/crest.png') no-repeat center center;
background-size: 52px;
width: 70px;
height: 70px;
display: inline-block;


}

.menu-changedata:hover, .menu-changepass:hover, .menu-changemail:hover, .menu-changefoto:hover, .menu-premium:hover, .menu-balance:hover {
background-color: #f6e4cc;

}

/* profile submenu ids and their styles */
.profile-right2-content {

width: 600px;
margin: 50px;
padding-bottom: 20px;
}

.profile-right2-content  div{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
padding-left: 20px;

}

.profile-right2-content-title {
float: right;
margin-right: 10px;
margin-top: 10px;
width: 200px;
text-align: justify;
word-wrap: break-word;
font-size: 18px;
padding-bottom: 10px ;
}

#changedata {

display: visible;
}

#changedata select {
width: 150px;
height: 40px;
border-radius: 2px;
font-size: 18px;
}

#changepass {

display: none;
}

#changemail {

display: none;
}

#changefoto {

display: none;
}

#premium {

display: none;
}

#balance {

display: none;
}
#balance select {
width: 200px;
height: 40px;
border-radius: 2px;
font-size: 18px;
}
/* style for opinions.php */
div#opinionhead {
background: #16a085 url('http://www.cv-yarat.com/themes/standart/images/opin.jpg') no-repeat 10% 19%;
background-size: cover;
height: 280px;
margin-right: -8px;
margin-left: -8px;
margin-top: -8px;
}
#opinionhead h1 {
border-radius: 15px;
color: #000000;
position: absolute;
top: 15%;
left: 30%;
font-size: 50px;
padding: 5px;
}

#allopinions {
background: #ddffcf;
position: relative;
margin-top: 1px;
margin-bottom: 5px;
height: auto;
padding-left: 100px;
text-align: center;
}

.writeopinion {
width: 86%;
height: 70px auto;
margin: auto;
background: #ff7a5a;
padding-top: 7px;
float: left;
text-align: left;
}


.write {
float: left;
display: inline-block;
margin-left: 5px;
}
.opresult {
width:30%;
margin-top: 3px;
margin-left: 25px;
padding-top: 3px;
padding-bottom: 3px;
word-wrap: break-word;
text-align: left;
display: inline-block;
}

input#myopinion {
width: 400px;
font-size: 14px;
}

.useropinions {
float: left;
width: 92.3%;
height: 300px auto;
margin: auto;
margin-bottom: 15px;
text-align: left;
}

.ops {
width: 92.3%;
height: 100px auto;
background: #dddddd;
float: left;
border-bottom: 1px solid grey;
border-left: 5px solid grey;
border-right: 5px solid grey;
}
.ops:nth-child(odd) {
background: #d0d0c0;
}
.ops:nth-child(1){
margin-top: 5px;
border-radius: 3px 3px 0 0;
}
.ops:nth-last-child(1){
border-bottom: none;
border-radius: 0 0 3px 3px;
}
.ops-foto {
width: 40px;
height: 40px;
position: relative;
top: 10px;
left: 2px;
bottom: 5px;
float: left;
padding-bottom: 15px;
margin-left: 10px;
}

.ops p {
position: relative;
top: -7px;
left: 10px;
padding-right: 10px;
padding-left: 5px;
padding-top: 3px;
word-wrap: break-word;
margin-right: 10px;
}

.ops form {
float: right;
display: none;
}

.pagenav {
background: #ff7a5a;
max-width: 400px;
text-align: center;
float: left;
margin-top: 10px;
word-wrap: break-word;
}

.pages {
float: left;
width: 20px auto;
height: 20px;
background: #dcdcdc;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
margin: 3px 4px 4px 4px;
}
.pages a {
text-decoration: none;
}
.green2 {
background: green;
color: white;
}
.green2 a {

color: white;
}
/* clearing floating */


/* style for opinions.php */
div#newshead {
background: #16a085 url('http://www.cv-yarat.com/themes/standart/images/news.jpg') no-repeat 10% 29%;
background-size: cover;
height: 280px;
margin-right: -8px;
margin-left: -8px;
margin-top: -8px;
}
#newshead h1 {
border-radius: 15px;
color: #ffffff;
position: absolute;
top: 18%;
left: 20%;
font-size: 50px;
padding: 5px;
}

#allnews {
background: #ddffcf;
position: relative;
margin-top: 1px;
margin-bottom: 5px;
height: auto;
padding-left: 100px;
text-align: center;
}

.shownews {
float: left;
width: 96%;
height: 300px auto;
margin: auto;
margin-bottom: 15px;
text-align: left;

}

.news {

width: 94%;
height: 100px auto;
float: left;
border-bottom: 1px solid grey;
border-left: 5px solid #84cf96;
cursor: pointer;
}

.news:nth-child(even) {
background: #fffeff;
}
.news:nth-child(odd) {
background: #ffffcc;
}
.news:nth-child(1){
margin-top: 5px;
}
.news:nth-last-child(1){
border-bottom: none;
}
.news:hover {
background-color: #d9e2e1;
}

.news-data {
background: #84cf96;
color: white;
width: 80px auto;
height: 40px auto;
position: relative;
top: 5px;
left: 2px;
bottom: 5px;
float: left;
padding: 5px 5px 5px 5px;
margin-left: 10px;
border-radius: 2px;
margin-bottom: 10px;
text-align: center;
overflow: hidden;
}

.news p {
position: relative;
top: -7px;
left: 10px;
padding-right: 10px;
padding-left: 5px;
padding-top: 3px;
word-wrap: break-word;
margin-right: 10px;
}
#currentnews {
background: #f4f3ee;
display: none;
position: fixed;
top: 17%;
left: 30%;
width: 400px;
height: auto;
padding: 10px;
border: 1px solid black;
text-align: justify;
}

/* ################## LETS DESIGN PAGE MYCV.PHP ##########################*/
div#cvhead {
background: #16a085 url('http://www.cv-yarat.com/themes/standart/images/blackboard.jpg') no-repeat center;
background-size: cover;
height: 300px;
margin-right: -8px;
margin-left: -8px;
margin-top: -8px;
}
#cvhead h1 {
border-radius: 15px;
color: #ffffff;
position: absolute;
top: 22%;
left: 25%;
font-size: 45px;
padding: 5px;
}

#cvhead h2 {
border-radius: 15px;
color: #ffffff;
position: absolute;
top: 32%;
left: 35%;
font-size: 38px;
padding: 5px;
}

#cvhead img {
width: 120px;
height: 120px;
position: absolute;
top: 170px;
left: 70px;
border: 1px solid grey;
outline: white solid thick;
outline-radius: 4px;
}

#cv {
background-color: #ffffff;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
margin-left: -8px;
margin-right: -8px;
}


.cv-left {
background: #c6d2d5;
height: 710px auto;
width: 21.1%;
float:left;
text-align: center;
padding-top: 0px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
word-wrap: break-word;
margin-left: 5%;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 3px;
}
.cv-left button {
width: 200px;

}
input.cv {
height: 20px;
width: 200px;
font-size: 12px;
text-indent: 3px;
}
.cv-left h3 {
color: #000000;
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: -10px;
padding: 5px 5px 5px 5px;
font-size: 22px;
word-wrap: break-word;
text-align: left;
}
.cv-left p {
text-align: left;
margin-left: 5px;
}

button#addexp {
background: #7ec08c url('http://www.cv-yarat.com/themes/standart/iconss/mycv/Plus.png') no-repeat 50% 50%;
background-size: 52px;
width: 80px;
height: 80px;
box-shadow: 0;
outline: none;
border: 1px solid white;
cursor: pointer;
}
button#addedu {
background: #7ec08c url('http://www.cv-yarat.com/themes/standart/iconss/mycv/Folder.png') no-repeat 50% 50%;
background-size: 52px;
width: 80px;
height: 80px;
outline: none;
display: inline-block;
border: 1px solid white;
cursor: pointer;
}
button#addcert {
background: #7ec08c url('http://www.cv-yarat.com/themes/standart/iconss/mycv/Document.png') no-repeat 50% 50%;
background-size: 52px;
width: 80px;
height: 80px;
outline: none;
border: 1px solid white;
cursor: pointer;
}
button#addlang {
background: #7ec08c url('http://www.cv-yarat.com/themes/standart/iconss/mycv/Comment.png') no-repeat 50% 50%;
background-size: 52px;
width: 80px;
height: 80px;
outline: none;
border: 1px solid white;
cursor: pointer;
}
button#addcomp {
background: #7ec08c url('http://www.cv-yarat.com/themes/standart/iconss/mycv/Ipad.png') no-repeat 50% 50%;
background-size: 52px;
width: 80px;
height: 80px;
outline: none;
border: 1px solid white;
cursor: pointer;
}
button#deletecv {
background: #7ec08c url('http://www.cv-yarat.com/themes/standart/iconss/mycv/Trash-Can.png') no-repeat 50% 50%;
background-size: 52px;
width: 80px;
height: 80px;
outline: none;
border: 1px solid white;
cursor: pointer;
}


button#addexp:hover, #addedu:hover, #addcert:hover, #addlang:hover, #addcomp:hover, #deletecv:hover {
background-color: #df9474;
transition: .1s ease-in;
transform: scale(1);
background-size: 58px;
}

.cv-right {
background: #c6d2d5;
height: 710px auto;
width: 67%;
float: right;
margin-right: 5%;
margin-top: 5px;
border-radius: 3px;
text-align: center;
}

.cv-right form {
display: none;
}
.cv-right-content {
width: 90%;
height: 500px auto;
margin-left: 10px;
margin-top: 0px;
float: left;
padding-bottom: 10px;
}
.cv-right-leftcontent{
float: left;
width: 69.2%;
height: 500px auto;
margin-left: 10px;
margin-top: 10px;
padding-bottom: 10px;
}
.cv-right-rightcontent {
float: right;
width: 27%;
height: 500px auto;
margin-right: 10px;
margin-top: 10px;
}

.titles {
width: 100px;
height: 20px auto;
position: relative;
top: 0;
left: 0;
background: #f8debd;
color: #a4a5a6;
padding: 5px 5px 5px 5px;
font-weight: bold;
}
.about {
width: 97%;
height: 100px auto;
margin: auto;
margin-top: 10px;
background: #eeeeee;
}
.about p {
text-align: left;
margin: 5px;
font-size: 15px;
word-wrap: break-word;
}

.about input {
width: 400px;
text-indent: 5px;

}
.about textarea {
width: 400px;
text-indent: 5px;

}
.experience {
width: 98%;
height: 400px auto;
margin: auto;
margin-top: 10px;
background: #eeeeee;
}
.experience input {
width: 300px;
text-indent: 5px;

}
.experience input[type='checkbox']{
width: 20px;
text-indent: 5px;

}
input[type="date"]:before {
    content: attr(placeholder) !important;
    color: #aaa;
    margin-right: 0.5em;
  }
  input[type="date"]:focus:before,
  input[type="date"]:valid:before {
    content: "";
  }
  
  
.experience textarea {
width: 300px;
text-indent: 5px;

}
.experience p {
text-align: left;
margin: 5px;
font-size: 15px;
word-wrap: break-word;

}
.experience h4 {
text-align: left;
margin: 5px;
font-size: 18px;
word-wrap: break-word;

}
.experience h5 {
text-align: left;
margin: 5px;
font-size: 16px;
word-wrap: break-word;

}
.experience h6 {
text-align: left;
margin: 5px;
font-size: 16px;
word-wrap: break-word;

}

.seperate {
width: max-width;
border-bottom: 1px solid grey;
margin-bottom: 5px;
}

.visible {
width: 30px;
height: 30px;
background: #ff7a5a url('http://www.cv-yarat.com/themes/standart/iconss/48/pencil.png') no-repeat center center;
background-size: 20px;
border-radius: 100%;
position: relative;
top: 0;
right: 13px;
cursor: pointer;
float: right;
display: none;
}

/* saxla bunlari heleki
.education {
width: 520px;
height: 200px;

margin: auto;
margin-top: 10px;
border: 1px solid;

}

.awards {
width: 520px;
height: 200px;

margin: auto;
margin-top: 10px;
border: 1px solid;

}
*/

.langcomp {
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
width: 96%;
height: 300px auto;
background: #eeeeee;
}

.langcomp p {
text-align: left;
margin: 5px;
font-size: 15px;
word-wrap: break-word;

}
.langcomp h6 {
text-align: left;
margin: 5px;
font-size: 16px;
word-wrap: break-word;

}

/* adding information to CV */

.addtocv {
max-width: 400px;
height: auto;
position: fixed;
top: 25%;
left: 35%;
background: #f8debd;
display: none;
padding: 25px 20px 20px 20px;
border-radius: 4px;
border: 2px solid #ffae5d;
z-index: 1;
box-shadow: 0 0 2px 2px white;

}
.addtocv input {
width: 300px;

}
.addtocv textarea {
width: 300px;

}
.addtocv select {
width: 150px;
height: 30px;
border: 1px solid grey;
border-radius: 4px;
}
.addtocv input[type='checkbox']{
width: 20px;
text-indent: 5px;

}

form#myexp {
 display: none;
 }
form#myedu {
 display: none;
 }
form#myaward {
 display: none;
 }
form#mylang {
 display: none;
 }
form#mycomp {
 display: none;
 }
 form#deletemycv{
 display: none;
 }
 
 /* ################## LETS DESIGN PAGE CONFIRM.PHP ##########################*/
div#headconfirm {
background: #16a085 url('http://www.cv-yarat.com/themes/standart/images/confirmation.jpg') no-repeat 10% 19%;
background-size: cover;
height: 250px;
margin-right: -8px;
margin-left: -8px;

}
#headconfirm h1 {
border-radius: 15px;
color: #ffffff;
position: absolute;
top: 15%;
left: 40%;
font-size: 50px;
padding: 5px;
}

#confirm {
background: #ddffcf;
width: max-width;
height: 450px;
text-align: center;
margin: 10px 50px 10px 50px;
border-radius: 6px;
}


.accept {
background: #cccccc;
width: 450px;
height: 300px;
float: left;
margin-top: 50px;
margin-left: 350px;
border-radius: 3px;
text-align: center;
}

.conf-title {
background: #74afad;
width: 450px;
height: 50px;
top:0;
left:0;
padding-top: 20px;
font-size: 22px;
color: #ffffff;
border-radius: 3px 3px 0 0;
}
.acceptmail {
width: 450px;
height:250px;
font-size: 18px;
margin-top: 20px;
}
 

 /* ################## LETS DESIGN PAGE CONFIRM.PHP ##########################*/
div#headforget {
background: #16a085 url('http://www.cv-yarat.com/themes/standart/images/forgot.jpg') no-repeat 10% 10%;
background-size: cover;
height: 250px;
margin-right: -8px;
margin-left: -8px;

}
#headforget h1 {
border-radius: 15px;
color: green;
position: absolute;
top: 15%;
left: 40%;
font-size: 50px;
padding: 5px;
}

#forget {
background: #ddffcf;
width: max-width;
height: 450px;
text-align: center;
margin: 10px 50px 10px 50px;
border-radius: 6px;
}


.sendpass {
background: #cccccc;
width: 450px;
height: 300px;
float: left;
margin-top: 50px;
margin-left: 350px;
border-radius: 3px;
text-align: center;
}

.conf-title {
background: #74afad;
width: 450px;
height: 50px;
top:0;
left:0;
padding-top: 20px;
font-size: 22px;
color: #ffffff;
border-radius: 3px 3px 0 0;
}

.acceptpass {
width: 450px;
height:250px;
font-size: 18px;
margin-top: 20px;
}

 /* LETS DESIGN MAIL.PHP PAGE */
 #allmails {
height: auto;
background: #ddffcf;
padding-top: 100px;
padding-bottom: 50px;
padding-left: 250px;
 }
 
 .showmail {
 width: 91%;

 }
 
 .mailmain {
 width: 91.8%;
 height: auto;
 background: #ffffff;
 margin-top: 1px;
float: left;
 position: relative;
 }

 .mailmain:nth-child(odd) {
 background: #ffffdd;
 }
 .mailmain:nth-child(1) {
 margin-top: -2;
 background: #ffffdd;
 }
 
 .mailmain p {
 padding: 5px;
 word-wrap: break-word;
 font-size: 18px;
 margin-bottom: 0px;
 margin-top: 0px;
  cursor: pointer;
 }
 .mailform {
 height: 25px;
 float: right;
 margin-right: 10px;
 margin-top: -5px;
 margin-bottom: 3px;
 }
 
 button.delete {
 height: 20px;
 width: 20px;
 border: 1px solid red;
 background: #f87155 url('http://www.cv-yarat.com/themes/standart/iconss/48/delete.png') no-repeat center;
 background-size: 10px;
 text-align: center;
 padding: 2px;
 color: white;
  cursor: pointer;
 }
 button.delete:hover {
 box-shadow: 0 0 1px 1px white;
 }
 
 .mailtitle {
 background: #f79986;
 color: white;
 width: 90.7%;
 height: 30px auto;
 padding-top: 5px;
 padding-left: 10px;
 word-wrap: break-word;
 font-size: 20px;
 }
 
 .mailmessage {
 width: 90.7%;
 padding-left: 5px;
 padding-right: 5px;
 word-wrap: break-word;
 margin-top: -5px;
 margin-bottom: 5px;
 }
 #showmail {
background: #f4f3ee;
display: none;
position: fixed;
top: 17%;
left: 30%;
width: 400px;
height: auto;
padding: 15px;
border: 1px solid black;
text-align: justify;
}
 .mailmessage p {
 font-size: 16px;
 text-align: justify;
 margin-bottom: 2px;
 text-indent: 15px;
 font-style: italic;
 }
 .unread {
 height: 7px;
 background: yellow;
 border-radius: 25%;
 padding: 2px;
 padding-bottom: 2px;
 color: green;
 position: relative;
 top: -6px;
 right: -4px;
 word-wrap: break-word;
 font-size:10px;
 font-style: bold;
 }
 /* scroll to top div */
 .totop {
 background: transparent url('http://www.cv-yarat.com/themes/standart/iconss/uparrow.png') no-repeat center center;
 background-size: 70px;
 width: 50px;
 height: 50px;
 position: fixed;
 bottom: 20px;
 right: 30px;
 opacity: 0.8;
 text-align: center;
 padding: 5px;
 padding-top: 10px;
 color: #ffffff;
 display: none;
 cursor: pointer;
 }
.totop:hover {
opacity: 1;
}
.clear {
clear: both;
}