@font-face {
font-family: headerFont1;
src: url('./fonts/bebas.ttf');
}

@font-face {
font-family: headerFont2;
src: url('./fonts/snickles-webfont.eot');
    src: url('./fonts/snickles-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/snickles-webfont.woff') format('woff'),
         url('./fonts/snickles-webfont.ttf') format('truetype'),
         url('./fonts/snickles-webfont.svg#snicklesregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
font-family: headerFont3;
src: url('./fonts/CaviarDreams.ttf');
}

@font-face {
font-family: headerFont3Bold;
src: url('./fonts/Caviar_Dreams_Bold.ttf');
}

@font-face {
font-family: Arial Narrow;
src: url('./fonts/arial_narrow-webfont.eot');
    src: url('./fonts/arial_narrow-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/arial_narrow-webfont.woff') format('woff'),
         url('./fonts/arial_narrow-webfont.ttf') format('truetype'),
         url('./fonts/arial_narrow-webfont.svg#arial_narrowregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

table {
margin: auto;
}

table#alignLeft {
text-align: left;
}

body {
font-family: Trebuchet,Verdana,serif;
text-align: center;
padding: 0px;
margin: 0px;
width: 100%;
-webkit-text-size-adjust: none;
resize: none;
overflow-x: hidden;
}

div#bgHalf1 { 
position: fixed;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
width: 50%;
height: 120%;
background-color: #8C0000;
}

div#bgHalf2 { 
position: fixed;
padding: 0px;
margin: 0px;
top: 0px;
left: 50%;
width: 50%;
height: 120%;
background-color: #E3BE25;
}

div#navigationBar { 
position: fixed;
padding: 0px;
margin: 0px;
bottom: 0px;
height: 150px;
width: 100%;
overflow: visible;
}

div#socialBar { 
position: fixed;
padding: 0px;
margin: 0px;
top: 7%;
left: 0px;
height: 320px;
width: 160px;
overflow: visible;
}

div#mainImageBox { 
position: absolute;
padding: 0px;
margin: 0px;
top: 60px;
left: 50%;
min-height: 120px;
width: 650px;
margin: 0px 0px 0px -325px;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

div.mainContent { 
position: relative;
font-size: initial;
padding: 0px;
margin: 0px 0px 0px 0px;
}

div#mContent { 
display: inline-block;
}

div#mContent2 { 
display: inline-block;
width: 100%;
}

div.mainContentBox { 
position: absolute;
padding: 0px;
top: 160px;
left: 50%;
min-height: 300px;
width: 650px;
margin: 0px 0px 0px -325px;
background-image: url('./images/whiteblock.png');
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-text-size-adjust: none;
resize: none;
}

div#mcOffset1 { /* Home page */
top: 235px;
}

div#mcOffset2 { /* 2 iphone 5 screenshots */
top: 222px;
}

div#mcOffset3 { /* 4 iphone 4 portrait screenshots */
top: 280px;
}

div#mcOffset4 { /* other projects view, custom */
top: 190px;
}

div#mcOffset5 { /* archipelago page */
top: 182px;
}

div#mcOffset6 { /* rocky road 2 page */
top: 420px;
}

div#mainContentBreak { 
position: absolute;
padding: 0px;
margin: 0px;
height: 100px;
width: 100px;
bottom: -150px;
left: 0px;
display: inline-block;
}

div.navBlock {
position: absolute;
padding: 0px;
margin: 0px;
height: 100px;
width: 12.51%; /* for 8 blocks in one page */
bottom: 0px;
left: 0px;
display: inline-block;
background-color: blue;
overflow: hidden;
cursor: pointer;

-webkit-transition-property: height;
-webkit-transition-duration: 130ms;
-webkit-transition-timing-function: ease;
transition-property: height;
transition-duration: 130ms;
transition-timing-function: ease;

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

div.navBlock:hover {
height: 130px;
}

div#nb1 {
background-color: #520009;
}

div#nb2 {
left: 12.5%;
background-color: #112c91;
}

div#nb3 {
left: 25%;
background-color: #5E9CAA;
}

div#nb4 {
left: 37.5%;
background-color: #3D6522;
}

div#nb5 {
left: 50%;
background-color: #0C1999;
}

div#nb6 {
left: 62.5%;
background-color: #632096;
}

div#nb7 {
left: 75%;
background-color: #2E9824;
}

div#nb8 {
left: 87.5%;
background-color: #D78B22;
}

div.nbImage {
position: relative;
padding: 0px;
margin: 0px;
height: 40px;
width: 40px;
display: inline-block;
border-radius: 8px;
overflow: hidden;
}

div.nbImageLink {
position: relative;
padding: 0px;
margin: 0px;
height: 40px;
width: 40px;
display: inline-block;
border-radius: 8px;
overflow: hidden;
cursor: pointer;

-webkit-transition-duration: 100ms;
transition-duration: 100ms;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;

transform: scale(1.0,1.0);
-ms-transform: scale(1.0,1.0);
-webkit-transform: scale(1.0,1.0);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

div.nbImageLink:hover {
transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
}

div.scBlock {
position: absolute;
padding: 0px;
margin: 0px;
height: 25%; /* for 4 blocks in one page */
width: 80px;
top: 0px;
left: 0px;
display: inline-block;
background-color: blue;
overflow: hidden;
cursor: pointer;
text-align: right;

-webkit-transition-property: width;
-webkit-transition-duration: 130ms;
-webkit-transition-timing-function: ease;
transition-property: width;
transition-duration: 130ms;
transition-timing-function: ease;

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

div.scBlock:hover {
width: 90px;
}

div#sb1 {
background-color: #3B579D;
}

div#sb2 {
top: 25%;
background-color: #2CBDE2;
}

div#sb3 {
top: 50%;
background-color: #E40001;
}

div#sb4 {
top: 75%;
background-color: #FE4800;
}

div.imgLink {
position: relative;
padding: 0px;
margin: 0px;
height: 32px;
width: 32px;
display: inline-block;
float: left;
overflow: hidden;
cursor: pointer;

-webkit-transition-duration: 130ms;
transition-duration: 130ms;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;

transform: scale(1.0,1.0);
-ms-transform: scale(1.0,1.0);
-webkit-transform: scale(1.0,1.0);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

div.imgLink:hover {
transform: scale(1.14,1.14);
-ms-transform: scale(1.14,1.14);
-webkit-transform: scale(1.14,1.14);
}

div.imgLink2 { /* GALLERY IMAGES */
position: absolute;
padding: 0px;
margin: 0px;
height: 56px;
width: 56px;
display: inline-block;
float: left;
overflow: hidden;
cursor: pointer;

border: 0px solid black;
border-radius: 10px;

-webkit-transition-duration: 130ms;
transition-duration: 130ms;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;

transform: scale(1.0,1.0);
-ms-transform: scale(1.0,1.0);
-webkit-transform: scale(1.0,1.0);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

div.imgLink2:hover {
transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
}

div.imgLink3 { /* ALL APP LIST ICONS */
position: absolute;
padding: 0px;
height: 120px;
width: 120px;
display: inline-block;
float: left;
overflow: hidden;
cursor: pointer;
margin: 10px 0px 0px 11px;

border: 0px solid black;
border-radius: 26px;

-webkit-transition-duration: 100ms;
transition-duration: 100ms;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;

transform: scale(1.0,1.0);
-ms-transform: scale(1.0,1.0);
-webkit-transform: scale(1.0,1.0);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

div.imgLink3:hover {
transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
}