@charset "utf-8"; /* #################################################################################################### # Layout Cascading Style Sheets - KATANA Ver.1.0 # CSS coding: curious epicurean; vincent. # Copyright (c) 2007 Art Studio Vincent All rights reserved. #################################################################################################### # Total: 8 Patterns #################################################################################################### # --- fixed type (#global_container width:800px; #left_block, #right_block width:180px; fixed) 1) fixed_no_column ----------- #left_block, # right_block display:none; 2) fixed_two_column_left ----- #right_block display:none; 3) fixed_two_column_right ---- #left_block display:none; 4) fixed_three_column --------- all elements visibile; #################################################################################################### # --- liquid type (#global_container width:100%; #left_block, #right_block width:180px; fixed) 5) liquid_no_column ---------- #left_block, # right_block display:none; 6) liquid_two_column_left ---- #right_block display:none; 7) liquid_two_column_right --- #left_block display:none; 8) liquid_three_column -------- all elements visibile; #################################################################################################### ex) #################################################################################################### */ /* #################################################################################################### # fixed type #################################################################################################### */ /* #################################################################################################### # 1) fixed_no_column #################################################################################################### */ .fixed_no_column { margin:0 auto; text-align:center; /* WinIE5,6 debugs */ } .fixed_no_column #global_container { width:800px; /* Width of #global_container */ margin:0 auto; /* Centering Control #global_container on Document */ text-align:left; /* WinIE5,6 debugs */ } .fixed_no_column #header { margin:0; } .fixed_no_column #body_wrapper { width:100%; float:left; margin:0; } .fixed_no_column #content_block { margin:0; } .fixed_no_column #left_block { display:none; /* Not visibility hidden */ margin:0; } .fixed_no_column #right_block { display:none; /* Not visibility hidden */ margin:0; } /* #################################################################################################### # 2) fixed_two_column_left (custom) #################################################################################################### */ .fixed_two_column_left { margin:0 auto; text-align:center; /* WinIE5,6 debugs */ } .fixed_two_column_left #global_container { width:800px; /* Width of #global_container */ margin:0 auto; /* Centering Control #global_container on Document */ text-align:left; /* WinIE5,6 debugs */ } .fixed_two_column_left #header { margin:0; } .fixed_two_column_left #body_wrapper { width:100%; float:left; margin:0; } .fixed_two_column_left #content_block { width:560px; /* WinIE5,6 debugs */ margin:0 0 0 180px; /* Set left-margin to #left_block Width */ } .fixed_two_column_left #left_block { width:180px; /* Width of #left_block */ float:left; margin:0 0 0 -800px; /* Set left-margin to -(#global_container Width) negative-margin */ } .fixed_two_column_left #right_block { display:none; /* Not visibility hidden */ margin:0; } /* #################################################################################################### # 3) fixed_two_column_right (custom) #################################################################################################### */ .fixed_two_column_right { margin:0 auto; text-align:center; /* WinIE5,6 debugs */ } .fixed_two_column_right #global_container { width:800px; /* Width of #global_container */ margin:0 auto; /* Centering Control #global_container on Document */ text-align:left; /* WinIE5,6 debugs */ } .fixed_two_column_right #header { margin:0; } .fixed_two_column_right #body_wrapper { width:100%; float:left; margin:0; } .fixed_two_column_right #content_block { width:560px; /* WinIE5,6 debugs */ margin:0 180px 0 0; /* Set right-margin to #right_block Width */ } .fixed_two_column_right #left_block { display:none; /* Not visibility hidden */ margin:0; } .fixed_two_column_right #right_block { width:180px; /* Width of #right_block */ float:left; margin:0 0 0 -180px; /* Set left-margin to -(#right_block Width) negative-margin */ } /* #################################################################################################### # 4) fixed_three_column #################################################################################################### */ .fixed_three_column { margin:0 auto; text-align:center; /* WinIE5,6 debugs */ } .fixed_three_column #global_container { width:800px; /* Width of #global_container */ margin:0 auto; /* Centering Control #global_container on Document */ text-align:left; /* WinIE5,6 debugs */ } .fixed_three_column #header { margin:0; } .fixed_three_column #body_wrapper { width:100%; float:left; margin:0; } .fixed_three_column #content_block { width:440px; /* WinIE5,6 debugs */ margin:0 180px 0 180px; /* Margins for #content_block. Should be 0 #right_block Width 0 #left_block Width */ } .fixed_three_column #left_block { width:180px; /* Width of #left_block in pixel */ float:left; margin:0 0 0 -800px; /* Set left-margin to -(#global_container Width) negative-margin */ } .fixed_three_column #right_block { width:180px; /* Width of #right_block */ float:left; margin:0 0 0 -180px; /* Set left-margin to -(#right_block Width) negative-margin */ } /* #################################################################################################### # liquid type #################################################################################################### */ /* #################################################################################################### # 5) liquid_no_column #################################################################################################### */ .liquid_no_column { margin:0; } .liquid_no_column #global_container { width:100%; /* Width of #global_container */ margin:0; } .liquid_no_column #header { margin:0; } .liquid_no_column #body_wrapper { width:100%; float:left; margin:0; } .liquid_no_column #content_block { margin:0; } .liquid_no_column #left_block { display:none; /* Not visibility hidden */ margin:0; } .liquid_no_column #right_block { display:none; /* Not visibility hidden */ margin:0; } /* #################################################################################################### # 6) liquid_two_column_left #################################################################################################### */ .liquid_two_column_left { margin:0; } .liquid_two_column_left #global_container { width:100%; /* Width of #global_container */ margin:0; } .liquid_two_column_left #header { margin:0; } .liquid_two_column_left #body_wrapper { width:100%; float:left; margin:0; } .liquid_two_column_left #content_block { margin:0 0 0 180px; /* Set left-margin to #left_block Width */ } .liquid_two_column_left #left_block { width:180px; /* Width of #left_block */ float:left; margin:0 0 0 -100%; /* Set left-margin to -(#global_container Width) negative-margin */ } .liquid_two_column_left #right_block { display:none; /* Not visibility hidden */ margin:0; } /* #################################################################################################### # 7) liquid_two_column_right #################################################################################################### */ .liquid_two_column_right { margin:0; } .liquid_two_column_right #global_container { width:100%; /* Width of #global_container */ margin:0; } .liquid_two_column_right #header { margin:0; } .liquid_two_column_right #body_wrapper { width:100%; float:left; margin:0; } .liquid_two_column_right #content_block { margin:0 180px 0 0; /* Set right-margin to #right_block Width */ } .liquid_two_column_right #left_block { display:none; /* Not visibility hidden */ margin:0; } .liquid_two_column_right #right_block { width:180px; /* Width of #right_block */ float:left; margin:0 0 0 -180px; /* Set left-margin to -(#right_block Width) negative-margin */ } .liquid_two_column_right #footer { width:100%; /* WinIE5,6 debugs */ clear:left; margin:0; } /* #################################################################################################### # 8) liquid_three_column #################################################################################################### */ .liquid_three_column { margin:0; } .liquid_three_column #global_container { width:100%; /* Width of #global_container */ margin:0; } .liquid_three_column #header { margin:0; } .liquid_three_column #body_wrapper { width:100%; float:left; margin:0; } .liquid_three_column #content_block { margin:0 180px 0 180px; /* Margins for #content_block. Should be 0 #right_block Width 0 #left_block Width */ } .liquid_three_column #left_block { width:180px; /* Width of #left_block */ float:left; margin:0 0 0 -100%; /* Set left-margin to -(#global_container Width) negative-margin */ } .liquid_three_column #right_block { width:180px; /* Width of #right_block */ float:left; margin:0 0 0 -180px; /* Set left-margin to -(#right_block Width) negative-margin */ } .liquid_three_column #footer { width:100%; /* WinIE5,6 debugs */ clear:left; margin:0; } /* #################################################################################################### # Margins for inner DIV inside each blocks to provide padding. include WinIE5,6 hack #################################################################################################### */ #header_inner_padding, #footer_inner_padding { margin:0 10px; padding:10px 0; } .fixed_no_column #header_inner_padding, .fixed_two_column_left #header_inner_padding, .fixed_two_column_right #header_inner_padding, .fixed_three_column #header_inner_padding, .fixed_no_column #footer_inner_padding, .fixed_two_column_left #footer_inner_padding, .fixed_two_column_right #footer_inner_padding, .fixed_three_column #footer_inner_padding { width:auto !important; width:780px; width/**/:/**/780px; } #content_block_inner_padding { margin:0 25px; padding:0; } .fixed_two_column_left #content_block_inner_padding, .fixed_two_column_right #content_block_inner_padding { /* Custom */ width:auto !important; width:500px; width/**/:/**/500px; } .fixed_three_column #content_block_inner_padding { width:auto !important; width:420px; width/**/:/**/420px; margin:0 10px; padding:0; } #left_block_inner_padding { width:auto !important; width:170px; width/**/:/**/170px; margin-left:10px; padding:20px 0; } #right_block_inner_padding { width:auto !important; width:170px; width/**/:/**/170px; margin-right:10px; padding:20px 0; } .fixed_two_column_left #right_block_inner_padding, .fixed_two_column_right #left_block_inner_padding, .liquid_two_column_left #right_block_inner_padding, .liquid_two_column_right #left_block_inner_padding { display:none; } /* #################################################################################################### # multi-calumn .class # as common multi-column Container #################################################################################################### */ .container_wrapper { width:100%; /*float:left;*/ margin:0 0 10px; } .container_wrapper:after { height:0; clear:both; content:"."; display:block; visibility:hidden; } .container_wrapper { display:inline-block; } /* Hides from IE-mac \*/ *html .container_wrapper { height:1%; } .container_wrapper { display:block; } /* End hide from IE-mac */ .float_left { width:auto; float:left; margin:0; padding:0; } .float_right { width:190px; float:right; margin:0; padding:0; height: 68px; overflow: hidden; } .column_bg_left { margin:0 5px 0 0; padding:5px; } .column_bg_center { margin:0 5px 0; padding:5px; } .column_bg_right { margin:0 0 0 5px; padding:5px; }