/* 
 * common.css, 2.0 2009-Oct-15
 *
 * (c) 2007 Computer History Museum		http://www.computerhistory.org
 *
 * Edit according to styleguide
 *
 */


/* A basic grid - WIDTHS in percents
-------------------------------------------------------------------------------------------------------------------- */

.page { margin: 0 auto; width: 960px; }

.w-5,  .w-10, .w-15, .w-20, .w-25, .w-30, .w-33, .w-35, .w-40, .w-45, .w-50, .w-55, .w-60, .w-65, .w-67, .w-70, 
.w-75, .w-80, .w-85, .w-90, .w-95, .w-100 { float:left; display: inline; }

/* percentage */	
.w-5  { width: 5% /* 37px */; }
.w-10 { width: 10% /* 84px */; }
.w-15 { width: 15% /* 111px */; }
.w-20 { width: 20% /* 148px */; }
.w-25 { width: 25% /* 185px */; }
.w-30 { width: 30% /* 222px */; }
.w-33 { width: 33% /* 247px */; }
.w-35 { width: 35% /* 259px */; }
.w-40 { width: 40% /* 296px */; }
.w-45 { width: 45% /* 333px */; }
.w-50 { width: 50% /* 370px */; }
.w-55 { width: 55% /* 407px */; }
.w-60 { width: 60% /* 444px */; }
.w-65 { width: 65% /* 481px */; }
.w-67 { width: 67% /* 493px */; } 
.w-70 { width: 70% /* 518px */; }
.w-75 { width: 75% /* 555px */; }
.w-80 { width: 80% /* 592px */; }
.w-85 { width: 85% /* 629px */; }
.w-90 { width: 90% /* 666px */; }
.w-95 { width: 95% /* 703px */; }
.w-100 { width: 100% /*740px*/; }

/* absolute */
.w-200 { width: 200px; }
.w-225 { width: 225px; }
.w-250 { width: 250px; }
.w-275 { width: 275px; }
.w-300 { width: 300px; }
.w-325 { width: 325px; }
.w-350 { width: 350px; }
.w-354 { width: 354px; } /* for 350x175 images */
.w-356 { width: 356px; } /* for 350x175 images */
.w-380 { width: 380px; }
.w-400 { width: 400px; }
.w-430 { width: 430px; }
.w-435 { width: 435px; }
.w-450 { width: 450px; }
.w-475 { width: 475px; }
.w-500 { width: 500px; }
.w-550 { width: 550px; }
.w-560 { width: 560px; }
.w-590 { width: 590px; }
.w-615 { width: 615px; }
.w-684 { width: 684px; }
.w-680 { width: 680px; }
.w-700 { width: 700px; }

.pos-abs-top-left { position: absolute; top: 0; left: 0; }
.pos-abs-top-right { position: absolute; top: 0; right: 0; }
.pos-abs-bottom-left { position: absolute; bottom: 0; left: 0; }
.pos-abs-bottom-right { position: absolute; bottom: 0; right: 0; }
.pos-rel { position: relative; }
.last { padding: 0 !important; }
.clear { clear: both; height:0; font-size: 1px; line-height: 0px; }
.left { float: left; }
.right { float: right; }
.inline-block { display: inline-block; }
.inline { display: inline; }



/* A basic grid - PADDINGS in px; pt - padding top; pr - padding right; pb - padding bottom; pl -> padding left;
-------------------------------------------------------------------------------------------------------------------- */
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }
.pt-30 { padding-top: 30px; }
.pt-35 { padding-top: 35px; }
.pt-40 { padding-top: 40px; }
.pt-45 { padding-top: 45px; }
.pt-50 { padding-top: 50px; }
.pt-55 { padding-top: 55px; }
.pt-60 { padding-top: 60px; }

.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pr-25 { padding-right: 25px; }
.pr-30 { padding-right: 30px; }
.pr-35 { padding-right: 35px; }
.pr-40 { padding-right: 40px; }
.pr-45 { padding-right: 45px; }
.pr-50 { padding-right: 50px; }
.pr-55 { padding-right: 55px; }
.pr-60 { padding-right: 60px; }

