body {
margin: 0;
padding: 0;
background: #202020 url(./images/back.jpg) repeat;
cursor: default;
}
img.preload {
visibility: hidden;
display: none;
}
::selection {
background: rgba(239,193,0,0.5);
color: #000;
text-shadow: 1px 1px 0 #bc9800;
}
input[type=text],input[type=email],input[type=password],textarea,select {
min-width: 175px;
padding: 11px;
background: #222 url(./images/textbox_back.jpg) repeat-x top;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 15px;
color: #aeaeae;
border: 1px solid #000;
border-radius: 3px;
-webkit-transition: all 0.18s ease-in;
-moz-transition: all 0.18s ease-in;
-o-transition: all 0.18s ease-in;
}
input[type=text]:hover,input[type=email]:hover,input[type=password]:hover,textarea:hover,select:hover,option:hover {
color: #fff;
border: 1px solid #ffce00;
box-shadow: 0 0 3px 1px #000;
}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,textarea:focus,select:focus,option:focus {
color: #fff;
outline: none;
border: 1px solid #ffce00;
box-shadow: 0 0 3px 1px #b39100;
}
input[type=text].error,textarea.error,select.error {
border: 1px solid #ff5858;
}
form textarea {
width: 95%;
}
select {
height: 41px;
background: #222 url(./images/textbox_back.jpg) repeat-x top;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 14px;
color: #aeaeae;
border: 1px solid #000;
cursor: pointer;
}
option {
color: fff;
}
input[type=submit],input[type=reset] {
padding: 13px 19px 13px 19px;
background: #000;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #fff;
border: none;
cursor: pointer;
-webkit-transition: 0.3s ease all;
border-radius: 7px;
}
input[type=submit]:hover,input[type=submit]:focus,input[type=reset]:hover,input[type=reset]:focus {
background: #efc100;
color: #000;
letter-spacing: 1px;
}
input[type=submit]:active {
opacity: 0.6;
}
input[type=reset] {
color: #555;
}
/*form handling*/
div.col_33,div.col_67,div.col_50 {
margin: 0;
padding: 0;
float: left;
}
div.col_33 {
width: 33%;
}
div.col_67 {
width: 67%;
}
div.col_33 div.pad {
padding: 5px;
}
label,p label {
margin: 0 0 5px 0;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #aeaeae;
text-shadow: 0 0 3px #000;
display: inline-block;
-webkit-transition: 0.1s all ease;
}
label:hover,label:focus,p label:hover,p label:focus {
color: #fff;
}
h1,h2 {
padding: 3px 0 3px 2px;
margin: 0 0 7px 0;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 19px;
font-weight: normal;
color: #efc100;
text-transform: lowercase;
text-shadow: 1px 1px 1px #000;
border-bottom: 3px solid #2e2e2e;
display: inline-block;
vertical-align: bottom;
}
h1 img.icon,h2 img.icon {
margin: 0 0 -3px 2px;
}
#border {
height: 1px;
border-top: 1px solid #d8ae00;
background: #efc100;
border-bottom: 1px solid #000;
}
#background {
padding: 20px 0 0 0;
margin: 0;
width: 100%;
box-sizing: border-box;
/*background: url(./images/back_top.png) repeat-x top;*/
background-image: linear-gradient(180deg, rgba(0,0,0,0.2), 33%, rgba(0,0,0,0)),linear-gradient(135deg, rgba(50, 50, 50, 0.35), transparent), linear-gradient(45deg, rgba(0,0,0,0.5), transparent);
background-size: 200% 200%;
min-height: 100vh;
}
#back_top {
width: 100%;
height: 125px;
margin: 0;
background: url(./images/back_top.png) repeat-x top;
clear: none;
}
#container {
padding: 0;
margin: 0 auto 0 auto;
width: 1000px;
}
#container p {
margin: 0;
}
#container p.text {
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 17px;
color: #cecece;
line-height: 23px;
text-shadow: 1px 1px 1px #000;
}
#container p.text a {
color: #cecece;
text-decoration: none;
border-bottom: 1px dotted rgba(255,255,255,0.15);
-webkit-transition: all 0.13s ease-in;
-moz-transition: all 0.13s ease-in;
-o-transition: all 0.13s ease-in;
}
#container p.text a:hover {
color: #cecece;
border-bottom: 1px solid #efc100;
}
#head {
margin: 0 0 30px 0;
padding: 5px 11px 7px 11px;
/*width: 986px;*/
box-sizing: border-box;
background: url(./images/nav_back.jpg) repeat-x center;
background-size: contain;
border-top: 1px solid #333;
border-bottom: 1px solid #0a0a0a;
border-radius: 5px;
box-shadow: 0 0 3px #000;
}
div.logo {
width: 110px;
height: 37px;
background: url(./images/logo.png) no-repeat center;
border: none;
display: inline-block;
-webkit-transition: 0.3s ease all;
opacity: 0.85;
}
div.logo:hover,div.logo:focus {
opacity: 1;
transform: scale(1.05);
}
div.logo:active {
opacity: 0.7;
transform: scale(0.95);
}
#nav {
padding: 0;
margin: -4px 0 0 0;
float: right;
}
#nav ul {
margin: 0;
padding: 0;
display: inline;
}
#nav ul li {
margin: 0;
padding: 0;
float: left;
display: inline;
list-style: none;
}
#nav a {
width: 65px;
float: left;
margin: 8px 0 0 5px;
padding: 6px 9px 6px 9px;
font-family: Tahoma;
font-size: 14px;
text-shadow: 0 0 3px #000;
text-align: center;
color: #9e9e9e;
text-decoration: none;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
#nav a:hover,#nav a:focus {
color: #fff;
letter-spacing: 1px;
}
#nav a:active {
opacity: 0.8;
transform: scale(0.95);
}
#nav a.active,#nav a.active_home {
margin-top: 9px;
padding: 4px 9px 6px 9px;
background: #0a0a0a url(./images/nav_hover_back.jpg) repeat-x;
color: #efc100;
font-weight: bold;
letter-spacing: 1px;
text-shadow: 0 0 3px #000;
border-top: 1px solid #000;
border-bottom: 1px solid #333;
border-radius: 3px;
cursor: default;
}
#nav a.home,#nav a.active_home {
margin-right: 16px;
}
#nav a.active:hover,#nav a.active_home:hover,#nav a.active:hover,#nav a.active_home:hover {
opacity: 0.7;
}
div.intro {
line-height: 35px;
margin: 0 0 7px 0;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 27px;
color: #fff;
text-shadow: 1px 1px 1px #000;
}
div.intro a {
color: #fff;
}
div.intro a:hover {
text-decoration: none;
}
div.intro span.highlight {
background: #0d0d0d;
color: #ecc100;
}
div.intro span.sub {
margin: 2px 0 0 0;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 19px;
line-height: 25px;
color: #aeaeae;
display: inline-block;
}
div.intro span.sub a {
color: #aeaeae;
text-decoration: none;
border-bottom: 1px dotted #666;
-webkit-transition: all 0.13s ease-in;
-moz-transition: all 0.13s ease-in;
-o-transition: all 0.13s ease-in;
}
div.intro span.sub a:hover {
color: #fff;
border-bottom: 1px solid #efc100;
}
div.separator {
margin: 0 0 10px 0;
height: 0;
width: 100%;
border-top: 1px solid #353535;
border-bottom: 1px solid #000;
}
div.col_row {
clear: both;
overflow: auto;
display: block;
margin: 0 0 15px 0;
}
div.col,div.col_mid {
padding: 0;
margin: 0;
float: left;
width: 33%;
text-align: left;
}
div.col_mid {
border-left: 1px solid #353535;
border-right: 1px solid #353535;
}
div.col div.pad,div.col_mid div.pad {
padding: 9px;
}
div.error {
padding: 9px;
background: #b73232;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 16px;
color: #2b0c0c;
border-top: 1px solid #ff5858;
border-bottom: 1px solid #ff5858;
box-shadow: 0 0 5px #000;
border-radius: 5px;
display: inline-block;
margin-bottom: 21px;
font-weight: bold;
}
div.success {
padding: 50px 9px 15px 9px;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
line-height: 100px;
text-shadow: rgba(0,0,0,0.5) 0 0 3px;
color: #fff;
margin: 50px 0 0 0;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 9px;
}
div.success span.head {
margin: 0 0 15px 0;
font-size: 30px;
font-weight: bold;
line-height: 35px;
color: #efc100;
display: block;
}
div.success a {
color: #fff;
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted rgba(255,255,255,0.1);
-webkit-transition: 0.3s ease all;
}
div.success a:hover,div.success a:focus {
letter-spacing: 2px;
border-bottom: 1px solid #efc100;
}
table.form tr td.error {
background: #a22727 url(./images/form_error_back.png) repeat-x top;
color: #000;
text-shadow: none;
border: 1px solid #390f0f;
}
table.form tr td.error div.form_error {
color: #2b0c0c;
font-weight: bold;
}
img.proj_preview {
width: 70%;
margin: 0 auto 15px auto;
border: 1px solid #000;
box-shadow: 0 0 9px 1px #000;
}
div.preview,div.preview_hide {
padding: 5px;
margin: 0 0 15px 0;
width: 100%;
box-sizing: border-box;
height: 160px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border: 1px solid #000;
box-shadow: 0 0 5px 1px rgba(0,0,0,0.75);
border-radius: 7px;
position: relative;
-webkit-transition: 0.3s ease all;
}
div.preview:hover,div.preview:focus {
box-shadow: 0 0 9px rgba(0,0,0,0.9);
}
div.preview div.info,div.preview_hide div.info {
padding: 13px;
max-width: 400px;
height: 100%;
box-sizing: border-box;
background: rgba(0,0,0,0.35);
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 15px;
line-height: 19px;
color: #d7d7d7;
text-shadow: 1px 1px #000;
border-right: 1px solid rgba(0,0,0,0.1);
-webkit-transition: 0.3s ease all;
border-radius: 7px;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
}
span.info {
margin-right: 9px;
height: 10px;
width: 10px;
font-size: 10px;
/*border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;*/
}
span.icon {
margin-right: 9px;
height: 10px;
width: 10px;
font-size: 10px;
}
div.preview div.info::-webkit-scrollbar {
padding: 3px;
width: 11px;
max-height: 9px;
}
div.preview div.info::-webkit-scrollbar-track {
padding: 3px;
background: none;
}
div.preview div.info::-webkit-scrollbar-thumb {
background: rgba(100,100,100,0.3);
height: 3px;
width: 3px;
cursor: pointer;
border-radius: 7px;
}
div.preview div.info::-webkit-scrollbar-thumb:hover {
background: rgba(100,100,100,0.75);
}
div.preview div.info::-webkit-scrollbar-thumb:active {
background: rgba(100,100,100,0.65);
}
div.preview div.info::-webkit-scrollbar-corner {
background: #000;
}
div.preview div.info::-webkit-resizer {
padding: 0;
background: none;
border: none;
border-right: 2px solid #050505;
border-bottom: 2px solid #050505;
}

