/*  ------------------------------------------------------------
    1. CORE BRAND HUES — “NEBULA” SYSTEM (already present)
    ------------------------------------------------------------  */

:root
{
    /*  Primary — Nebula Blue  */
    --p-050: #EDF4FF;      /* very-light UI backgrounds */
    --p-050-rgb: 237, 244, 255;
    --p-300: #8DB4FF;      /* inverted tint for dark bg */
    --p-300-rgb: 141, 180, 255;
    --p-500: #2563EB;      /* logo fills, large surfaces */
    --p-500-rgb: 37, 99, 235;
    --p-600: #1E40AF;      /* body text / icons on light bg (AA 4.9∶1) */
    --p-600-rgb: 30, 64, 175;

    /*  Complement / CTA — Pulse Teal  */
    --c-050: #E3FAFF;      /* tint */
    --c-050-rgb: 227, 250, 255;
    --c-300: #4ECFDC;      /* inverted tint for dark bg */
    --c-300-rgb: 78, 207, 220;
    --c-500: #006A7A;      /* main buttons, links, success state */
    --c-500-rgb: 0, 106, 122;
    --c-600: #005761;      /* hover / active */
    --c-600-rgb: 0, 87, 97;

    /*  Triadic Accent — Quantum Violet  */
    --t-050: #FCEBFF;      /* tint */
    --t-050-rgb: 252, 235, 255;
    --t-500: #BE4BFF;      /* highlights, warnings, illustration warmth */
    --t-500-rgb: 190, 75, 255;
    --t-600: #9A28D9;      /* hover / dark-mode text */
    --t-600-rgb: 154, 40, 217;

    /*  Neutrals  */
    --n-000: #FFFFFF;      /* base light */
    --n-000-rgb: 255, 255, 255;
    --n-050: #F6F7F9;      /* containers, inputs */
    --n-050-rgb: 246, 247, 249;
    --n-100: #E2E4E7;      /* hair-line strokes, dividers on white */
    --n-100-rgb: 226, 228, 231;
    --n-700: #404040;      /* secondary text */
    --n-700-rgb: 64, 64, 64;
    --n-900: #121212;      /* dark-mode cards / body */
    --n-900-rgb: 18, 18, 18;
    --n-950: #0B0B0B;      /* dark-mode bg */
    --n-950-rgb: 11, 11, 11;

    /*  Functional  */
    --danger-500: #FF5757;
    --danger-500-rgb: 255, 87, 87;
    --info-500: #3F8CFF;
    --info-500-rgb: 63, 140, 255;

    /*  Modal  */
    --modal-border-light: var(--n-100);
    --modal-border-dark:  var(--n-900);
    --modal-shadow-light: 0 2px 28px rgba(var(--n-700-rgb), .48);
    --modal-shadow-dark:  0 2px 28px rgba(var(--n-000-rgb), .46);

    /*  Default – will be overridden in a prefers-color-scheme query  */
    --modal-border: var(--modal-border-light);
    --modal-shadow: var(--modal-shadow-light);
}

/*  ------------------------------------------------------------
    2. GENERIC RESET
    ------------------------------------------------------------  */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/*  HTML5 display-role reset for older browsers  */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section
{
    display: block;
}

