/**
 * Hailpixel CSS
 * @author Devin Hunt
 * @website http://www.hailpixel.com
 */

/*_________________________________________________________ Global Reset */
html, body, div, span, 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, samp, small, strike, strong, sub, sup,
tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; 
 font-family: <?= $ffLucidia; ?>;
}
ul, li { list-style: none; }
table { border-spacing: 0; border-collapse: collapse; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote, q { quotes: none; }
:focus { outline: 0; }

.clearit:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearit { zoom: 1; }
* html .clearit { height: 1%; }

/*_________________________________________________________ Typography - Global */
@font-face {
	font-family: 'TradeGothic18';
	src: url('../fonts/tradegothicltstd-cn18-webfont.eot');
	src: local('☺'), url('../fonts/tradegothicltstd-cn18-webfont.woff') format('woff'), url('../fonts/tradegothicltstd-cn18-webfont.ttf') format('truetype'), url('../fonts/tradegothicltstd-cn18-webfont.svg#webfont44edSEOy') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'TradeGothic18';
	src: url('../fonts/tradegothicltstd-bdcn20-webfont.eot');
	src: local('☺'), url('../fonts/tradegothicltstd-bdcn20-webfont.woff') format('woff'), url('../fonts/tradegothicltstd-bdcn20-webfont.ttf') format('truetype'), url('../fonts/tradegothicltstd-bdcn20-webfont.svg#webfontKKhzV9YZ') format('svg');
	font-weight: bold;
	font-style: normal;
}

body { font-family: Helvetica, Arial, sans-serif; font-size: 62.5%; }

p { font-size: 1.4em; line-height: 24px; margin: 16px 0;}

a { color: red; text-decoration: none; }
a:hover { color: black; }

/*_________________________________________________________ Structure - Grids */
.boxgrid { width: 960px; margin-left: auto; margin-right: auto; }
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 { 
    display: inline; float: left; margin-left: 8px; margin-right: 8px;}

.boxgrid .box1 { width: 104px; }
.boxgrid .box2 { width: 224px; }
.boxgrid .box3 { width: 344px; }
.boxgrid .box4 { width: 464px; }
.boxgrid .box5 { width: 584px; }
.boxgrid .box6 { width: 704px; }
.boxgrid .box7 { width: 824px; }
.boxgrid .box8 { width: 944px; }

.boxgrid .first { margin-left: 0; }
.boxgrid .last { margin-right: 0; }

.reverse { float: right; }

/*_________________________________________________________ Structure - Mixins */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.lineclear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.hidden { display: none; }
.relative { position: relative; }

/*_________________________________________________________ Typography - Header */
header { margin-top: 16px; }
header h1 { font-family: 'TradeGothic18', Helvetica, Arial; font-size: 60px; 
            text-transform: uppercase; font-weight: bold; text-align: center;  
            background: black; color: white; line-height: 42px;
            height: 172px; padding-top: 52px; 
            -moz-border-radius: 112px; -webkit-border-radius: 112px; border-radius: 112px; }
header h1 span { font-size: 18px; font-weight: normal; }

/*_________________________________________________________ Structure - Content */
#content { padding-top: 16px;}
#context { padding-bottom: 16px; margin: 0 0 0 52px; }

#wtf { margin: 0 0 0 52px; padding-top: 32px; }

/*_________________________________________________________ Structure - Typography */

#wtf h1, h2 { font-family: 'TradeGothic18', Helvetica, Arial; font-size: 4.8em; line-height: 48px;
            text-transform: uppercase; font-weight: bold; }
#wtf h2 { font-size: 2.4em; line-height: 24px; margin-top: 24px; }

/*_________________________________________________________ Structure - Todo List */


.options { padding: 32px 0 32px 52px; height: 28px; }
.options li a { background: black; display: block; float: left; padding: 2px 16px 0 16px; margin-right: 8px;
                    font-family: 'TradeGothic18', Helvetica, Arial; letter-spacing: 2px; text-transform: uppercase;
                    font-weight: bold; text-decoration: none;
                    font-size: 14px; line-height: 26px; color: white;
                    
                   -moz-border-radius: 14px; -webkit-border-radius: 14px; border-radius: 14px;}
.options .active { background: red; }

#loading { position: absolute; background: url('/static/img/loading.gif'); width: 16px; height: 16px; top: 40px; left: 24px; }
                   
#todoList { }

/*_________________________________________________________ Typography - Todo List */

.todo { padding: 16px 0; 
        position: relative;}
.check { position: absolute; width: 52px; height: 52px; top: 8px; left: 0; text-indent: -9999px; }
.check a { display: block; width: 52px; height: 52px; background: url('/static/img/check.jpg'); }
/* .check:hover a { display: block; width: 52px; height: 52px; background: url('/static/img/check.jpg') 0 -52px; } */
.task { padding-left: 52px; font-family: 'TradeGothic18', Helvetica, Arial; font-size: 4.8em; text-transform: uppercase; line-height: 48px; }

.mini .task { font-size: 2.4em; line-height: 24px;}
.mini .task a { background: black; display: block; float: left; padding: 2px 6px 0 8px; margin-right: 8px;
                    font-family: 'TradeGothic18', Helvetica, Arial; letter-spacing: 2px; text-transform: uppercase;
                    font-weight: bold; text-decoration: none;
                    font-size: 10px; line-height: 16px; color: white;
                    
                   -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
.mini .task a:hover { color: red; }

.mini .task a.active { background: red; }
.mini .task a.active:hover { color: white; }

#doneList .todo { padding: 8px 0;}
#doneList .check { position: absolute; width: 36px; height: 8px; top: 12px; left: 8px; }
#doneList .check a { display: block; height: 8px; width: 36px; background: white; }
#doneList .check:hover a { display: block; background: red; }
#doneList .task { font-family: Helvetica, Arial; font-size: 1.8em; text-transform: none; line-height: 18px; color: #aaa; text-decoration: line-through;}

#addTask { }
.taskForm input[type="text"] { border: none; border-bottom: 2px solid black;
                               padding: 0; width: 550px;
                               font-family: 'TradeGothic18', Helvetica, Arial; font-size: 2.4em; line-height: 18px; 
                               text-transform: uppercase; }
.taskForm input[type="submit"] { width: 40px; height: 40px; border: none; background: black; color: white;
                                 font-size: 2.4em; font-weight: bold; line-height: 24px;
                                 -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
.taskForm input[type="submit"]:hover { color: red; cursor: pointer; }

#addAccepted { height: 24px; width: 550px; }
#addAccepted p { text-align: center; margin: 0; }