/*
* {
    border:1px dashed gray;
}*/

body {
    background-image:url('img/tkp1.png');
    background-size:100%;
    background-attachment:fixed;
    color:#FFFFFF;
}

a {
    color:#FF3030;
    text-decoration:none;
}

a:hover {
    color:#FF3030;
    text-decoration:underline;
}

a:visited {
    color:#FF3030;
}

a:active {
    color:#FF3030;
}

.centered {
    display:block;
    margin:auto;
    text-align:center;
}

#maincontent button {
    width:160px;
    height:40px;
    color:#fff;
    border-radius:4px;
    border:0px solid black;
    background-image:url('media/button2.png');
    background-repeat:no-repeat;
    background-size:160px 40px;
    font-weight:bold;
    text-shadow: 2px 2px 2px #101010;
}

#maincontent button:hover {
    background-image:url('media/button3.png');
}

#maincontent button:focus {
    padding-top:1px;
    padding-left:6px;
    background-image:url('media/button4.png');
}

#header {
    position:fixed;
    top:22px;
    z-index:1;
    width:101%;
    height:30px;
    background-color:#000000;
    border:1px solid #606060;
    margin:-22px 0px 0px -10px;
    text-align:center;
    font-family:Verdana, sans-serif;
    /*text-size:150%;*/
}

#mainbody {
    width:700px;
    margin:auto;
    padding:20px 30px 30px 30px;
    background-image:url('media/bodybg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    opacity:1.0;
    border:1px solid white;
    position:relative;
    top:-160px;
}

#maincontent {
    opacity:2.5;
    font-family:Tahoma, sans-serif;
    font-size:90%;
    line-height:140%;
    color:#D0D0D0;
    text-align:justify;
}

#footer {
    width:700px;
    margin:auto;
    position:relative;
    top:-160px;
    padding:5px 30px 5px 30px;
    /*background-color:#000000;*/
    background-image:url('media/bodybg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    opacity:1.0;
    border:1px solid white;
    margin-top:-1px;
    margin-bottom:50px;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    text-align:center;
}


#overlayimage {
    position:fixed;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    background-image:url('media/bodybg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    display:none;
    z-index:10;
}

#overlayimagecontent {
    z-index:11;
    max-width:80%;
    max-height:800px;
    margin:auto;
}

#overlayimagecontent > img {
    display:block;
    position:relative;
    margin:auto;
    max-width:100%;
    max-height:800px;
    top:80px;
    opacity:1.0;
}


.headitem {
    color:#FFFFFF;
    display:inline-block;
    margin:0px 5px 5px 5px;
    width:102px;
    height:27px;
    padding-top:3px;
}

.headitem:hover {
    font-weight:bold;
}

.headitem_active {
    color:#FFFFFF;
    display:inline-block;
    margin:0px 5px 5px 5px;
    width:100px;
    background-color:#000000;
    height:26px;
    padding-top:3px;
    font-weight:bold;
    border:1px solid #606060;
    border-bottom-color: #000;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}

#shellfishtitle {
    position:relative;
    margin:auto;
    left:-370px;
    top:-32px;
    height:30px;
    width:162px;
    background-image:url('media/title.png');
    opacity:0.8;
}

#shellfishtitle:hover {
    opacity:1.0;
}

/*
#mainbody div img { 
    border:1px solid transparent;
}

#mainbody div img:hover {
    border:1px solid #202020;
}*/

h1 {
    color:#FFF;
    margin-top:48px;
    margin-bottom:48px;
}


#footer_content {
    margin-left:auto;
    margin-right:auto;
    height:74px;
}

#footer_social {
    display:inline-block;
    height:32px;
    padding:0px;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left:auto;
    margin-right:0px;
    float:left;
}

.footer_icon {
    display:inline-block;
    width:32px;
    height:32px;
    padding:0px;
    margin:0px 8px 0px 8px;
    opacity:0.7;
}

.footer_icon:hover {
    opacity:1.0;
}


#newsletter_div {
    float:right;
    margin-left:40px;
    margin-right:auto;
    margin-top: 14px;
}


#footer_lastline {
    display:block;
    clear:both;
    color:#404040;
    font-style:italic;
    font-size:80%;
    padding-top:0px;
}

