/******************** Styling Basic Elements ***********************/

/* make every element padding or margin included in the element width and height , not reflected . */
html {
    box-sizing: border-box;                     
}

/* left side links (intro, about me , portfolio, contact ) */
a:hover {
    color: rgb(194, 26, 166);
    border-bottom-color: rgba(180, 14, 14, 0);
}


*, *:before, *:after {
    box-sizing: inherit;
}

/* Body styling  and all elements inside */
body {
    background: rgb(6, 105, 129);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 19pt;
    font-weight: 300;
    line-height: 1.75em;
    color: rgb(9, 130, 211);
}

/* Body intial values styling on reloaded  */
    body.is-preload *, body.is-preload *:before, body.is-preload *:after {
        -moz-animation: none !important;
        -webkit-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
        -moz-transition: none !important;
        -webkit-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }

/* Contact me styliny , the bottom of the page  */
input, textarea, select {
    font-family: 'Calistoga', cursive;
    font-size: 19pt;
    font-weight: 300;
    line-height: 1.75em;
}

/* Headers in all articles  */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Calistoga', cursive;
    font-weight: 300;
    color: rgb(163, 2, 136);
    line-height: 1.5em;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
}

    h1 a strong, h2 a strong, h3 a strong, h4 a strong, h5 a strong, h6 a strong {
        color: #333;
    }

h2 {
    font-size: 2em;
    letter-spacing: -1px;
}

    h2.alt {
        color: #888;
    }

        h2.alt strong {
            color: #666;
        }

h3 {
    font-size: 1.5em;
}

header {
    margin: 0 0 2em 0;
}

    header > p {
        margin: 1em 0 0 0;
    }

    /* Footer amrgin */
footer {
    margin: 2em 0 0 0;
}

strong, b {
    font-weight: 300;
    color: #666;
}

em, i {
    font-style: italic;
}

/* styling for links  */
a {
    text-decoration: none;
    color: inherit;
    border-bottom: dotted 1px rgba(128, 128, 128, 0.5);
    -moz-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
    -webkit-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
    -ms-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
    transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
    outline: 0;
}

hr {
    border: 0;
    border-top: solid 1px #ddd;
}

blockquote {
    border-left: solid 0.5em #ddd;
    padding: 1em 0 1em 2em;
    font-style: italic;
}

p, ul, ol, dl, table {
    margin-bottom: 2em;
}

br.clear {
    clear: both;
}

.container {
    margin: 0 auto;
    max-width: 100%;
    width: 1400px;
}

.row {
    margin-top: -40px;
    margin-left: -40px;
}

section, article {
    margin-bottom: 3em;
}

.image {
    display: inline-block;
    border: 0;
}


/* Ordered and Un-ordered Lists  */
ul {
    list-style: disc;
    padding-left: 1em;
}

ol {
    list-style: decimal;
    padding-left: 1.25em;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
    box-shadow: 0 0 2px 1px #8ebebc;
    background: #fff;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select {
line-height: 1.25em;
}

form textarea {
min-height: 14em;
}


/* Text Inside boxes placeholder */
form ::-webkit-input-placeholder {
color: #555 !important;
}

form :-moz-placeholder {
color: #555 !important;
}

form ::-moz-placeholder {
color: #555 !important;
}

form :-ms-input-placeholder {
color: #555 !important;
}

form ::-moz-focus-inner {
border: 0;
}


/* Table styling which is in Javafile  */
table {
    width: 100%;
    text-align: left;
}

    table tbody tr:nth-child(2n+2) {
        background: #f4f4f4;
    }

    table td {
        padding: 0.5em 1em 0.5em 1em;
    }

    table th {
        text-align: left;
        padding: 0.5em 1em 0.5em 1em;
        color: #fff;
        background: #222729 url("images/overlay.png");
    }

    table thead {
        background: #444;
        color: #fff;
    }

    table tfoot {
        background: #eee;
    }

    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    button:hover,
    .button:hover {
        background-color: #9ececc;
    }

    input[type="button"]:active,
    input[type="submit"]:active,
    input[type="reset"]:active,
    button:active,
    .button:active {
        background-color: #7eaeac;
    }

    .item {
		box-shadow: 0 0.05em 0.15em 0 rgba(0, 0, 0, 0.05);
		margin-bottom: 40px;
	}

    .icon {
		text-decoration: none;
	}

    
	#header {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		background: #222629 url("images/overlay.png");
		box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.1);
		color: #fff;
		height: 100%;
		left: 0;
		overflow-y: auto;
		position: fixed;
		text-align: right;
		top: 0;
		width: 375px;
	}

    #nav ul {
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
    }
    
    #footer {
        margin-left: 375px;
        text-align: center;
        background-color: #dce3e2;
        padding: 3em 0 4em 0;
        box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), inset 0 0.1em 0.1em 0 rgba(0, 0, 0, 0.025);
        font-size: 0.8em;
    }

    #main {
		margin-left: 375px;
    }
    
    #main > section.cover {
        padding: 10em 0;
        background-size: cover;
        background-position: center center;
    }

    #main > section.dark a:hover {
        border-bottom-color: rgba(185, 14, 14, 0);
    }

    #headerToggle {
        display: none;
    }