/**********/
/* IMPORT */
/**********/

@import url(reset.css);
@import url(layout.css);
	
/*******************/
/* GENERAL CLASSES */
/*******************/

.grid {position: relative;}
.grid.left {margin-right: 300px; width: 260px;}
.grid.right {float: right; width: 260px;}
.grid h4 {margin-top: 0px;}

.grid a.relative {position: absolute; right: 0px; top: 5px; font-weight: bold;}

/* No top margin */
#content > h2:first-child, #sidebar > h4:first-child, .notepad > p:first-child, .SNIPPET_page_store .matryoshka > h3:first-child, #title_suppliers > h3:first-child, #sidebar > div:first-child > h4:first-child, #content > h3:first-child, #resume h3, #sidebar > div:first-child > h4:first-child {margin-top: 0px;}

.cleaner {clear: both;}
.hidden {display: none;}
strong {font-weight: bold;}
em {font-style: italic;}
small {font-size: 11px;}
.color {color: #E62E2E;}


body {font-size: 12px; font-family: Arial, sans-serif; color: #333333;}
/* Header */
h2, h3, h4 {font-family: Calibri ,Arial, sans-serif;}
h2 {margin-top: 30px; margin-bottom: 20px; line-height: 24px; font-size: 24px; color: #4D4D4D; font-weight: normal; padding-bottom: 10px; border-bottom: 1px solid #808080;}
h3 {margin-top: 40px; margin-bottom: 12px; line-height: 20px; font-size: 20px; color: #D9272C; font-weight: bold;}
h4 {margin-top: 30px; margin-bottom: 12px; line-height: 18px; font-size: 18px; color: #4D4D4D; font-weight: bold;border-left: 5px solid #E62E2E; padding-left: 10px;}
h5 {margin-top: 20px; margin-bottom: 10px; line-height: 14px; font-size: 14px; color: #4D4D4D; font-weight: bold;}

/* Paragraph, boxes */
p {margin-top: 10px; margin-bottom: 10px; line-height: 20px;}
p.icon img.icon {position: relative; top: 3px;}
.quote {padding-left: 15px; border-left: 3px solid #C6C6C6; font-style: italic;}

a {color: #E62E2E;}
a.ext {padding-right: 16px; background: url(/img/icons/ext.png) right center no-repeat;}

/* Image */
img {}
img.icon {display: inline; width: 16px; height: 16px; position: relative; top: 0px;}

/* Gallery */
.gallery {}
.gallery .item {float: left; margin-right: 18px; margin-bottom: 20px;}
.gallery .item img {display: block; width: 124px; height: 124px; border: 1px solid #C6C6C6;}
.gallery .item .name {margin-top: 5px; display: block; text-align: center; color: #333333;}
.gallery.portfolio .item {margin-right: 8px; margin-bottom: 8px;}

/* Button */
.button {display: block; border: 0px none; text-align: center; color: #FFFFFF; font-weight: bold; text-decoration: none; position: relative;}

.button.classic {width: auto; height: 34px; line-height: 34px; background: url(/img/gui/buttonClassic_bg.png) no-repeat 0px 0px; position: relative;}
.button.classic .visual {position: absolute; top: 0px; right: 0px; display: block; width: 10px; height: 34px; background: url(/img/gui/buttonClassic_right.png) no-repeat 0 0;}
.button.classic:hover {background-position: 0px -50px;}
.button.classic:hover .visual {background-position: 0px -50px;}

.button.bend {position: absolute; right: -5px; bottom: -5px; width: 109px; height: 39px; line-height: 45px; text-indent: 5px; background: transparent url(/img/gui/buttonBend.png) no-repeat 0 0;}
.button.bend:hover {background-position: 0px -50px;}

.button.down {width: 80px; height: 84px; background: transparent url(/img/gui/buttonDown.png) no-repeat 0 0;}
.button.down:hover {background-position: -120px 0px;}
.button.down .matryoshka {padding-top: 5px; display: block; line-height: 20px;}

/* List */
#page ul, #page ol {margin-left: 10px;}
ul.bullet {list-style: square outside none; padding-left: 20px;}
ul.bullet li {margin: 8px 0;}
ul.icon {padding-left: 0px;}
ul.icon li {margin-bottom: 4px; line-height: 20px; padding-left: 22px;}
ul.check {}
ul.check li {background: url(/img/icons/check.png) no-repeat 0px 2px;}
ul.tick {}
ul.tick li {background: url(/img/icons/tick.png) no-repeat 0px 2px;}
ul.download {}
ul.download li {background: url(/img/icons/download.png) no-repeat 0px 2px;}

ul.people li {margin-bottom: 0px; line-height: 36px; padding-left: 42px; background: url(/img/icons/people.png) left center no-repeat;}

/* Table */
table {collapse: collapse;}
table thead {text-align: center;}

/* Line */
hr {clear: both; display: block; margin: 10px 0 -10px 0; height: 24px; border: 0; outline: 0; background: url(/img/gui/hr.png) no-repeat center center;}

/* Bubble */
.bubble {margin-bottom: 60px; padding: 10px 15px 0px 15px; position: relative;}
.bubble .author {position: absolute; right: 0px; bottom: -36px; display: block; width: 100%; height: 36px; line-height: 60px; text-align: right;}
#content .bubble {background: transparent url(/img/gui/bubbleBig_bg.png) no-repeat 0 0;}
#content .bubble .author {background: transparent url(/img/gui/bubbleBig_bottom.png) no-repeat 0 0;}
#sidebar .bubble {background: transparent url(/img/gui/bubbleSmall_bg.png) no-repeat 0 0;}
#sidebar .bubble .author {background: transparent url(/img/gui/bubbleSmall_bottom.png) no-repeat 0 0;}