@charset "utf-8";
/* CSS Document */

@import url("fonts.css");

body{margin:0; font-family: 'Titillium Web', sans-serif; background:#001940; width:100%; height:100%; color:#FFF;}

@media only screen and (min-width: 260px){
	.grid_header{margin:5px 5px 5px 5px;}
	.grid_header .name{padding:10px 0;}
	.grid_header .name h1{font-size:24px; line-height:24px;}
	.grid_row{width:260px;}
}
@media only screen and (min-width: 520px){
	.grid_header{margin:20px 5px 10px 5px;}
	.grid_header .name{padding:0;}
	.grid_header .name h1{font-size:36px; line-height:48px;}
	.grid_row{width:520px;}
}
@media only screen and (min-width: 1040px){
	.grid_header{margin:50px 5px 30px 5px;}
	.grid_header .name{padding:0;}
	.grid_header .name h1{font-size:48px; line-height:48px;}
	.grid_row{width:1040px;}
}
@media only screen and (min-height: 700px){
	.grid_header{margin:50px 5px 30px 5px;}
}
@media only screen and (min-height: 600px){
	.grid_header{margin:100px 5px 30px 5px;}
}

img{border:0;}

.grid_header{overflow:hidden;}
.grid_header .name{float:left;}
.grid_header .name h1{font-weight:300; margin:0;}
.grid_header .user_info{float:right;}
.grid_header .user_info .user_details{float:left; margin-right:10px; text-align:right;}
.grid_header .user_info .user_details p{margin:0; font-size:16px;}
.grid_header .user_info .user_icon{float:right; width:48px; height:48px; background:#0066ff;}
.grid_row{margin:0 auto; min-width:260px; max-width:1040px; display:block; overflow:hidden;}
.grid_row a{color:#FFF;}
.grid_1_1{width:120px; height:120px; padding:0px; margin:5px; float:left; position:relative;}
.grid_1_2{width:250px; height:120px; padding:0px; margin:5px; float:left; position:relative;}
.grid_title{position:absolute; bottom:5px; left:10px; margin:0; width:100%; font-weight:300; font-size:14px; line-height:14px;}
.grid_footer{overflow:hidden; margin:20px 5px; font-size:14px;}
.grid_footer a{text-decoration:none; color:#FFF; font-size:14px;}
.grid_footer .left{float:left;}
.grid_footer .right{float:right;}

.darkCyan{background:#0099ab;}
.blueViolet{background:#623dbc;}
.steelBlue{background:#4682b4;}
.darkGreen{background:#008f00;}
.orange{background:#db552d;}
.royalBlue{background:#4169e1;}
.purple{background:#a300aa;}
.darkPurple{background:#a100a9;}
.green{background:#00a200;}
.maroon{background:#bc1d49;}
.gray{background:#333333;}
.limeGreen{background:#7dc211;}
.deepYellow{background:#fe9800;}
.darkOrange{background:#eb3c00;}
.pink{background:#ed2b84;}
.navyBlue{background:#37539e;}
.chocolate{background:#d2691e;}
.crimson{background:#dc143c;}
.gold{background:#ffd700;}
.olive{background:#808000;}
.slateGray{background:#708090;}

#date{float:left; display:block; width:100px; padding-top:10px;}
#day{display:block; font-size:48px; line-height:48px; text-align:center;}
#weekday{display:block; font-size:16px; line-height:14px; text-align:center; padding:5px 0;}
#month{display:block; font-size:16px; line-height:14px; text-align:center; padding:5px 0;}
#time{float:right; display:block; width:150px; padding-top:10px;}
#hour_minute{display:block; margin-top:15px; font-size:48px; line-height:48px; text-align:center;}
#ampm{display:block; text-align:center;}

#music:hover{background:#4169e1;}
#video:hover{background:#db552d;}
#epad:hover{background:#ffd700;}
#whatis2day:hover{background:#0066ff;}