@import url('reset.css');

/* GENERAL
--------------------------------------------------*/

html, body {height:100%}
body {background:#000 url(./backgrounds/bg.png) repeat-x fixed 50% -15px; font:12px "Helvetica Neue",Helvetica,Arial,sans-serif; text-align:center; cursor:default; color:#5c5f5f;}
#page {height:100%; display:table; width:450px; margin:0 auto;position:relative;z-index:2}
.wrap1 {min-height:100%; display:table-cell; vertical-align:middle;}
.wrap2 {position:relative; overflow:hidden; width:500px; background:#c9c9c9;}
table {border-collapse:collapse; margin:0; padding:0; width:0; height:100%; font-size:1em;}
table td {vertical-align:middle; text-align:center;}
input, select, textarea, button {font:12px "Helvetica Neue",Helvetica,Arial,sans-serif; color:#666;}
a, a b, a strong, a span, button, button span {cursor:pointer;}
hr, legend {display:none;}
a {color:#dd0009; text-decoration:underline;}
a:hover {text-decoration:none;}
.center {text-align:center;}

/* HELPER CLASSES */
.alignleft{text-align: left;}
.alignright{text-align: right;}
.aligncenter{text-align:center;}
.margin-btm{margin-bottom: 20px!important;}
.margin-top{margin-top: 20px!important;}
.break-word {word-wrap: break-word;}
.last{margin-right: 0 !important;margin-bottom: 0 !important; }
.centerelement{display: table; margin:0 auto}
.red {color:#CC0000;}


/* HEADINGS
----------------------------------------------------------*/

h1, h2, h3 {color:#333; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:normal;}
h1 {font-size:28px;}
h2 {font-size:24px;}
h3 {font-size:18px;}



.clearfix:after{
	content:  ".";
	display:  block;
	height:  0;
	clear:  both; 
	visibility:  hidden;
}
.clearfix{display:  inline-block;}
.clearfix{display:  block;} 
.clear{clear:both;}



/* -- COMMON CLASSES -- */
.break { clear:both; }
.left { float:left; }
.right { float:right; }
.hide { display:none; }

#background{height:100%;width:100%;position:absolute;top:0;left:0;min-height:100%;z-index:1;}

/**************************************** BEGIN: SUPERSIZED slider *************************************************/
.slider{position:relative;height:100%;}
#slidecounter,
#slidecaption{overflow:hidden;color:#FFF;font-size:13px;text-transform:none;padding:10px 13px;line-height:15px;position:absolute;top:200px;right:25px;width:auto;z-index:5;background-color:rgba(0,0,0, 0.7);color:#FFF;letter-spacing:0.05em;display:block;}
	
#slidecaption h1{color:#F0C;font-size:25px;text-transform:uppercase;line-height:15px;width:auto;}
			
ul#slide-list{float:right; height:25px; bottom:220px; right:25px; z-index:99; position:absolute;}
ul#slide-list li{list-style:none; width:15px; height:16px; float:left; margin-left:5px;}
ul#slide-list li:first-child{margin:0;}
ul#slide-list li.current-slide a, 
ul#slide-list li a:hover{background-position:0 -16px; }
ul#slide-list li a{display:block; width:16px; height:16px; background:url('/content/images/interface/slider_nav_dot.png') no-repeat 0 0px;cursor:pointer;}
				
#progress-back{z-index:5; position:absolute; bottom:0px; left:0; height:5px; width:100%; background:url("../images/interface/progress-back.png") repeat-x;}
#progress-bar{position:relative; height:5px; width:100%;background: url('/images/interface/progress-bar.png') repeat-x;}

#supersized-loader{position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url("/content/images/interface/progress.gif") no-repeat center center;}
#supersized{display:block; position:absolute; left:0; top:0; overflow:hidden; z-index:1; height:100%; width:100%;}
#supersized img{width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img{-ms-interpolation-mode:nearest-neighbor;image-rendering: -moz-crisp-edges;}
#supersized.quality img{-ms-interpolation-mode:bicubic; image-rendering: optimizeQuality;}
#supersized li{display:block; list-style:none; z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111;}
#supersized a{ }
#supersized li.prevslide{z-index:-20;}
#supersized li.activeslide{z-index:-10;}
#supersized li.image-loading{background:#111 url("/content/images/interface/progress.gif") no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{visibility:hidden;}
#supersized li.prevslide img, #supersized li.activeslide img{display:inline;}

#prevslide, #nextslide{ position:absolute; height:45px; width:45px; top:50%; margin-top:-23px; opacity:0.1; z-index:2; }
#prevslide{ left:10px; background:url("/images/interface/back.png"); }
#nextslide{ right:10px; background:url("/images/interface/forward.png"); }
#prevslide:active, #nextslide:active{ margin-top:-19px; }
#prevslide:hover, #nextslide:hover{ cursor:pointer; }


#slidecontentwrapper{width:100%;position:absolute;z-index:5;overflow:visible; top:126px;margin:0 auto; }
#slidecontentcontainer{width:1000px;position:relative;z-index:5;overflow:visible; margin:60px auto 0; height:100px; }


/* HEADER
--------------------------------------------------*/

#header {height:47px; padding:9px 9px 0; background:#333;background: -moz-linear-gradient(top,#333333 0%,#000000);background: -webkit-gradient(linear, left top, left bottom, from(#333333),to(#000000)); background:-o-linear-gradient(top, #333, #000); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#333333, endColorStr=#000000);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#333333, endColorStr=0090000); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);-ms-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);-o-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);box-shadow: inset 0 1px 0 rgba(255,255,255,.2);margin-bottom:-12px;border-top:1px solid #000}
#header h2 {float:left; height:37px; line-height:37px; color:#fff; font-size:12px; text-transform:uppercase; position:relative; z-index:10;}
#header h2 a {text-decoration:none; color:#fff; padding:0 15px; display:block; float:left;font-weight: 600;}
#header h2 a:hover {}
#header h2.current {background:#f7f7f7; border:1px solid #FFF; border-bottom:0; height:36px; line-height:36px;}
#header h2.current a {color:#333; cursor:default;}
#header h2.current a:hover {text-decoration:none;}
#header h3{ color:#FFF;}

/* CONTENT
--------------------------------------------------*/

#content {text-align:left; background:#f7f7f7; margin:0;border-top:1px solid #FFF;padding:20px 0}

.sitetitle {position:absolute;top:0; left:30px;z-index:5; display:block; overflow:hidden; width:89px; height:89px; line-height:89px; font-size:3em;text-indent:-99999px;}
.sitetitle a {display:block; width:100%; height:100%; overflow:hidden; text-decoration:none; color:#5c5f5f;}
.sitetitle a:hover {color:#dd0009;}
.sitetitle span {position:absolute; top:0; left:0; display:block; width:100%; height:100%;height:89px; width:89px; margin:0; background:url("/content/images/interface/tpi_logo.png") no-repeat 0 0;float:left;display:block;}

.signin {padding:1.5em 1em 0;}
.signin p {line-height:1.35; margin-left:10px}

.hidden {display:none;}

form {position:relative; width:100%; overflow:hidden; margin:1em 0 0; padding:2px 0 1em;}

.field,
.options {float:left; width:100%; padding:4px 0;margin-bottom:10px;}

div.focus {background:#f0ffda;}
div.focus input {border-color:#6e994a; color:#6e994a;}

.options label, .field label {display:block; float:left; width:130px; position:relative; top:.5em; margin-right:10px; text-align:right;}
.field input {border: 1px solid #ddd;color: #888;font-size: 1.3em;line-height:1.2em;padding:5px 10px;background: #fafafa;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;outline: none; height:21px; vertical-align:middle; width:220px; float:left; margin-right:10px;}
.field input:focus{ border-color:#545D61;background:#fff;}
.options input {vertical-align:middle;}
.options label {vertical-align:middle;}



.field .input-validation-error, input.err {border-color:#e88b87;}
.field-validation-error {position:relative; top:.5em; margin-right:6px; float:left; display:block; color:#e88b87;}

.error404 {position:relative; overflow:hidden; width:294px; background:url(./backgrounds/error_page_bg.jpg) no-repeat 30px 20px; padding:25px 20px 10px 120px;}
.error404 h1 {color:#5c5f5f; line-height:1.25; text-transform:uppercase;}
.error404 h3 {color:#dd0009; line-height:1.25; font-size:24px;}
.error404 p {margin:1em 0; line-height:1.35;}
.error404 fieldset {float:left; padding:7px 0; width:100%;}
.error404 label {position:absolute; top:-9999px;}
.error404 input {background:#fff url(./backgrounds/input_bg.gif) repeat-x scroll 0 0; border:1px solid #a6a6a6; color:#8e8e8e; height:21px; padding:4px 10px 3px; vertical-align:middle; width:180px; float:left; margin-right:10px;}
.error404 button {float:left; display:block; }




/* BUTTON CONCEPTS */
button, a.button{text-decoration:none;font-size: 12px;font-weight:600;color: #fff;text-shadow:1px 1px 0px rgba(0,0,0,.7);text-transform:uppercase; padding: 5px 10px;
background:#ccc;background: -moz-linear-gradient(top,#DADADA 0%,#CCC);background: -webkit-gradient(linear, left top, left bottom, from(#DADADA),to(#CCC));background:-o-linear-gradient(top, #DADADA, #CCC); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#DADADA, endColorStr=#CCC);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#DADADA, endColorStr=#CCC);-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;border: 1px solid #CCC;webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.4);-ms-box-shadow: inset 0 1px 0 rgba(255,255,255,.4);-o-box-shadow: inset 0 1px 0 rgba(255,255,255,.4);box-shadow: inset 0 1px 0 rgba(255,255,255,.4);}
button i, a.button i{font-size:14px}
button:hover,a.button:hover {background:#666;background: -moz-linear-gradient(top,#DADADA 0%,#DADADA);background: -webkit-gradient(linear, left top, left bottom, from(#DADADA),to(#DADADA));background:-o-linear-gradient(top, #DADADA, #DADADA); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#DADADA, endColorStr=#DADADA);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#DADADA, endColorStr=#DADADA); } 
button.large,a.button.large{padding: 10px 20px;font-size: 14px}
button.large i,a.button.large i{font-size:16px}
button span {display:inline;}
/* RED */
button.redbutton,a.button.redbutton {border-color:#900;background:#900;background:-moz-linear-gradient(top,#cc0000 0%,#990000);background: -webkit-gradient(linear, left top, left bottom, from(#cc0000),to(#990000));background:-o-linear-gradient(top,#CC0000, #990000);-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#CC0000, endColorStr=#990000);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#CC0000, endColorStr=#990000);color:#FFF!important;}
button.redbutton:hover,a.button.redbutton:hover {background:#cc0000;background:-moz-linear-gradient(top,#cc0000 0%,#cc0000);background: -webkit-gradient(linear, left top, left bottom, from(#cc0000),to(#cc0000));background:-o-linear-gradient(top,#CC0000, #cc0000);-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#CC0000, endColorStr=#cc0000);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#CC0000, endColorStr=#cc0000); } 
/* Black */
button.blackbutton,a.button.blackbutton  {border-color:#000;background:#000;background: -moz-linear-gradient(top,#333333 0%,#000000);background: -webkit-gradient(linear, left top, left bottom, from(#333333),to(#000000));background:-o-linear-gradient(top,#333, #000);-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#333333, endColorStr=#000000);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#333333, endColorStr=#333333);}
button.blackbutton:hover,a.button.blackbutton:hover {background:#333;background: -moz-linear-gradient(top,#333333 0%,#333333);background: -webkit-gradient(linear, left top, left bottom, from(#333333),to(#333333));background:-o-linear-gradient(top,#333, #333333);-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#333333, endColorStr=#333333);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#333333, endColorStr=#333333); } 
button[disabled],button[disabled]:hover,a.button[disabled],a.button[disabled]:hover {opacity:.5;background:#ccc;border-color:#ccc;color:#fff!important;}





/* iCheck.js Flat skin, grey
----------------------------------- */
.icheckbox_flat-grey, .iradio_flat-grey { display: block; margin: 0; padding: 0; width: 20px; height: 20px; background: url(/content/images/interface/check_ui_grey.png) no-repeat; border: none; cursor: pointer; }
.icheckbox_flat-grey { background-position: 0 0; }
.icheckbox_flat-grey.checked { background-position: -22px 0; }
.icheckbox_flat-grey.disabled { background-position: -44px 0; cursor: default; }
.icheckbox_flat-grey.checked.disabled { background-position: -66px 0; }
.iradio_flat-grey { background-position: -88px 0; }
.iradio_flat-grey.checked { background-position: -110px 0; }

.iradio_flat-grey.disabled { background-position: -132px 0; cursor: default; }
.iradio_flat-grey.checked.disabled { background-position: -154px 0; }

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),  only screen and (-moz-min-device-pixel-ratio: 1.5),  only screen and (-o-min-device-pixel-ratio: 3/2),  only screen and (min-device-pixel-ratio: 1.5) {
 .icheckbox_flat-grey,  .iradio_flat-grey {background-image: url(/content/images/interface/grey@2x.png);-webkit-background-size: 176px 22px;background-size: 176px 22px;}
}



/* MESSAGES
--------------------------------------------------*/

.msg {border:1px solid; margin:0 10px 10px;}
.msg div.msg-warp {background:transparent none no-repeat scroll 10px 6px; position:relative; width:100%; padding:8px 0 0;}
.msg p,
.msg div.validation-summary-errors,
.msg span.validation-summary-errors {padding:0 20px 8px 40px; color:#777; line-height:1.25; margin:0; display:block;}
.msg div.validation-summary-errors ul {margin:0; padding:8px 0 0 3em; list-style-type:disc;}
.msg ul.validation-summary-errors {padding:0 20px 8px 70px; color:#777; line-height:1.25; margin:0; list-style-type:disc;}
.msg a.msg-close {position:absolute; top:0; right:0; padding:2px 5px; color:#535353; font-size:.833em; text-decoration:none; font-weight:bold; font-family:Trebuchet MS; font-style:normal;}
.msg a.msg-close:hover {color:#000;}
.msg-ok {background:#cffbac url(./backgrounds/msg_ok_bg.gif) repeat-x scroll 0 0; border-color:#99c687;}
.msg-ok div.msg-warp {background-image:url(./backgrounds/msg_ok.png);}
.msg-warn {background:#fff1a2 url(./backgrounds/msg_warn_bg.gif) repeat-x scroll 0 0; border-color:#f7d08d;}
.msg-warn div.msg-warp {background-image:url(./backgrounds/msg_warn.png);}
.msg-info {background:#cbecff url(./backgrounds/msg_info_bg.gif) repeat-x scroll 0 0; border-color:#87d2ee;}
.msg-info div.msg-warp {background-image:url(./backgrounds/msg_info.png);}
.msg-error {background:#ffccca url(./backgrounds/msg_error_bg.gif) repeat-x scroll 0 0; border-color:#e88b87;}
.msg-error div.msg-warp {background-image:url(./backgrounds/msg_error.png);}


/* -- MESSAGGING -- */
.mssg {min-width: 100px;padding: 15px 20px 15px 50px;margin:0 0 10px;font: normal 12px/18px;/* border radius */-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
/*.mssg strong {margin-right: 10px;}*/
.mssg a{font-weight:600}
.mssg a:hover{text-decoration:underline}
/* -- ERROR MESSAGGING -- */
.box {display:none;min-width: 100px;color:#000;padding: 15px 20px 15px 50px;margin: 10px 0;font: normal 12px/12px arial, helvetica, sans-serif;/* border radius */-webkit-border-radius: 4px;-moz-border-radius: 4px;   border-radius: 4px;}
.box strong {margin-right: 10px;}
.error {background:#fccac2 url('/images/interface/icons/error.png') no-repeat 10px center;border: 1px solid #eb5339;}
.error a{color:#eb5339;}
/* -- SUCCESS MESSAGGING -- */
.success {color:#000;background: #efffb9 url('/images/interface/icons/success.png') no-repeat 10px center;border: 1px solid #99c600;}
.success a{color:#99c600;}
.warning {background:#ffeaa8 url('/images/interface/icons/warning.png') no-repeat 10px center;border: 1px solid #f9b416;}
.warning a{color:#f9b416;}
.information {background: #cce1ef url('/images/interface/icons/info.png') no-repeat 10px center;border: 1px solid #4d8fcb;}
.information a{color:#4d8fcb;}
.tip {background: #ffeac8 url('/images/interface/icons/bulb.png') no-repeat 10px center;border: 1px solid #d38e4a;}
.tip a{color:#d38e4a;}
.message {background: #f2f2f2 url('/images/interface/icons/message.png') no-repeat 10px center;border: 1px solid #aaa;}
.message a{color:#aaa}
.download {background:#efffb9 url('/images/interface/icons/download.png') no-repeat 10px center;border: 1px solid #99c600;}
.download a{color: #99c600}
.mssg .edit {background: #ffeaa8 url('/images/interface/icons/edit.png') no-repeat 10px center;border: 1px solid #f9b416;}
.lock {background: #f2f2f2 url('/images/interface/icons/lock.png') no-repeat 10px center; border: 1px solid #aaa;}
.construction {background: #ffeac8 url('/images/interface/icons/construction.png') no-repeat 10px center;border: 1px solid #d38e4a;}
.construction a{color:#d38e4a;}
.mssg a#close{}

/* --- [ MODAL STYLES ] --- */
.modal {padding:0px 10px;background:#000; color:#FFF;}
.modal h1{font-size:24px; margin:10px 0 5px 0;font-weight:700;color:#FFF;}
.modal h4{font-size:14px; margin:10px 0 5px 0;font-weight:700;color:#FFF;}
.modal p{font-size: 13px;line-height: 1.5; }
.modal p.large{font-size:16px;}
.modal_content{margin:10px 0;display:inline-block;width: 100%;}
.modal hr {background:transparent url('/content/images/interface/rule_dark.png') repeat-x;height:2px;border:none;display:block}
.modal .dbl_rule{width:100%; height:1px; background-color:#fff;}

/* FOOTER
--------------------------------------------------*/

#footer {position: fixed;z-index:2;bottom: 0px;width: 100%;padding: 10px;font-size: 11px; color:#999;background:#000;background: -moz-linear-gradient(top,#333333 0%,#000000);background: -webkit-gradient(linear, left top, left bottom, from(#333333),to(#000000)); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#333333, endColorStr=#000000);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#333333, endColorStr=0090000); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);-ms-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);-o-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);box-shadow: inset 0 1px 0 rgba(255,255,255,.2);border-top:1px solid #000}
#footer p {line-height:2.35;text-align:left}
#footer a {color:#ccc; text-decoration:none;}
#footer a:hover {color:#fff;}
#footer .g-trans-widget{position:relative;right:15px;}
#footer .g-trans-widget a{color:#333}
/* CSS3 STYLES
--------------------------------------------------*/

.wrap2 {-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;box-shadow: 0 1px 1px rgba(255,255,255,0.2), 0 1px 3px rgba(25,62,83,0.0) inset, 0 0 0 8px rgba(255,255,255,0.3);
}

#header,
.field input,
.error input,
.error button,
.msg {-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}

#header .list, #header h2.current {border-top-left-radius:4px; border-top-right-radius:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px;}