#footer_lastline span {
    margin-left: 12px;
    margin-right: 12px;
}

#footer_content a {
    color:inherit;
}


#popupback {
    display:block;
    position:fixed;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    background-image:url('media/bodybg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    z-index:4;
}

#popupwindow {
    display:block;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top:100px;
    opacity:1.0;
    text-align:center;
    padding:20px;
    width:400px;
    height:300px;
    border:2px solid white;
    background-image:url('media/newsletterbg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    border-radius:12px;
    font-family:Verdana, Tahoma, sans-serif;
}

#popupwindow a {
    color:#A0A0A0;
}

#shellfishimage {
    display:block;
    width:60px;
    height:159px;
    position:relative;
    top:250px;
    margin:auto;
    width:882px;
    background-image:url('media/shellfish1.png');
    background-repeat:no-repeat;
    background-position:right;
}

#shellfishimage2 {
    display:none;
    width:60px;
    height:159px;
    position:relative;
    top:250px;
    margin:auto;
    width:882px;
    background-image:url('media/shellfish2.png');
    background-repeat:no-repeat;
    background-position:right;
}

.clickableimage {
    display:block;
    cursor:pointer;
    max-width:80%;
    margin:auto;
}

.clickableimage[type="3"] {
    display:inline-block;
    cursor:pointer;
    width:25%;
    margin:3%;
}

.clickableimagesmall {
    display:block;
    cursor:pointer;
    max-width:80%;
    margin:auto;
}

.clickableimagesmall[type="3"] {
    display:inline-block;
    cursor:pointer;
    width:25%;
    margin:3%;
}

.clickablethumbnail {
    cursor:pointer;
}


.game_container {    width:99%;  margin-top:40px;}
.game_container h1 { font-size:150%; display:inline-block; }
.game_container h2 { margin-left:20px; font-size:90%; font-style:italic; color:#909090; display:inline-block;}
.game_container_content { width:100%; margin-top:-32px;}
.game_year { color:#B0B0B0; }
.game_container p { width: 60%; display:inline-block; vertical-align:top; margin-top:18px;}
.game_container img { width:32%; display:inline-block; margin-left:32px; margin-bottom:0px; }
.game_container h1:hover { text-decoration:underline; }


.infobox {
    width:80%;
    border-radius:10px;
    background-color:#181818;
    border:1px solid #404040;
    color:#D0D0D0;
    padding:12px;
    margin:40px auto 40px auto;
}

.successbox {
    width:80%;
    border-radius:10px;
    background-color:#184818;
    border:1px solid #404040;
    color:#D0D0D0;
    padding:12px;
    margin:40px auto 40px auto;
}

.errorbox {
    width:80%;
    border-radius:10px;
    background-color:#481818;
    border:1px solid #404040;
    color:#D0D0D0;
    padding:12px;
    margin:40px auto 40px auto;
}

.vspace   { height:16px; }
.vspace2 { height:24px; }
.vspace3 { height:32px; }
.vspace4 { height:40px; }
.vspace5 { height:48px; }
.vspace6  { height:56px; }
.vspace7  { height:64px; }
.vspace8  { height:72px; }
.vspace9 { height:80px; }
.vspace10  { height:88px; }



.blogpost {
        margin-top:64px;
}

.blogpost span:nth-child(1) { font-size:160%; color:#FFFFFF; margin:12px auto 12px auto; display:block; margin-bottom:25px; font-weight:bold; }
.blogpost span:nth-child(2) { font-size:80%; color:#808080; margin: -10px 25px 10px 25px; display:block; }
.blogpost img { width:80%; }


/*
            <div id="newspreview">
                <div id="newspreview1" class="newspreviewdiv">
                    <p>Twofold on Steam</p>
                </div>
                <div id="newspreview2" class="newspreviewdiv">
                    <p>New Website online!</p>
                </div>
                <div id="newspreview3" class="newspreviewdiv">
                    <p>Soil Commander Announced</p>
                </div>        
                <div id="newspreviewdots">
                    <div id="newspreviewdot1" class="newspreviewdot"></div>
                    <div id="newspreviewdot2" class="newspreviewdot"></div>
                    <div id="newspreviewdot3" class="newspreviewdot"></div>
                </div>
            </div>
            */
            
#newspreview {
    width:85%;
    height:370px;
    border:1px solid white;
    border-radius:12px;
    margin:auto;
    margin-bottom:40px;
}

#newspreview p {
    margin:30px;
    margin-top:18px;
    font-size:240%;
    line-height:120%;
    color:#FFFFFF;
    text-shadow: 0px 0px 5px #000000;
}

#newspreview span {
    display:block;
    margin:8px 30px;
    font-size:50%;
    line-height:100%;
    color:#dddddd;
    opacity:0.8;
    text-shadow: 0px 0px 2px #000000;
}

#newspreview a {
    color:#FFFFFF;
}