body
{
    line-height: 1;
    background-color: var(--n-000);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

ol,
ul
{
    list-style: none;
}

small
{
    font-size: 14px;
    font-style: italic;
}

blockquote,
q
{
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after
{
    content: '';
}

/*  ------------------------------------------------------------
    3. TEXT SELECTION
    ------------------------------------------------------------  */

::selection
{
    background: var(--p-600);
    color: var(--n-000);
}

::-moz-selection
{
    background: var(--p-600);
    color: var(--n-000);
}

/*  ------------------------------------------------------------
    4. GLOBAL TYPE / LINKS
    ------------------------------------------------------------  */

a
{
    color: var(--c-500);
    outline: none;
}

a:hover
{
    color: var(--t-500);
}

/*  ------------------------------------------------------------
    5. LAYOUT WRAPPER
    ------------------------------------------------------------  */

#wrap-all
{
    /* width: 980px; */
    width: 1270px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

#content
{
    width: 700px;
    padding-top: 110px;
    margin-left: 500px;
    z-index: 1;
}

/*  ------------------------------------------------------------
    6. TYPOGRAPHY
    ------------------------------------------------------------  */

p
{
    font-family: Verdana, Arial, sans-serif;
    line-height: 1.6em;
    color: var(--n-700);
    font-size: 12pt;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-family: 'Droid Serif', Verdana, Arial, sans-serif;
    line-height: 1.6em;
    color: var(--n-700);
    text-decoration: none;
}

h1 { font-size: 22pt; }
h2 { font-size: 18pt; }
h3 { font-size: 17pt; }
h4 { font-size: 16pt; }
h5 { font-size: 12pt; }
h6 { font-size: 10pt; }

/*  ------------------------------------------------------------
    7. SERVICE LISTS
    ------------------------------------------------------------  */

#servicelist
{
    font-size: 14px;
    font-weight: bold;
    margin-left: 20px;
    color: var(--p-600);
}

#servicelist_desc
{
    font-size: 14px;
    margin-left: 30px;
    display: block;
    font-weight: normal;
    color: var(--n-700);
}

/*  ------------------------------------------------------------
    8. COLUMNS & FEATURES
    ------------------------------------------------------------  */

.one,
.one-half,
.two-third,
.one-third,
.one-fourth
{
    float: left;
}

.one-half,
.two-third,
.one-third,
.one-fourth
{
    margin-right: 25px;
}

.one           { width: 720px; }
.one-half      { width: 340px; }
.two-third     { width: 460px; }
.one-third     { width: 220px; }
.one-fourth    { width: 160px; }

.one-half-last   { width: 350px; float: right; }
.two-third-last  { width: 460px; float: right; }
.one-third-last  { width: 220px; float: right; }
.one-fourth-last { width: 160px; float: right; }

.clear { clear: both; }

/*  ------------------------------------------------------------
    9. DROP-CAP & BLOCKQUOTES
    ------------------------------------------------------------  */

.dropcap
{
    font-family: Verdana, Arial, sans-serif;
    font-size: 36px;
    color: var(--n-700);
    width: 32px;
    height: 30px;
    float: left;
    padding: 5px;
    text-align: center;
    margin: 5px;
}

blockquote
{
    font-style: italic;
    font-size: 20px;
    margin: 60px 20px;
    padding-left: 20px;
    font-family: 'Droid Serif', Verdana, Arial, sans-serif;
    color: var(--n-700);
    text-align: center;
    background-image: url(../images/blockquote.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-color: var(--p-050);
}

/*  ------------------------------------------------------------
    10. LISTS
    ------------------------------------------------------------  */

.styled-list-check li,
.styled-list-dot  li,
.styled-list-star li
{
    font-family: 'Droid Sans', Verdana, Arial, sans-serif;
    line-height: 1.6em;
    font-size: 14px;
    color: var(--n-700);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px;
}

.styled-list-check { padding-bottom: 60px; }
.styled-list-dot  { padding-bottom: 60px; }
.styled-list-star { padding-bottom: 60px; }

.styled-list-check li { background-image: url(../images/check.png); }
.styled-list-dot  li { background-image: url(../images/dot.png);  }
.styled-list-star li { background-image: url(../images/star.png); }

/*  ------------------------------------------------------------
    11. SPACERS & DIVIDERS
    ------------------------------------------------------------  */

.spacer
{
    height: 1px;
    clear: both;
    border-bottom: 1px solid var(--n-100);
    margin: 20px 5px;
}

.blank-spacer
{
    width: 1000px;
    height: 1px;
    clear: both;
    margin: 10px 5px;
    padding: 10px 5px;
}

.star-divider
{
    background-image: url(../images/star_divider.png);
    text-align: center;
    display: block;
    clear: both;
    height: 16px;
    width: 430px;
    margin: 10px auto;
    background-repeat: no-repeat;
}

/*  ------------------------------------------------------------
    12. STATUS MESSAGES
    ------------------------------------------------------------  */

#error,
#sucess
{
    display: block;
    text-align: center;
    margin: 300px auto 0;
    color: var(--danger-500);
}

/*  ------------------------------------------------------------
    13. HEADER & NAV
    ------------------------------------------------------------  */

#header-wrapper
{
    position: fixed;
    /* background-color: var(--n-000); */
    height: 120px;
    top: 0;
    /* border-bottom: 1px solid var(--n-100); */
    z-index: 5000;
}

#header      { width: 1270px; }
#logo        { float: left; width: 200px; }

#header-text
{
    width: 680px;
    margin: 0 0 30px 240px;
    display: block;
    background-color: rgba(var(--n-700-rgb), .1);
    border-radius: 3px;
    box-shadow: 3px 3px 3px rgba(var(--n-700-rgb), .3);
    padding-left: 4px;
}

#header-text h4 { margin-top: 30px; }

#header-text h6
{
    font-size: 7pt;
    color: var(--n-000);
}

#header-text a
{
    font-family: 'Droid Serif', Verdana, Arial, sans-serif;
    color: var(--c-500);
    text-decoration: none;
    font-size: 7pt;
}

#social-box
{
    width: 96px;
    height: 22px;
    position: fixed;
    bottom: 40px;
    left: 30px;
}

#social-box li
{
    float: left;
    padding-left: 6px;
}

#menu-wrapper
{
    height: 100%;
    padding-top: 120px;
    float: left;
    width: 260px;
}

#main-menu
{
    position: fixed;
    padding: 20px 0 0 40px;
    font-family: 'Droid Serif', Verdana, Arial, sans-serif;
}

#main-menu a,
.main a
{
    color: var(--n-700);
    text-decoration: none;
    font-size: 14pt;
}

#main-menu a:hover       { color: var(--n-900); }
#main-menu .selected     { color: var(--n-900); }

#footer h6
{
    font-size: 10px;
    position: fixed;
    bottom: 10px;
    left: 20px;
}

/*  ------------------------------------------------------------
    14. SOCIAL ICON SPRITES
    ------------------------------------------------------------  */

.facebook a,
.twitter a,
.rss a
{
    display: block;
    height: 22px;
    padding-left: 24px;
    background-position: 0 0;
    background-repeat: no-repeat;
    color: var(--n-700);
    text-decoration: none;
}

.facebook a        { background-image: url(../images/facebook.png); }
.twitter  a        { background-image: url(../images/twitter.png);  }
.rss      a        { background-image: url(../images/rss.png);      }

.facebook a:hover,
.twitter  a:hover,
.rss      a:hover
{
    background-position: 0 -26px;
    color: var(--n-900);
}

/*  ------------------------------------------------------------
    15. SLIDE PANEL
    ------------------------------------------------------------  */

#slide-panel
{
    position: fixed;
    top: 120px;
    left: 240px;
    height: 420px;
    width: 720px;
    display: none;
    border: 1px solid var(--n-100);
    background-color: var(--n-000);
    margin-bottom: 5px;
    text-align: center;
    z-index: 6000;
}

.slide
{
    background-image: url(../images/slide_button.png);
    background-repeat: no-repeat;
    position: fixed;
    top: 33px;
    left: 800px;
    z-index: 5000;
}

.btn-slide
{
    text-align: center;
    width: 120px;
    height: 60px;
    display: block;
    color: var(--n-000);
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin: 0 auto;
    line-height: 22px;
}

/*  ------------------------------------------------------------
    16. IMAGE HOVERS  (unchanged except shadow color)
    ------------------------------------------------------------  */

.recent-summary img:hover,
.recent-gallery img:hover,
.about-item     img:hover,
.blog-item      img:hover,
.blog-item-single img:hover
{
    box-shadow: 0 0 5px rgba(var(--n-700-rgb), .6);
}

/*  ------------------------------------------------------------
    17. HOME PAGE SECTIONS  (colors adjusted)
    ------------------------------------------------------------  */

#recent-posts-container,
#recent-projects-container
{
    width: 720px;
    height: 200px;
    margin-top: 60px;
}

.section-description
{
    float: left;
    width: 110px;
    height: 160px;
    padding-right: 20px;
    border-right: 1px solid var(--n-100);
}

.recent-summary        { width: 600px; display: inline; }
.recent-item           { padding-left: 40px; float: left; width: 260px; }
.recent-item-last      { float: right; width: 250px; }
.recent-summary p      { width: 250px; text-align: left; padding: 0 0 50px 0; }
.recent-summary h6     { width: 250px; font-weight: bold; text-align: left; padding: 5px 0 0 0; }
.item                  { width: 125px; height: 125px; border: 4px solid var(--n-900); margin: 5px 0; overflow: hidden; position: relative; float: left; }
.recent-gallery        { text-align: center; margin: 40px auto 0; width: 720px; }
#recent-text h5        { padding-bottom: 0; }

/*  ------------------------------------------------------------
    18. FOLLOW SECTION
    ------------------------------------------------------------  */

#follow h1
{
    text-align: center;
    font-size: 22px;
    padding-top: 100px;
    clear: both;
}

#follow h3    { text-align: center; padding: 16px; }
#follow p     { text-align: center; }

#follow-twitter,
#follow-mail
{
    text-align: center;
    width: 150px;
    height: 80px;
    display: block;
    padding-top: 20px;
}

#follow-twitter { float: left;  padding-left: 170px; }
#follow-mail    { float: right; padding-right: 170px; }

/*  ------------------------------------------------------------
    19. ABOUT US
    ------------------------------------------------------------  */

.about
{
    padding: 25px 0 50px;
    width: 720px;
}

.about p { text-align: justify; }

/*  ------------------------------------------------------------
    20. PORTFOLIO
    ------------------------------------------------------------  */

#filter
{
    display: block;
    height: 20px;
    margin-left: 20px;
    position: relative;
    text-align: center;
    width: 700px;
}

#filter a
{
    font-family: 'Droid Serif', Verdana, Arial, sans-serif;
    font-size: 16px;
    color: var(--n-700);
    display: inline-block;
    text-decoration: none;
    height: 39px;
    line-height: 37px;
    padding: 0 15px;
}

#filter a:hover   { text-decoration: none; }
#filter a.active  { color: var(--n-900); }

#stage           { width: 720px; }
#container       { display: block; overflow: hidden; width: 720px; margin: 0 auto; }
#container li    { float: left; height: 180px; list-style: none; margin: 20px; position: relative; width: 200px; }
#container li p  { margin-left: 0; }
#container li h6 { padding-top: 5px; font-weight: bold; margin-left: 0; }
#container li a:hover { color: var(--n-900); }

/*  ------------------------------------------------------------
    21. PROJECT PAGE
    ------------------------------------------------------------  */

#project-title
{
    display: block;
    font-family: Verdana, Arial, sans-serif;
    line-height: 1.6em;
    color: var(--n-700);
    font-size: 18pt;
    float: right;
    padding-top: 10px;
}

.project         { padding-top: 50px; width: 720px; }
#description     { padding-bottom: 20px; float: left; width: 480px; }
#work
{
    margin-top: 15px;
    border-left: 1px solid var(--n-100);
    float: right;
    padding-left: 40px;
}

#work h5  { font-family: 'Droid Serif', Verdana, Arial, sans-serif; }

#work li
{
    font-family: 'Droid Sans', Verdana, Arial, sans-serif;
    line-height: 1.6em;
    font-size: 9pt;
    color: var(--n-700);
    background-image: url(../images/check.png);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-top: 2px;
}

.project-summary
{
    clear: both;
    width: 720px;
    padding: 60px 10px 0 0;
    text-align: left;
}

/*  ------------------------------------------------------------
    22. BLOG
    ------------------------------------------------------------  */

#blog
{
    width: 720px;
    margin: 10px auto 100px;
}

.blog-item-info
{
    padding: 10px 0 15px 0;
    height: 15px;
    width: 400px;
    float: right;
}

.blog-item
{
    clear: both;
    width: 720px;
    height: 270px;
}

.blog-item-content
{
    width: 400px;
    margin: 0 0 50px 15px;
    float: right;
}

.blog-item img { margin-bottom: 50px; float: left; }

.blog-item-content h5 { font-weight: bold; }

.blog-item-content p
{
    padding: 0 5px 5px 0;
    text-align: justify;
}

#blog .readmore
{
    float: left;
    padding-top: 20px;
    color: var(--c-500);
}

.user,
.comments,
.tags
{
    background-position: 0 1px;
    padding-bottom: 1px;
    margin-right: 15px;
    font-size: 12px;
    height: 15px;
    color: var(--n-100);
    padding-left: 20px;
    background-repeat: no-repeat;
    text-decoration: none;
}

.user     { background-image: url(../images/user.png);     }
.comments { background-image: url(../images/comments.png); }
.tags     { background-image: url(../images/tags.png);      }

.user:hover,
.comments:hover,
.tags:hover
{
    background-position: 0 -17px;
    color: var(--n-900);
}

#pagination
{
    display: inline-block;
    height: 8px;
    text-align: center;
    width: 720px;
    font-size: 10pt;
}

#pagination a            { color: var(--n-700); text-decoration: none; }
#pagination .active       { color: var(--n-900); text-decoration: underline; }

/*  ------------------------------------------------------------
    23. COMMENT FORM
    ------------------------------------------------------------  */

.input-block,
.input-block-long
{
    display: inline-block;
    height: 50px;
}

.input-block       { width: 180px; padding-right: 65px; }
.input-block-long  { width: 140px; }

.short-field { width: 170px; }
.long-field  { width: 200px; }

input,
textarea
{
    background: var(--n-000);
    border: 1px solid var(--n-100);
    padding: 5px;
}

input       { height: 20px; }
input:focus,
textarea:focus,
button:hover
{
    background: var(--n-000);
    border: 1px solid var(--n-700);
    box-shadow: 0 0 2px rgba(var(--n-700-rgb), .8);
}

input:focus,
textarea:focus
{
    color: var(--n-700);
}

/*  ------------------------------------------------------------
    24. BUTTONS
    ------------------------------------------------------------  */

.button
{
    font-family: 'Droid Serif', Verdana, Arial, sans-serif;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    padding: 5px 10px 7px;
    height: 34px;
}

.btncolor,
.btncolor:focus,
.btncolor:hover
{
    background: var(--n-000);
    color: var(--n-700);
    border: 1px solid var(--c-500);
}

/*  ------------------------------------------------------------
    25. SOCIAL LINKS BLOCK
    ------------------------------------------------------------  */

#social { float: right; }

.dribbble a,
.forrst   a,
.google   a,
.twitter_small a,
.facebook_small a
{
    background-position: 0 1px;
    padding-bottom: 1px;
    margin-bottom: 8px;
    font-size: 12px;
    display: block;
    height: 15px;
    color: var(--n-700);
    padding-left: 20px;
    background-repeat: no-repeat;
    text-decoration: none;
}

.dribbble       a { background-image: url(../images/dribbble.png);       }
.forrst         a { background-image: url(../images/forrst.png);         }
.google         a { background-image: url(../images/google.png);         }
.twitter_small  a { background-image: url(../images/twitter_small.png);  }
.facebook_small a { background-image: url(../images/facebook_small.png); }

.dribbble a:hover,
.forrst   a:hover,
.google   a:hover,
.twitter_small a:hover,
.facebook_small a:hover
{
    background-position: 0 -17px;
    color: var(--n-900);
}