div.preview div.info a,div.preview_hide div.info a {
color: #fff;
font-weight: bold;
font-size: 18px;
line-height: 23px;
text-decoration: none;
-webkit-transition: 0.3s ease all;
}
div.preview div.info:hover a {
color: #ecc100;
letter-spacing: 1px;
}
div.preview div.info:hover,div.preview div.info:focus {
color: #fff;
padding: 13px 18px 13px 18px;
max-width: 410px;
}
div.preview a.info,div.preview_hide a.info {
margin: 73px 10px 0 0;
float: right;
padding: 11px;
background: rgba(0,0,0,0.25);
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #fff;
text-decoration: none;
text-shadow: rgba(0,0,0,0.75) 1px 1px 1px;
-webkit-transition: 0.3s ease all;
border-bottom: 1px solid rgba(0,0,0,0.2);
border-radius: 7px;
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
position: absolute;
bottom: 9px;
right: 0;
}
div.preview a.info:hover,div.preview a.info:focus {
background: rgba(0,0,0,0.3);
color: #fff;
letter-spacing: 1px;
}
div.preview a.info:active {
opacity: 0.8;
}
table.form tr td {
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 13px;
color: #797979;
text-shadow: 1px 1px 1px #000;
}
a.button {
padding: 5px 9px 5px 9px;
background: #000;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 13px;
color: #ddd;
text-decoration: none;
}
a.button:hover {
background: #efc100;
color: #000;
}
div.spacer_v {
height: 20px;
clear: both;
}
div.spacer_v_small {
height: 1px;
clear: both;
}
div.project_img {
}
div.project_desc {
float: left;
width: 275px;
}
div.project_desc ul li {
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
color: #fff;
}
div.about_blocks span {
margin: 9px;
padding: 13px;
display: inline-block;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
color: #000;
font-size: 19px;
text-shadow: 0 1px 1px #ffefb0;
background: #e7ba06;
border: 1px solid #ffe169;
box-shadow: 0 0 5px #000;
cursor: default;
border-radius: 5px;
-webkit-transition: 0.2s ease all;
}
div.about_blocks span:hover {
background: #e7ba06;
box-shadow: 0 0 9px 1px #e7ba06;
letter-spacing: 1px;
}
#footer {
margin: 40px 0 0 0;
padding: 0;
width: 1000px;
background: #0a0a0a;
background-image: linear-gradient(0deg, #000, 30%, #0a0a0a);
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size: 15px;
line-height: 21px;
color: #555;
border-top: 1px solid #313131;
border-left: 1px solid #2a2a2a;
border-right: 1px solid #2a2a2a;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
box-shadow: 0 0 3px #000;
clear: both;
}
#footer span.copy {
margin-top: 9px;
display: block;
font-size: 13px;
}
#footer a {
color: #555;
}
#footer a:hover {
text-decoration: none;
}
#footer div.links {
float: right;
color: #222;
}
#footer div.links a {
color: #222;
text-decoration: none;
}
#footer div.links a:hover {
color: #444;
}
#footer #pad {
padding: 15px 9px 15px 9px;
}
@media screen and (max-width: 1080px) {
	/*smaller screens*/
#background {
width: 100%;
box-sizing: border-box;
padding: 7px 7px 0 7px;
}
#container {
width: 100%;
box-sizing: border-box;
}
#container div.pad {
padding: 11px;
}
#head {
width: auto;
padding: 5px 7px 7px 0;
border-radius: 7px;
}
div.logo {
margin: 0 0 -9px 0;
margin-left: 7px;
width: 100px;
background: url(./images/logo_large_xeladev_trans.png) no-repeat;
background-size: contain;
border: none;
display: inline-block;
-webkit-transition: 0.3s ease all;
}
#nav ul li {
margin: -4px 0 0 0;
}
#nav a {
/*margin: 8px 0 0 0;*/
padding: 8px 9px 8px 9px;
width: auto;
}
#nav a.active,#nav a.active_home {
width: auto;
margin: 8px 0 0 0;
padding: 8px 9px 8px 9px;
color: #efc100;
font-weight: bold;
text-shadow: 0 0 3px #000;
cursor: default;
border: none;
background: none;
}
#nav a.home,#nav a.active_home {
margin-right: 0;
}
#back_top {
width: 100%;
box-sizing: border-box;
}
div.intro {
width: 90vw;
padding: 11px;
}
div.preview {
width: 100%;
box-sizing: border-box;
max-width: 100%;
margin: 0 0 15px 0;
padding: 5px;
border-left: none;
border-right: none;
}
div.preview div.info {
width: 50%;
max-width: 400px;
/*max-height: 94px;*/
overflow: auto;
}
div.col {
width: 90vw;
}
div.col_33 {
padding: 11px 0 11px 0;
width: 90vw;
}
div.col_33 p {
padding: 11px;
}
div.spacer_v_small {
height: 0;
clear: none;
}
input[type=text],input[type=email],textarea,select {
padding: 19px 9px 19px 9px;
margin: 0 auto 0 auto;
width: 95%;
box-sizing: border-box;
display: block;
}
select {
height: auto;
}
input[type=submit] {
margin: 0 auto 0 auto;
width: 95%;
box-sizing: border-box;
display: block;
}
#footer {
width: 100%;
box-sizing: border-box;
padding: 15px 0 15px 0;
border-left: none;
border-right: none;
}

}
@media screen and (max-width: 720px) {
	/*even smaller screens*/
#background {
padding: 7px 7px 0 7px;
}
#head {
border-radius: 7px;
}
div.preview {
height: 200px;
width: 100%;
padding: 5px;
box-sizing: border-box;
max-width: 1000px;
margin: 0 0 15px 0;
border-left: none;
border-right: none;
background-position: center center;
}
div.preview div.info {
width: 60%;
max-width: 350px;
overflow: auto;
}
}