#container

{

background-color:green;overflow:hidden;width:100%;height:800px

}



#game_area

{

background-color:red;overflow:hidden;width:1200px;height:800px;margin: auto auto

}



#player1, #player2

{

float:left;background-color:red;overflow:hidden;width:300px;height:800px

}



#player1_namebar, #player2_namebar

{

background-color:red;overflow:hidden;width:300px;height:100px

}



#player1_photo, #player2_photo

{

float:left;background-color:moccasin;overflow:hidden;width:60px;height:100px

}



#player1_name, #player2_name

{

float:left;background-color:moccasin;overflow:hidden;width:180px;height:100px

}



#player1_score, #player2_score

{

float:left;background-color:moccasin;overflow:hidden;width:60px;height:100px

}



#fill

{

background-color:moccasin;overflow:hidden;width=300px;height:10px

}



#player1_tiles, #player2_tiles

{

background-color:moccasin;overflow:hidden;width=300px;height:40px;font-family:arial

}



#player1_scoresheet, #player2_scoresheet

{

background-color:red;overflow:hidden;width=300px;height:650px

}



#board_area

{

float:left;background-color:gainsboro;overflow:hidden;width:600px;height:800px

}



#navigation

{

background-color:black;overflow:hidden;width:600px;height:40px

}



#board_container

{

background-color:black;overflow:hidden;width:600px;height:510px;font-family:arial

}



#board_bottom

{

background-color:black;overflow:hidden;width:600px;height:40px

}



#board_left

{

float:left;overflow:hidden;width:45px;height:510px

}



#board

{

float:left;background-color:brown;overflow:hidden;width:510px;height:510px

}



#board_right

{

float:left;overflow:hidden;width:45px;height:510px

}



table

{

border-collapse:collapse;border-spacing:0

}

td

{

width:30px;height:30px;

border-left: 1px solid black;border-right: 1px solid black;border-top: 1px solid black;border-bottom: 1px solid black;

padding:0;background-color:#090

}

th

{

width:30px;height:30px;padding:0;text-align:center;vertical-align:middle

}

tr

{

padding:0;text-align:center;vertical-align:middle

}

td.b3S 

{

background-color:#f00;color:white;font-size:12px

}

td.b2S 

{

background-color:#f69;font-size:12px

}

td.b3P 

{

background-color:#009;color:white;font-size:12px

}

td.b2P 

{

background-color:#0cf;font-size:12px

}

td.bP 

{

background-color:#ffffde;font-size:18px;font-weight:bold

}

td.bP1 

{

background-color:#FFDAB9;font-size:18px;font-weight:bold

}

td.bZ 

{

background-color:#ffffde;color:#de0000;font-size:18px;font-weight:bold

}

td.bZ1

{

background-color:#FFDAB9;color:#de0000;font-size:18px;font-weight:bold

}

td.bT1 

{

background-color:#ffffde;font-weight:bold;font-size:14px;width:30px;height:22px

}

td.bT2 

{

background-color:#ffffde;font-weight:bold;font-size:14px;width:150px;height:22px

}

td.bT3 

{

background-color:#ffffde;font-weight:bold;font-size:14px;width:40px;height:22px

}

td.bT4 

{

background-color:#ffffde;font-weight:bold;font-size:14px;width:40px;height:22px

}

td.bN 

{

background-color:#ffffde;font-size:16px

}

td.bN2 

{

background-color:#ffffde;font-size:16px;width:80px

}





@media all and (max-width: 1359px) and (min-width: 1200px)

{



#container, #game_area, #player1, #player2, #board_area{height:700px}



#game_area{width:1000px}



#player1, #player2, #player1_namebar, #player2_namebar, #player1_scoresheet, #player2_scoresheet, #player1_tiles, #player2_tiles, #fill{width:250px}



#player1_photo, #player2_photo, #player1_score, #player2_score{width:50px}



#player1_name, #player2_name{width:150px;font-size:16px}



#player1_score, #player2_score{font-size:16px}



#player1_tiles, #player2_tiles{height:36px}



#player1_scoresheet, #player2_scoresheet{height:550px}



#board_area{width:500px}



#navigation{width:500px;height:30px}



#board_container{width:500px;height:440px}



#board_left{width:30px;height:440px}



#board_right{width:30px;height:440px}



#board_bottom{width:500px;height:30px}



#board{width:440px;height:440px}



td, tr, th{width:26px;height:26px}



td.bP, td.bP1, td.bZ, td.bZ1{font-size:16px}



td.bT1, td.bT2, td.bT3, td.bT4{font-size:13px;height:18px}



tr.BT{height:18px}



td.bT3, td.bT4{width:35px}



td.bN, td.bN2{font-size:12px}



td.bN2{width:60px}



}



@media all and (max-width: 1199px) and (min-width: 1000px)

{



#container, #game_area, #player1, #player2, #board_area{height:600px}



#game_area{width:900px}



#player1, #player2, #player1_namebar, #player2_namebar, #player1_scoresheet, #player2_scoresheet, #player1_tiles, #player2_tiles, #fill{width:220px}



#player1_photo, #player2_photo, #player1_score, #player2_score{width:45px}



#player1_name, #player2_name{width:130px;font-size:14px}



#player1_score, #player2_score{font-size:14px}



#player1_tiles, #player2_tiles{height:35px}



#player1_scoresheet, #player2_scoresheet{height:450px}



#board_area{width:460px}



#navigation{width:460px;height:30px}



#board_container{width:460px;height:420px}



#board_left{width:20px;height:420px}



#board_right{width:20px;height:420px}



#board_bottom{width:460px;height:20px}



#board{width:420px;height:420px}



td, tr, th{width:25px;height:25px}



td.bP, td.bP1, td.bZ, td.bZ1{font-size:16px}



td.bT1, td.bT2, td.bT3, td.bT4{font-size:12px;height:15px}



tr.BT{height:15px}



td.bT3, td.bT4{width:30px}



td.bN, td.bN2{font-size:12px}



td.bN2{width:50px}



}



@media all and (max-width: 999px)

{



#container, #game_area, #player1, #player2, #board_area{height:500px}



#game_area{width:760px}



#player1, #player2, #player1_namebar, #player2_namebar, #player1_scoresheet, #player2_scoresheet, #player1_tiles, #player2_tiles, #fill{width:180px}



#player1_photo, #player2_photo, #player1_score, #player2_score{width:40px}



#player1_name, #player2_name{width:100px;font-size:12px}



#player1_score, #player2_score{font-size:10px}



#player1_tiles, #player2_tiles{height:32px}



#player1_scoresheet, #player2_scoresheet{height:350px}



#board_area{width:400px}



#navigation{width:400px;height:30px}



#board_container{width:400px;height:370px}



#board_left{width:15px;height:370px}



#board_right{width:15px;height:370px}



#board_bottom{width:400px;height:15px}



#board{width:370px;height:370px}



td, tr, th{width:22px;height:22px}



td.bP, td.bP1, td.bZ, td.bZ1{font-size:14px}



td.bT1, td.bT2, td.bT3, td.bT4{font-size:8px;height:11px}



tr.BT{height:11px}



td.bT3, td.bT4{width:30px}



td.bN, td.bN2{font-size:12px}



td.bN2{width:50px}



}