/* INDEX */ #centered { width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; } img{ border:none; } /* FONTS */ /* cyrillic-ext */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; src: local('PT Sans Italic'), local('PTSans-Italic'), url(../fonts/PT_Sans/PT_Sans-Web-Italic.ttf) format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; src: local('PT Sans Italic'), local('PTSans-Italic'), url(../fonts/PT_Sans/PT_Sans-Web-Italic.ttf) format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; src: local('PT Sans Italic'), local('PTSans-Italic'), url(../fonts/PT_Sans/PT_Sans-Web-Italic.ttf) format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; src: local('PT Sans Italic'), local('PTSans-Italic'), url(../fonts/PT_Sans/PT_Sans-Web-Italic.ttf) format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 700; src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(../fonts/PT_Sans/PT_Sans-Web-BoldItalic.ttf) format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 700; src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(../fonts/PT_Sans/PT_Sans-Web-BoldItalic.ttf) format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 700; src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(../fonts/PT_Sans/PT_Sans-Web-BoldItalic.ttf) format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 700; src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(../fonts/PT_Sans/PT_Sans-Web-BoldItalic.ttf) format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local('PT Sans'), local('PTSans-Regular'), url(../fonts/PT_Sans/PT_Sans-Web-Regular.ttf) format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local('PT Sans'), local('PTSans-Regular'), url(../fonts/PT_Sans/PT_Sans-Web-Regular.ttf) format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local('PT Sans'), local('PTSans-Regular'), url(../fonts/PT_Sans/PT_Sans-Web-Regular.ttf) format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local('PT Sans'), local('PTSans-Regular'), url(../fonts/PT_Sans/PT_Sans-Web-Regular.ttf) format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; src: local('PT Sans Bold'), local('PTSans-Bold'), url(../fonts/PT_Sans/PT_Sans-Web-Bold.ttf) format('truetype'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; src: local('PT Sans Bold'), local('PTSans-Bold'), url(../fonts/PT_Sans/PT_Sans-Web-Bold.ttf) format('truetype'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; src: local('PT Sans Bold'), local('PTSans-Bold'), url(../fonts/PT_Sans/PT_Sans-Web-Bold.ttf) format('truetype'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; src: local('PT Sans Bold'), local('PTSans-Bold'), url(../fonts/PT_Sans/PT_Sans-Web-Bold.ttf) format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* RESET */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height:1;} article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display:block;} nav ul, nav ol {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;} ins {background-color:#ff9; color:#000; text-decoration:none;} mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;} del {text-decoration: line-through;} abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;} table {border-collapse:collapse; border-spacing:0;} hr {display:block; height:1px; border:0; margin:1em 0; padding:0;} input, select {vertical-align:middle;} /* MAIN STYLES */ html {background: #242424; color: #bcb7bc; font-family: 'PT Sans',sans-serif; height: 100%;background-image:url('/css/images/background-grain.png');} body {margin: 0 auto; max-width: 950px; padding: 10px; } section h1, a, #skills dl dd {-webkit-transition: all 0.15s ; -moz-transition: all 0.15s ; -ms-transition: all 0.15s ; -o-transition: all 0.15s ; transition: all 0.15s ;} /* HEADER */ header.vcard {margin-bottom: 10px; overflow: hidden;} .fn {font-size: 2.7em; font-weight: normal; padding: 5px 0 5px 10px;color:#888; text-shadow:1px 1px 2px black;} .role { background: #333; color: #D8D8D8; font-weight: normal; margin: 4px 0 13px; padding: 5px 5px 5px 10px; /*border-radius: 4px 4px ;*/ /* border-top: 1px solid #ff6600; border-bottom: 1px solid #ff6600;*/ border-top: 1px solid #ff6600; border-bottom: 1px solid #ff6600; overflow: hidden; -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5); box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5); } .contact {list-style: none; margin-bottom: 15px; overflow: hidden;} .contact li {border-right: 1px solid #ccc; display: inline; float: left; font-size: 1em; padding: 2px 0; text-align: center; width: 24%; overflow: hidden} .contact li:last-child {border: none} .contact a {color: #ff6600;} .contact a:hover {background-color: #555; color: #eee; text-decoration: none} /* CONTENT */ a {color: #ff6600} a:hover {background-color: #555; color: #eee; text-decoration: none;} a.home {color: #bcb7bc} section {font-size: 0.9em; margin: 30px 0; overflow: hidden; } section h1 {border-left: 1px solid #ff6600; font-size: 1.25em; margin-bottom: 10px; padding-left: 5px; text-transform: uppercase;} section p {line-height: 1.5em; padding: 0 20px 5px;} #skills dl {margin-left: 15px;} #skills dl dt {clear: left; display: inline; float: left; margin: 10px 5px 10px 0; padding: 2px; text-align: right; width: 150px;} #skills dl dd {color:#675f67; background: #dfdfdf; display: inline; float: left; font-size: 0.8em; margin: 10px 4px; padding: 4px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.35); cursor: default} #skills dl dd:hover {background-color: #ccc; -webkit-box-shadow: inset 0px 2px 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 2px 1px 1px rgba(0, 0, 0, 0.15); } #skills h1 {text-decoration: none} #skills h1:hover {color: #ff6600; cursor: pointer;} #slide section article {margin: 15px 0 37px 95px; padding-left: 5px; position: relative; border-left: 1px solid #FCFCFC} #slide section#theatre article {margin: 15px 0 37px 5px; padding-left: 5px; position: relative; border-left: none} #slide section article:last-child {margin-bottom: 0} /*#slide section article:hover {border-left: 1px dotted #ddd; background: #fefefe}*/ #slide section article h1 {border: none; font-size: 1.2em; font-style: italic; font-weight: bold; padding: 0; text-transform: none;} #slide section article h1 {color: #777; text-decoration: none} #slide section article h1:hover {color: #ff6600; cursor: pointer;} #slide section article h1 span {color: #777; font-size: 0.8em; font-weight: normal;} #slide section article h2 {color: #fff; display: inline; font-size: 0.9em; font-weight: normal; padding: 3px;} #slide section article .start, #slide section article .end {color: #fff; font-size: 0.75em; left: -80px; padding: 4px 0; position: absolute; text-align: center; top: 0px; width: 60px; border: none;} #slide section article .end {top: 19px; border-top: 1px dashed #ddd; } #slide section article p {font-size: 0.9em; line-height: 22px; margin: 8px 0 0; padding-left: 3px;} #slide section article p.small {font-size: 0.8em; line-height: 14px; margin: 8px 0 0; padding-left: 3px;} h3, #slide section article h3 {font-size: 0.8em; line-height: 14px; font-weight: normal; padding: 3px; font-style:italic;} #slide section article p a {color: #ff6600} #slide section article p a:hover {background-color: #555; color: #eee; text-decoration: none} #education h2 {padding-left: 20px;} #education p {padding-top: 5px;} ul {font-size: 0.9em; margin-left: 20px;} ul li {margin: 10px 0; list-style: circle inside none; cursor: default} ul li:hover {list-style: disc inside none;} ul li a {color: #555} ul li a:hover {background-color: #555; color: #eee; text-decoration: none} a:hover, img:hover {border : none; border-bottom:none; text-decoration:none} .container { width: 1200px; /* height: 15em; */ /* border: 5px solid rgb(111,41,97); */ /* border-radius: .5em; */ padding: 10px; justify-content: space-between; align-content: space-between; } .grid { display: grid; grid-template-columns: 50px 1150px; } .item { padding-left: 10px; /* background-color: rgba(111,41,97,.3);*/ /* border: 1px solid rgba(111,41,97,.5);*/ } /* icon */ #slide section article p a img.iconpage{ width:16px; height:16px; vertical-align:middle; text-shadow:none; } #slide section article p a.iconlink:hover{ text-decoration: none; background-color: transparent; color: transparent; text-decoration: none; } /* MEDIA QUERIES */ /*@media screen and (max-width:768px) { .contact li {font-size: 0.7em;} } @media screen and (max-width:750px) { #skills dl dt {display: block; float: none; margin: 0; text-align: left;} } @media screen and (max-width:500px) { .contact li {border-right: medium none; display: block; float: none; font-size: 1em; overflow: hidden; padding: 6px 10px; text-align: left; width: auto;} } @media screen and (max-width:480px) { #slide section article {margin: 40px 0 37px;} #slide section article .start, #slide section article .end {left: 0; top: -25px; border: none; border-right: 1px dashed #ddd;} #slide section article .end {left: 61px; top: -25px; border: none} }*/