.newspreviewdiv {
    border-radius:12px;
    width:100%;
    height:100%;
    background-size:100%;
    background-repeat:no-repeat;
}

#newspreview1 {
    display:inline-block;
    background-image:url('img/art/jpg/img104.jpg');
}

#newspreview2 {
    display:none;
    background-image:url('img/frostbite4.jpg');
}

#newspreview3 {
    display:none;
    background-image:url('img/paintex003.png');
}


#newspreviewdots {
    z-index:8;
    width:130px;
    height:20px;
    margin:auto;
    position:relative;
    top:-6%;
    background-image:url('media/bodybg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border:1px solid black;
    padding-left:14px;
}

.newspreviewdot {
    display:inline-block;
    border:1px solid white;
    border-radius:100%;
    width:10px;
    height:10px;
    margin:0px 12px 0px 12px;
    background-color:#000000;
}

.newspreviewdot_active {
    display:inline-block;
    border:1px solid white;
    border-radius:100%;
    width:10px;
    height:10px;
    margin:0px 12px 0px 12px;
    background-color:#444;
}

#qualifications {
    display:none;
    border-radius:8px;
    border:1px solid #404040;
    text-align:justify;
    padding:20px;
    margin:20px;
}

#qualifications li {
    width:550px;
    padding:1px 8px;
}

#qualifications li:hover {
    background-color:#202020;
}

#qualifications span {
    display:inline-block;
    position:absolute;
    left:580px;
    width:100px;
    text-align:center;
    font-size:20px;
}

#qualifications h2 {
    margin-top:32px;
}


#maincontent h2 {
    text-align:left;
}

#portfoliocontents a {
    font-weight:bold;
    color:#ffffff;
}

#portfoliocontents ul {
    list-style: none;
    list-style-type: none;
}

#portfoliocontents ul a {
    font-weight:normal;
    color:#eeeeee;
}

#portfoliocontents ol > li {
    list-style: none;
    list-style-type: none;
    margin-top:16px;
}

.blogtable td, .blogtable th {
    padding:4px 12px;
    text-align:center;
    border:1px solid gray;
}

.blogtable th {
    font-weight:bold;
}

.blogtable {
    border:1px solid white;
    border-spacing: 0px;
    border-collapse: collapse;
}

a[name] {
    padding-top: 4px;
    margin-top: -4px;
}

.gradesubtitle {
    margin-left:16px;
    color:#888;
}

.indent {
    padding-left:32px;
}

.indent h2 {
    margin-top:64px;
}

.quote {
    margin-left:48px;
    margin-right:48px;
    font-style:italic;
    color:#aaa;
    text-align: left;
}

hr {
    border:none;
    height:1px;
    color:#666;
    background-color:#666;
    margin-top:48px;
    margin-bottom:24px;
    width:75%;
}

hr[section] {
    height:2px;
    color:#fff;
    background-color:#ccc;
    margin-top:64px;
    margin-bottom:64px;
    width:100%;
}





#gallerybigdiv {
    height:600px;
    width:90%;
    border:1 px solid white;
    margin:auto;
}

#gallerybigimage {
    width:99%;
    margin:auto;
    cursor:pointer;
}

.gallerythumbnail {    
    display:inline-block;
    cursor:pointer;
    width:25%;
    margin:3%;
}







.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid #dcdcdc;
	display:block;
	color:#777777;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:65px;
	line-height:65px;
	width:131px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}
.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
    
}.button:active {
	position:relative;
	top:1px;
}
/* This button was generated using CSSButtonGenerator.com */