.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-25 { padding-bottom: 25px; }
.pb-30 { padding-bottom: 30px; }
.pb-35 { padding-bottom: 35px; }
.pb-40 { padding-bottom: 40px; }
.pb-45 { padding-bottom: 45px; }
.pb-50 { padding-bottom: 50px; }
.pb-55 { padding-bottom: 55px; }
.pb-60 { padding-bottom: 60px; }

.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-25 { padding-left: 25px; }
.pl-26 { padding-left: 26px; } /* special padding */
.pl-30 { padding-left: 30px; }
.pl-35 { padding-left: 35px; }
.pl-40 { padding-left: 40px; }
.pl-45 { padding-left: 45px; }
.pl-50 { padding-left: 50px; }
.pl-55 { padding-left: 55px; }
.pl-60 { padding-left: 60px; }



/* A basic grid - MARGINS in px; mt - padding top; mr - padding right; mb - padding bottom; ml -> padding left;
-------------------------------------------------------------------------------------------------------------------- */
.mt-2 { margin-top: 2px; !important; }
.mt-5 { margin-top: 5px; !important; }
.mt-10 { margin-top: 10px; !important; }
.mt-15 { margin-top: 15px; !important; }
.mt-20 { margin-top: 20px; !important; }
.mt-25 { margin-top: 25px; !important; }
.mt-30 { margin-top: 30px; !important; }
.mt-35 { margin-top: 35px; !important; }
.mt-40 { margin-top: 40px; !important; }
.mt-45 { margin-top: 45px; !important; }
.mt-50 { margin-top: 50px; !important; }
.mt-55 { margin-top: 55px; !important; }
.mt-60 { margin-top: 60px; !important; }
.mt-65 { margin-top: 65px; !important; }
.mt-70 { margin-top: 70px; !important; }
.mt-75 { margin-top: 75px; !important; }
.mt-80 { margin-top: 80px; !important; }
.mt-85 { margin-top: 85px; !important; }
.mt-90 { margin-top: 90px; !important; }
.mt-95 { margin-top: 95px; !important; }
.mt-100 { margin-top: 100px; !important; }
.mt-no { margin-top: 0 !important; }



.mr-5  { margin-right: 5px; !important; }
.mr-10 { margin-right: 10px; !important; }
.mr-15 { margin-right: 15px; !important; }
.mr-20 { margin-right: 20px; !important; }
.mr-25 { margin-right: 25px; !important; }
.mr-30 { margin-right: 30px; !important; }
.mr-35 { margin-right: 35px; !important; }
.mr-40 { margin-right: 40px; !important; }
.mr-45 { margin-right: 45px; !important; }
.mr-50 { margin-right: 50px; !important; }
.mr-55 { margin-right: 55px; !important; }
.mr-60 { margin-right: 60px; !important; }
.mr-65 { margin-right: 65px; !important; }
.mr-70 { margin-right: 70px; !important; }
.mr-75 { margin-right: 75px; !important; }
.mr-80 { margin-right: 80px; !important; }
.mr-85 { margin-right: 85px; !important; }
.mr-90 { margin-right: 90px; !important; }
.mr-95 { margin-right: 95px; !important; }
.mr-100 { margin-right: 100px; !important; }
.mr-no { margin-right: 0 !important; }



.mb-5  { margin-bottom: 5px; !important; }
.mb-10 { margin-bottom: 10px; !important; }
.mb-15 { margin-bottom: 15px; !important; }
.mb-20 { margin-bottom: 20px; !important; }
.mb-25 { margin-bottom: 25px; !important; }
.mb-30 { margin-bottom: 30px; !important; }
.mb-35 { margin-bottom: 35px; !important; }
.mb-40 { margin-bottom: 40px; !important; }
.mb-45 { margin-bottom: 45px; !important; }
.mb-50 { margin-bottom: 50px; !important; }
.mb-55 { margin-bottom: 55px; !important; }
.mb-60 { margin-bottom: 60px; !important; }
.mb-65 { margin-bottom: 65px; !important; }
.mb-70 { margin-bottom: 70px; !important; }
.mb-75 { margin-bottom: 75px; !important; }
.mb-80 { margin-bottom: 80px; !important; }
.mb-85 { margin-bottom: 85px; !important; }
.mb-90 { margin-bottom: 90px; !important; }
.mb-95 { margin-bottom: 95px; !important; }
.mb-100 { margin-bottom: 100px; !important; }
.mb-no { margin-bottom: 0 !important; }



