.container {width: 373px; margin: 10px; margin-top: 108px;} .top {width: 373px; padding: 20px; background-color: #111; /* change topbar background color */ position: fixed; border-bottom: 10px solid #fff; border-top: 20px solid #fff; z-index: 5; top: 0px; color: #fff; font-size: 10px; letter-spacing: 1px;} .tti {font-family: 'Open Sans'; font-size: 26px;} .tli {border: 1px solid #fff; padding: 10px; display: inline-block; float: right;} .tli a {color:#fff; font-family: 'Open Sans'; font-size: 10px; letter-spacing: 2px;} .tli a:hover {color: #f4e909;} #sb {border: 1px solid #111; color: #111;} #sb:hover {background-color: #111; color: #fff;} .tent {width: 160px; height: 110px; font-size: 7px; background-color: #f4dcbe; display: table; float: left; margin-right: 8px; margin-bottom: 8px; position: relative; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tsub {color: #222; text-align: center; letter-spacing: 2px; width: 160px; display: table-cell; vertical-align: middle;} .ti {background-color: #fff; text-align: center; font-size: 7px; padding: 10px; line-height: 100%; text-transform: uppercase; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tent:hover .ti {opacity: 0.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .hhover {opacity: 0.0; position: absolute; width: 160px; height: 110px; padding: 0px; top: 0px; left: 0px; color:#fff; text-align: center; display: table; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tent:hover .hhover {background-color: rgba(0,0,0,0.6); opacity: 1.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .htent {display: table-cell; font-size: 9px; color: #ddd;} .hti {letter-spacing: 2px; width: 90%; margin: auto; border-bottom: 1px solid #fff; margin-bottom: 0px; font-size: 9px; padding: 4px 0px; color: #fff; line-height: 110%; text-transform: uppercase;} .dat {letter-spacing: 0px;} /* change date font family */ .dat strong {font-weight: normal; color: #f4dcbe;} .dat-missy strong {font-weight: normal; color: #ffe877;} .dat-noo strong {font-weight: normal; color: #ffaece;} /* change gold text color */ /* bigger bigger */ .tent2 {width: 160px; height: 236px; font-size: 7px; background-color: #f4dcbe; display: table; float: left; margin-right: 8px; margin-bottom: 8px; position: relative; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tsub2 {color: #222; text-align: center; letter-spacing: 2px; width: 160px; display: table-cell; vertical-align: middle;} .ti2 {background-color: #fff; text-align: center; font-size: 7px; padding: 10px; line-height: 100%; text-transform: uppercase; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tent2:hover .ti2 {opacity: 0.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .hhover2 {opacity: 0.0; position: absolute; width: 160px; height: 236px; padding: 0px; top: 0px; left: 0px; color:#fff; text-align: center; display: table; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tent2:hover .hhover2 {background-color: rgba(0,0,0,0.6); opacity: 1.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .htent2 {display: table-cell; vertical-align: middle; font-size: 9px; color: #ddd;} .hti2 {letter-spacing: 2px; width: 90%; margin: auto; border-bottom: 1px solid #fff; margin-bottom: 0px; font-size: 9px; padding: 4px 0px; color: #fff; line-height: 110%; text-transform: uppercase;} .dat2 strong {font-weight: normal; color: #f4dcbe;} /* change gold text color */ /* bigger bigger 2 */ .tent3 {width: 160px; height: 160px; font-size: 7px; background-color: #f4dcbe; display: table; float: left; margin-right: 8px; margin-bottom: 8px; position: relative; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tsub3 {color: #222; text-align: center; letter-spacing: 2px; width: 160px; display: table-cell; vertical-align: middle;} .ti3 {background-color: #fff; text-align: center; font-size: 7px; padding: 10px; line-height: 100%; text-transform: uppercase; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tent3:hover .ti3 {opacity: 0.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .hhover3 {opacity: 0.0; position: absolute; width: 160px; height: 160px; padding: 0px; top: 0px; left: 0px; color:#fff; text-align: center; display: table; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tent3:hover .hhover3 {background-color: rgba(0,0,0,0.6); opacity: 1.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .htent3 {display: table-cell; vertical-align: middle; font-size: 9px; color: #ddd;} .hti3 {letter-spacing: 2px; width: 90%; margin: auto; border-bottom: 1px solid #fff; margin-bottom: 0px; font-size: 9px; padding: 4px 0px; color: #fff; line-height: 110%; text-transform: uppercase;} .dat3 strong {font-weight: normal; color: #f4dcbe;} /* change gold text color */ /* smaller smaller */ .tent4 {width: 160px; height: 90px; font-size: 7px; background-color: #f4dcbe; display: table; float: left; margin-right: 8px; margin-bottom: 8px; position: relative; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tsub4 {color: #222; text-align: center; letter-spacing: 2px; width: 160px; display: table-cell; vertical-align: middle;} .ti4 {background-color: #fff; text-align: center; font-size: 7px; padding: 10px; line-height: 100%; text-transform: uppercase; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tent4:hover .ti4 {opacity: 0.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .hhover4 {opacity: 0.0; position: absolute; width: 160px; height: 90px; padding: 0px; top: 0px; left: 0px; color:#fff; text-align: center; display: table; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .tent4:hover .hhover4 {background-color: rgba(0,0,0,0.6); opacity: 1.0; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;} .htent4 {display: table-cell; vertical-align: middle; font-size: 9px; color: #ddd;} .hti4 {letter-spacing: 2px; width: 90%; margin: auto; border-bottom: 1px solid #fff; margin-bottom: 0px; font-size: 9px; padding: 4px 0px; color: #fff; line-height: 110%; text-transform: uppercase;} .dat4 strong {font-weight: normal; color: #f4dcbe;} /* change gold text color */