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;
	vertical-align: baseline;
}
html {
	overflow-y: scroll;
	font-size: 100%;
}


/*
<style type="text/css">
body { background-image: url(img/bg/TT_design3_all_a1.png); background-repeat: no-repeat; background-position-x: center; background-position-y: 0; background-size: 971px; background-color: gray;   }
</style>
*/


body { line-height: 1; font-size: 100%; text-align: left; }

ol,ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
h1, h2, h3, h4, h5, h6 { clear: both; }
a:focus { outline: none; }
article, details, figcaption, figure, footer, header, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
img { border: 0; }

body { background:#000; color:#fff; width: 100%; }

/* FONTS  = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

@font-face {
    font-family: 'gt_walsheimblack';
    src: url('../wf/gt-walsheim-black-webfont.eot');
    src: url('../wf/gt-walsheim-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../wf/gt-walsheim-black-webfont.woff2') format('woff2'),
         url('../wf/gt-walsheim-black-webfont.woff') format('woff'),
         url('../wf/gt-walsheim-black-webfont.ttf') format('truetype'),
         url('../wf/gt-walsheim-black-webfont.svg#gt_walsheimblack') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'gt_walsheimultra_bold';
    src: url('../wf/gt-walsheim-ultra-bold-webfont.eot');
    src: url('../wf/gt-walsheim-ultra-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../wf/gt-walsheim-ultra-bold-webfont.woff2') format('woff2'),
         url('../wf/gt-walsheim-ultra-bold-webfont.woff') format('woff'),
         url('../wf/gt-walsheim-ultra-bold-webfont.ttf') format('truetype'),
         url('../wf/gt-walsheim-ultra-bold-webfont.svg#gt_walsheimultra_bold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'courier_xroman';
    src: url('../wf/courier-x-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'courier_xbold';
    src: url('../wf/courier-x-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/* PAGE STRUCTURE  = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

#page_frame { width: 100%; max-width: 840px; margin: 0 auto; border: 10px solid #fff;  }

#masthead { text-align: center;  width: 100%; position: relative; border-bottom: 10px solid #fff; padding: 40px 0 20px 0;   }

#home_link { position: absolute; top: 0; right: 0; width: 15%; display: block; padding: 10px;  }
#home_link a { display: block; color: #ff9524;font-family: 'Roboto Condensed';font-size: 1em; text-decoration: none;  }
#home_link a:hover { color: #fff; }
#home_link a span { border-bottom: 2px solid #ff9524; }
#home_link a:hover span { border-bottom: 2px solid #fff; }

h1 {
font-family: 'gt_walsheimblack';
font-size: 3em; 
line-height: 1em; 
letter-spacing: .04em;
margin: 0 0 20px 0;
}

h1.title { font-size: 3.2em; color: #ffc400; margin: 0 0 0 0; }


h2 {
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.5em; 
line-height: 1.4em; 
letter-spacing: .05em;
margin: 0 0 40px 0;
text-transform: uppercase; 
}

h2.title2 { margin: 20px 0; }


h3 { 
font-size: 1em; 
line-height: 1.4em; 
letter-spacing: .04em;
font-family: 'Roboto Condensed', sans-serif;
margin: 0 0 15px 0; 
text-align: left;
text-transform: uppercase; 
}

h4 {
font-family: 'Roboto Condensed', sans-serif;
font-size: 1em; 
line-height: 1.4em; 
letter-spacing: .05em;
margin: 0 0 15px 44%;
text-transform: uppercase; 
text-align: left;
}


p { 
font-size: .9em; 
line-height: 1.4em; 
font-family: Courier, 'Courier New', 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
text-align: left;
margin: 0 20px 20px 20px;
}



#page_box { width: 100%; max-width: 840px; }


#page_left { width: 23%; float: left;}

#page_left ul { }

#page_left ul li { display: block; 
font-family: 'Roboto Condensed';
font-size: 1.2em; 
line-height: 1.3em; 
}

#page_left ul li a { text-decoration: none; color: #ffc400; border-bottom: 1px solid #fff; padding: 20px 15px; display: block; cursor: pointer; }
#page_left ul li a:hover { background-color: #ffc400; color: #000; }

#page_right {  width: 77%; float: right; }

#page_right div.hidden_box {display:none;}

.certif_box { padding: 40px; border-left: 10px solid #fff; text-align: center; }
.notebook_box { padding: 40px; border-left: 10px solid #fff; text-align: center;  }
.oath_box { padding: 40px; border-left: 10px solid #fff;  text-align: center; }
.cipher_box { padding: 40px; border-left: 10px solid #fff;  text-align: center; }







/* DEVICES  = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
/* DEVICES  = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
/* DEVICES  = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */


@media all and (max-width: 768px) {

 
}
/* END IPAD  -0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0 */
/* END IPAD  -0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0 */
/* END IPAD  -0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0 */
/* END IPAD  -0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0 */
/* END IPAD  -0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0 */



/* PHONE  +~+~+~+~+~+~+~+~+~+~+~+~+~+~++~+~+~+~+~+~+~+~+~+~+~+~ */
/* PHONE  +~+~+~+~+~+~+~+~+~+~+~+~+~+~++~+~+~+~+~+~+~+~+~+~+~+~ */
/* PHONE  +~+~+~+~+~+~+~+~+~+~+~+~+~+~++~+~+~+~+~+~+~+~+~+~+~+~ */
/* PHONE  +~+~+~+~+~+~+~+~+~+~+~+~+~+~++~+~+~+~+~+~+~+~+~+~+~+~ */
/* PHONE  +~+~+~+~+~+~+~+~+~+~+~+~+~+~++~+~+~+~+~+~+~+~+~+~+~+~ */
/* PHONE  +~+~+~+~+~+~+~+~+~+~+~+~+~+~++~+~+~+~+~+~+~+~+~+~+~+~ */
/* PHONE  +~+~+~+~+~+~+~+~+~+~+~+~+~+~++~+~+~+~+~+~+~+~+~+~+~+~ */


@media all and (max-width: 504px) {


h1 {font-size: 2.2em; line-height: 1em; letter-spacing: 0.02em; }
h2 {font-size: 1.3em; line-height: 1.4em; letter-spacing: .05em;}


#page_frame { width: 90%; margin: 0 auto; border: 10px solid #fff;  }

#masthead { text-align: center; width: 93%; border-bottom: 0; padding: 20px 0 0 0; margin: 0 auto; }

#home_link { position: relative; width: 100%; display: block; padding: 0; margin-bottom: 30px;  }


#page_left { display:none; }

#page_right {  width: 100%; float: center; }

#page_right div.hidden_box {display:block;}

.certif_box { padding: 30px 3%; border-top: 10px solid #fff; text-align: center; border-left: 0;  }
.notebook_box { padding:30px 3%; border-top: 10px solid #fff; text-align: center; border-left: 0;  }
.oath_box { padding: 30px 3%; border-top: 10px solid #fff;  text-align: center;  border-left: 0;}
.cipher_box { padding: 30px 3%; border-top: 10px solid #fff;  text-align: center;  border-left: 0;}

.certif_box img, .oath_box img { width: 85%; }


}