.ml-5  { margin-left: 5px; !important; }
.ml-10 { margin-left: 10px; !important; }
.ml-15 { margin-left: 15px; !important; }
.ml-20 { margin-left: 20px; !important; }
.ml-25 { margin-left: 25px; !important; }
.ml-26 { margin-left: 26px; !important; }
.ml-30 { margin-left: 30px; !important; }
.ml-35 { margin-left: 35px; !important; }
.ml-40 { margin-left: 40px; !important; }
.ml-45 { margin-left: 45px; !important; }
.ml-50 { margin-left: 50px; !important; }
.ml-55 { margin-left: 55px; !important; }
.ml-60 { margin-left: 60px; !important; }
.ml-65 { margin-left: 65px; !important; }
.ml-70 { margin-left: 70px; !important; }
.ml-75 { margin-left: 75px; !important; }
.ml-80 { margin-left: 80px; !important; }
.ml-85 { margin-left: 85px; !important; }
.ml-90 { margin-left: 90px; !important; }
.ml-95 { margin-left: 95px; !important; }
.ml-100 { margin-left: 100px; !important; }
.ml-no { margin-left: 0 !important; }
.ml-200 { margin-left: 200px; !important; } 



/*	utils
---------------------------------------------------------- */
.skip { display: block; left: -9999px;	position: absolute;	visibility: hidden; }
.dev-hor { background: url(gridbg.gif); min-height: 250px; }
.dev-vert { background: url(gridbg-1.gif); min-height: 250px; }
.dev-vert-hor { background: url(gridbg-2.gif); min-height: 250px; }
.t-border { border-top: 1px #e2e2e2 solid; }
.r-border { border-right: 1px #e2e2e2 solid; }
.b-border { border-bottom: 1px #e2e2e2 solid; }
.l-border { border-left: 1px #e2e2e2 solid; }
.l-float { float: left; }
.r-float { float: right; }
.pointer { cursor: pointer; }
.clear-both { clear: both; }
hr.clearboth { height: 0; visibility: hidden; clear: both; margin: 0; padding: 0; }
.clearafter { content: "."; display: block; clear: both; visibility: hidden; line-height: 0px; height: 0px; }
.t-bold { font-weight: bold; }
.t-200 { font-weight: 200; }
.t-300 { font-weight: 300; }
.t-400 { font-weight: 400; }
.t-500 { font-weight: 500; }
.t-600 { font-weight: 600; }


/* different fixed heights for divs 
---------------------------------------------------------- */

.h-150 { height: 150px !important; }
.h-175 { height: 175px !important; }
.h-200 { height: 200px !important; }
.h-225 { height: 225px !important; }
.h-250 { height: 250px !important; }
.h-275 { height: 275px !important; }
.h-300 { height: 300px !important; }
.h-315 { height: 315px !important; }
.h-320 { height: 320px !important; }
.h-325 { height: 325px !important; }
.h-350 { height: 350px !important; }
.h-375 { height: 375px !important; }
.h-400 { height: 400px !important; }
.h-425 { height: 425px !important; }
.h-450 { height: 450px !important; }
.h-475 { height: 475px !important; }
.h-500 { height: 500px !important; }
.h-525 { height: 525px !important; }
.h-550 { height: 550px !important; }
.h-575 { height: 575px !important; }
.h-600 { height: 600px !important; }
.h-625 { height: 625px !important; }
.h-650 { height: 650px !important; }
.h-675 { height: 675px !important; }
.h-700 { height: 700px !important; }
.h-725 { height: 725px !important; }
.h-750 { height: 750px !important; }
.h-775 { height: 775px !important; }
.h-800 { height: 800px !important; }