/* Explorations in Typography website ---------

@version:	0.1g
@date:		10.10.2010
@author:	Gregory Cadars                   */

/* - General ------------- */

* {margin:0;padding:0;} /* lazy reset */
.wf-loading {visibility:hidden;} /* dealing with the FOUT */

html {height:100%;}
html#home {	-webkit-animation-name:fade-in;-webkit-animation-duration:1.5s;}
@-webkit-keyframes fade-in {0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}}

body {
	color:#2a2a21;
	height:100%;
	border-top:1px solid #86837f;
	background:#f9f9f9;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif;
	font-size:16px;line-height:1.5;
	/*text-rendering: optimizeLegibility;*/
	}

a {color:#2a2a21;text-decoration:none;-webkit-transition:all .08s ease-out;-moz-transition:all .08s ease-out;}
a img {border:0 none;}
a:focus {outline:none;}

::selection		{background:#fcffba;color:#2a2a21;}
::-moz-selection{background:#fcffba;color:#2a2a21;}


/* - Layout ------------- */

#all {width:920px;margin:0 auto;}
#one {width:150px;float:left;margin:0 40px 0 0;line-height:1.4em;padding:5em 0 0 0; position: relative; }
#two {width:490px;height:100%;float:left;margin:0 19px 0 0;background:#fff url(../img/grid.png);padding:5em 21px 8em 20px;}
#three {width:178px;float:left;padding:5em 0 0 0;}
#four {width:660px;height:100%;float:left;background:#fff url(../img/grid.png);padding:5em 21px 8em 20px;}

.col1,.col2,.col3,.col4 {position:relative;}
.col4, .col5 {
	float:left; width:150px;
}
.col5 {
	float: right;
}
.line {padding:1em 0 0 20px;margin:0 0 1em -20px;border-bottom:1px solid #eee;}
.clear {height:1px;clear:both;}


/* - Elements ------------- */

h1, h2 {font-size:1em;margin:0 0 .4em 0;padding:0 0 .6em 0;border-bottom:1px solid #eee;}
h1 span {font-weight:normal;}
h1 a {color:#e7900f;}
h1 a:hover {color:#2a2a21;}

h2 {color:#e7900f;padding:.0 0 .6em 20px;margin:-1px 0 .6em -20px;}
p#authors {color:#86837f;line-height:1.2em;margin:0 0 2em 0;}

h3 {font-size:1em;}

#two p {line-height:1.5;text-indent:1em;}
#two p a, .link {border-bottom:1px solid #ddd;}
#two p a:hover, .link:hover {color:#e7900f;border-color:#e7900f;}
#two p#first {text-indent:0;}
/*p.first:first-letter {font-size:5.1em;float:left;margin:.27em .1em 0 -.08em;color:#86837f;}*/
#three ul {list-style:none;}
#three ul li {position:relative;margin:0 0 .4em 0;}
#three ul li a {border-bottom:1px solid #ddd;color:#86837f;}
#three ul li a:hover {border-color:#666;color:#666;}
#three ul li:before {content:'»';position:absolute;left:-.9em;}
#three h2 {font-weight:normal;color:#86837f;}

p small {font-size:.8em;}

/* Definition lists */

dl {width:320px;font-size:.9em;float:left;line-height:1.6em;}
dt {font-weight:bold;padding:1.2em 0 0 0;clear:both;}
dt br {display:none;}
dd {width:150px;margin:0 20px 0 0;float:left;}
dl a {border-bottom:1px solid #eee;}
dl a:hover {color:#e7900f;}

/* Masonry definition lists 
dl {width:150px;font-size:.9em;float:left;margin:.2em 20px 1.2em 0;}
dt {font-weight:bold;}
dd a {line-height:1.6em;}
dl a {border-bottom:1px solid #eee;}
dl a:hover {color:#e7900f;}
*/

.inner_col1, .inner_col2, .inner_col3, .inner_col4 { float: left; width: 170px; }

#inner_two_col { display: none; }
#inner_three_col { display: none; }
#inner_four_col { display: none; }

dl.glossary {width:150px;font-size:.9em;margin:.2em 20px 1.2em 0;}
dl.glossary dt {padding:0;}
dl.glossary {
	margin:.2em 20px 0 0;
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	float: none;
}
dl.glossary dt {color:#e7900f;}
dl.glossary dd {margin:0 0 .6em 0;}

ol {clear:both;list-style:none;padding:0 0 2em 0;font-size:.8em;color:#86837f;}
ol li {position:relative;margin:0 0 .4em 0;}
ol li:before {content:'»';position:absolute;left:-1em;}
ol li a {color:#86837f;border-bottom:1px solid #ddd;}
ol li a:hover {color:#e7900f;border-color:#e7900f;}

#two.tindex {overflow:hidden;}
#two.tindex p {font-size:.8em;width:150px;display:block;margin:.3em 20px 1.2em 0;text-indent:0;}
#index img {float:left;margin:0 0 .1em 0;}
#index {width:520px;}

#two form {padding-top:1em;clear:both;}
table {width:100%;margin:0;overflow:hidden;background:#fff;}
th {background:#f1f1f1;font-size:.7em;color:#86837f;text-transform:uppercase;font-weight:bold;letter-spacing:1px;padding:.4em 0;}
td {padding:.5em 0;}
td, th {text-align:left;vertical-align:top;border-bottom:1px solid #eee;}
td del {font-weight:bold;}
td strong {color:#e7900f}
td input, .popup input {cursor:default;background:#eee;border:1px solid #eee;color:#fff;font-size:.85em;line-height:1;padding:.2em .5em .4em .5em;}
td input.ready, .popup input.ready {cursor:pointer;background:#e7900f;border:1px solid #e7900f;}
td input.ready:hover, .popup input.ready:hover {background:#fff;border:1px solid #e7900f;color:#e7900f;}
td select {width:200px;margin:0 .4em 0 0;
	background-image:url(../img/select_arrow_font.gif);color:#e7900f;border-color:transparent #f4e3d7 #edd3a3 transparent;}
td#total {font-weight:bold;}

/* - Navigation ------------- */

ul#nav {list-style:none;font-size:.85em;margin:0 0 .8em 0;line-height:2em}
ul#nav li a {border-bottom:1px solid #eee;}
ul#nav li a.selected {font-weight:bold;border-color:#2a2a21;}
ul#nav li a:hover.selected {cursor:default;color:#2a2a21;border-color:#2a2a21;}
ul#nav li a:hover {color:#e7900f;border-bottom:1px solid #e7900f;}

a.logo {background-image:url(../img/logos.png);background-repeat:no-repeat;margin:0 .5em 3em 0;float:left;
	-webkit-transition:none;-moz-transition:none;text-indent:-9999px;display:block;height:23px;}
a.oneoone {width:23px;background-position:top left;}
a.oneoone:hover {background-position:bottom left;}
a.fontfont {width:67px;background-position:top right;}
a.fontfont:hover {background-position:bottom right;}

/* books and app icons */
#buylinks {
	position: relative;
	height: 192px;
    margin: 38px 0 12px;
    width: 148px;
}

a#book {
	background:#fff;display:block;position:absolute;color:#ddd;
	bottom:0px;
	/* left:-25px; */
	border:1px solid #ddd;text-align:center;margin:0 0 1em 0;
	box-shadow:0px 2px 4px rgba(0,0,0,.3);-webkit-box-shadow:0px 2px 4px rgba(0,0,0,.3);-moz-box-shadow:0px 2px 4px rgba(0,0,0,.3);}
a:hover#book {border:1px solid #ccc;box-shadow:0px 2px 8px rgba(0,0,0,.3);-webkit-box-shadow:0px 2px 8px rgba(0,0,0,.3);-moz-box-shadow:0px 2px 8px rgba(0,0,0,.3);}

a#book img {float:left;}
a#book em:first-letter { letter-spacing: 1px; }
a#book em {
	-webkit-transition:background .1s ease-in;
	-moz-transition:background .1s ease-in;
	font-size:.85em;
	position:absolute;bottom:-.6em;left:-.6em;
	font-style:normal;text-align:center;
	padding:.1em .52em .22em .52em;background:#2a2a21;color:#fff;
	-webkit-border-radius:.1em;-moz-border-radius:.1em;
	-webkit-box-shadow:0px 2px 4px rgba(0,0,0,.2);-moz-box-shadow:0px 2px 4px rgba(0,0,0,.2);
	z-index: 20;
	}
a:hover#book em:first-letter { letter-spacing: normal; }
a:hover#book em {background:#e7900f;}
a:hover#book em span {display:none;}
a:hover#book em:after {content:'Purchase';line-height:1;}


a#app {
	background:#fff;display:block;position:absolute;color:#ddd;
	right:-26px;
	bottom: 1px;
	border:1px solid #ddd;text-align:center;margin:0 0 1em 0;
	box-shadow:0px 2px 4px rgba(0,0,0,.3);-webkit-box-shadow:0px 2px 4px rgba(0,0,0,.3);-moz-box-shadow:0px 2px 4px rgba(0,0,0,.3);
	border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border: 0px solid #800000;
}
a:hover#app {
	border:1px solid #ccc;box-shadow:0px 2px 8px rgba(0,0,0,.3);-webkit-box-shadow:0px 2px 8px rgba(0,0,0,.3);-moz-box-shadow:0px 2px 8px rgba(0,0,0,.3);
	border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border: 0px solid #800000;
}

a#app img {float:right;}
a#app em:first-letter { letter-spacing: 1px; }
a#app em {
	-webkit-transition:background .1s ease-in;
	-moz-transition:background .1s ease-in;
	font-size:.85em;
	position:absolute;bottom:-.6em;left:-.6em;
	font-style:normal;text-align:center;
	padding:.1em .52em .22em .52em;background:#2a2a21;color:#fff;
	-webkit-border-radius:.1em;-moz-border-radius:.1em;
	-webkit-box-shadow:0px 2px 4px rgba(0,0,0,.2);-moz-box-shadow:0px 2px 4px rgba(0,0,0,.2);
	}
a:hover#app em:first-letter { letter-spacing: normal; }
a:hover#app em {background:#e7900f;}
a:hover#app em span {display:none;}
a:hover#app em:after {content:'Purchase';line-height:1;}


/* - Inputs ------------- */

select, input {
	color: #666;background-color: #fff;border: 1px solid;border-color: transparent #eee #ddd transparent;
	margin:0 0 .4em 0;
	font-size:.8em;line-height:1.1;
	font-family: "ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif;
	-webkit-appearance: none;-moz-appearance: none;-moz-border-radius: 0;-webkit-border-radius: 0;border-radius: 0;
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
	/* IE7 */*padding-top: 1px;*padding-bottom: 1px;*height: auto;
}

input {padding:0 .4em .2em .4em;border-top:0 none;}
select {width:100%;padding:0 0 0 .4em;line-height:1.7;background-image: url(../img/select_arrow.gif);background-repeat: no-repeat;background-position: right center;}

label {font-size:.65em;letter-spacing:1px;text-transform:uppercase;padding: .4em 0;}
.tools label.title, .extra label.title, .note label.title {font-size:.7em;padding: .6em 0;color:#86837f;width:100%;float:none;display:block;font-weight:bold;}

select {font-family:'Lucida Grande';font-size:12px;}

/* - Tooltips ------------- */

.col1:hover a.tt, .col2:hover a.tt
{border:2px solid #e7900f!important;color:#e7900f;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0px 1px 2px rgba(0,0,0,.2);box-shadow:0px 1px 2px rgba(0,0,0,.2);}

a.tt {cursor:default;z-index:1000;font-family:"ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif;color:#ddd;line-height:1.3em;font-size:16px!important;height:1.4em;width:1.4em;
background:#fff;display:block;text-indent:0;border:2px solid #ddd!important;position:absolute;text-align:center;
-webkit-border-radius:1.4em;-moz-border-radius:1.4em;border-radius:1.4em}
	
a.tt.right {right:-33px;}
a.tt.left {left:-33px;}
#two a:hover.tt {border:2px solid #2a2a21!important;color:#2a2a21;}
.tt.special, .tt.ciao, .tt.special.ciao {display:none;}

#tooltip {top:-100%;font-family:"ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif;position:absolute;z-index:900;background:#fff;border:1px solid #edd3a3;color:#e7900f;
width:149px;padding:6px 10px 10px 10px;font-size:13px!important;text-indent:0;text-align:left!important;
-webkit-box-shadow:0px 0px 4px rgba(0,0,0,.1);-moz-box-shadow:0px 0px 4px rgba(0,0,0,.1);box-shadow:0px 0px 4px rgba(0,0,0,.1);
}

.left #tooltip {left:31px;}
.right #tooltip {right:30px;}

/* Overlay (not used) */

.overlay {-webkit-box-shadow:0px 0px 4px rgba(0,0,0,.1);-moz-box-shadow:0px 0px 4px rgba(0,0,0,.1);
border:1px solid #e7900f;width:320px;padding:1.3em;z-index:9999;
background:#fff url(../img/close.png) no-repeat 325px 20px;position:absolute;top:120px;left:30%;}
.overlay p {color:#e7900f;font-size:.85em;margin:0 0 1em 0;}

/* Tools & notes */

.fmore, .fmore div {display:none;}
.fmore div#Indent {display:block;}

.tools {clear:both;text-shadow:1px 1px 0 #fff;background:#f6f6f6;color:#86837f;border:1px solid #f1f1f1;
	padding:.1em .8em .3em .8em;margin:0 0 20px 0;}
.tools select {color:#2a2a21;}

.tools p, .tools ul {color:#86837f;font-size:.8em;line-height:1.6em;margin:0 0 .4em 0;}
.tools p a {color:#86837f;border-bottom:1px solid #ddd;display:inline-block;margin:0 0 .2em 0;}
.tools p a:hover {color:#666;border-color:#666;}

.extra {float:left;padding-top:.2em;}
.extra img.updown {background:#f6f6f6;border-right: 1px solid #eee;border-bottom: 1px solid #ddd;}
.extra img.updown:hover {background:#f1f1f1;}
.extra label {width:60px;float:left;}
.extra select {color:#666;width:90px;float:left;}
.extra input {width:72px;float:left;-moz-user-select:none;-webkit-user-select:none;}

.extra input[type="button"], .button {display:block;border:0 none;margin:0 8px 0 0;color:#fff;text-indent:-9999px;width:16px!important;height:16px;
background:#f6f6f6 url(../img/align.png) no-repeat left 2px;cursor:pointer;}
.extra input[type="button"]:active, .extra input.selected[type="button"] {background-image:url(../img/align_on.png);}
.extra input[type="button"]:hover {-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);-moz-box-shadow:0 0 3px rgba(0,0,0,.2);}

.extra input[type="checkbox"], .checkbox {-moz-appearance:checkbox;
margin:0 0 .3em 60px;width:16px;height:20px;background:url(../img/check.png) no-repeat left top;border:0 none;}
.extra input[type="checkbox"]:checked {background-position:left -20px;}

label#hyphenate {float:right;width:74px;}
.tools.exploration {padding-right:0px;padding-bottom:0px;border-color:transparent transparent transparent #f1f1f1;background:none;}
.tools.exploration select {width:150px;}
.tools.exploration p.more {font-size:.75em;}
.tools.exploration p.more a {color:#2a2a21;border:0 none;}
.tools.exploration p.more a span {border-bottom:1px solid #ddd;}
.tools.exploration p.more a:after {margin:0 0 0 .4em;color:#86837f;}
.tools.exploration p.more a.active:after {content:' x';}
.tools.newsletter {overflow:hidden; margin:14px 0 9px 0;}
.tools.newsletter input[type="text"] {float:left;padding:.1em .3em;width:80%;}
.tools.newsletter input[type="submit"], .tools.newsletter input.submit {background:#f1f1f1;width:20%;float:left;font-weight:bold;border-right:1px solid #ddd;
	text-transform:uppercase;font-size:.65em;letter-spacing:1px;line-height:1.7em;padding:.2em .3em .3em .3em;}
.tools.plain {padding:0;border:0 none;background:transparent;}

p#icons {
	display: block;
	margin-top: 33px;
}

.popup {
	height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20;
    display:none;
}
.greyout {
	background: none repeat scroll 0 0 #888888;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 25;
}
.msg {
	background: none repeat scroll 0 0 #F1F1F1;
	border: 1px solid #edd3a3;
	left: 50%;
	margin: -275px;
	padding: 20px;
	position: absolute;
	top: 50%;
	width: 500px;
	z-index: 30;
}
.popup h1 {
	color:#E7900F;
}
.popup a {
	border-bottom:1px solid #DDDDDD;
}
.popup a:hover {
	color:#E7900F;
	border-bottom:1px solid #E7900F;
}
#popup_ok {
	float:right;
	margin-top:30px;
}

#align {padding:4px 0 0 0;height:19px;margin:0 0 .4em 0;float:left;}

#fleft.button {}
#justify.button {background-position:-23px 2px;}
#center.button {background-position:-48px 2px;}
#fright.button {background-position:-73px 2px;margin:0;}

div.note {
clear:both;line-height:1.3;font-family:"ff-meta-web-pro-1","ff-meta-web-pro-2",sans-serif;
padding:.3em .8em 1.2em .8em;border:1px solid #edd3a3;color:#e7900f;
background:#f9f9f9;margin:0 0 20px 0;}

.note a {font-weight:bold;border-bottom:1px solid #edd3a3;color:#e7900f;}
.note a:hover {border-bottom:1px solid #e7900f;}
.note div {display:none;}
.note label.title {color:#e7900f;}
.note select {background-color:transparent;background-image:url(../img/select_arrow_font.gif);
	font-weight:bold;color:#e7900f;border-color:transparent #f4e3d7 #edd3a3 transparent;}

a.exp1, a.exp2, a.exp3, a.exp4, a.exp5, a.exp6, a.exp7
{visibility:hidden;}
#two.exp1 a.exp1, #two.exp2 a.exp2, #two.exp3 a.exp3, #two.exp4 a.exp4, #two.exp5 a.exp5, #two.exp6 a.exp6, #two.exp7 a.exp7 
{visibility:visible;}

/* - Slideshow ------------- */

.imgsw_viewport {height:318px;clear:both;padding:1.5em 0 .6em 0;cursor:pointer;}
.imgsw_viewport img {width:100%;-webkit-box-shadow:0 0 4px rgba(0,0,0,.2);-moz-box-shadow:0px 2px 4px rgba(0,0,0,.2);}
.imgsw_list_thumbnails img:hover {border:1px solid #e7900f;}
.imgsw_list_thumbnails img {border:1px solid #eee;}
.imgsw_list_thumbnails a.active img {border-color:#2a2a21;}
.imgsw_list_thumbnails {margin:0 0 1.2em -10px;}
.imgsw_list_thumbnails img {float:left;width:48px;margin:0 0 10px 10px;}

img.large {width:100%;margin:0 0 .2em 0;}
a:hover img.large {opacity:.9;}


/* - Text options ------------- */

/* Typefaces */
.Chaparral	{font-family:"chaparral-pro-1","chaparral-pro-2";font-style:italic;}
.Courier	{font-family:"Courier New",Courier,monospace;}
.Dagny		{font-family:"ff-dagny-web-pro-1","ff-dagny-web-pro-2";}
.Dax		{font-family:"ff-dax-web-pro-1","ff-dax-web-pro-2";}
.Garamond	{font-family:"adobe-garamond-pro-1","adobe-garamond-pro-2";}
.Georgia	{font-family:Georgia,serif;}
.Helvetica	{font-family:'Helvetica Neue',Helvetica;font-weight:bold;}
.Meta		{font-family:"ff-meta-web-pro-1","ff-meta-web-pro-2";}
.Myriad		{font-family:"myriad-pro-1","myriad-pro-2";}
.Speak		{font-family:"ff-speak-web-1","ff-speak-web-2";}
.Tisa		{font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2";}
.Typestar	{font-family:"ff-typestar-black-web-1","ff-typestar-black-web-2";}

.Chaparral,.Dax,.Speak {letter-spacing:1px;}

/* Size */
.size50		{font-size:50%;}
.size60		{font-size:60%;}
.size70		{font-size:70%;}
.size80		{font-size:80%;}
.size90		{font-size:90%;}
.size100	{font-size:100%;}
.size110	{font-size:110%;}
.size120	{font-size:120%;}
.size130	{font-size:130%;}
.size140	{font-size:140%;}
.size150	{font-size:150%;}

/* Leading */

#two p.lh50		{line-height:1;}
#two p.lh60		{line-height:1.1;}
#two p.lh70		{line-height:1.2;}
#two p.lh80		{line-height:1.3;}
#two p.lh90		{line-height:1.4;}
#two p.lh100	{line-height:1.5;}
#two p.lh110	{line-height:1.6;}
#two p.lh120	{line-height:1.7;}
#two p.lh130	{line-height:1.8;}
#two p.lh140	{line-height:1.9;}
#two p.lh150	{line-height:2;}
#two p.lh160	{line-height:2.1;}
#two p.lh170	{line-height:2.2;}
#two p.lh180	{line-height:2.3;}
#two p.lh190	{line-height:2.4;}
#two p.lh200	{line-height:2.5;}

/* Alignment */
.fleft		{text-align:left;}
.fright		{text-align:right;}
.center		{text-align:center;}
.justify	{text-align:justify;}

/* Indentation */
#two p.in0	{text-indent:0em;}
#two p.in1	{text-indent:1em;}
#two p.in2  {text-indent:2em;}

/* Outdentation */
#two p.out0, #two p#first.out0 {text-indent:0em;}
#two p.out1, #two p#first.out1 {text-indent:-1em;margin-left:1em;}
#two p.out2, #two p#first.out2 {text-indent:-2em;margin-left:2em;}
#two p.out3, #two p#first.out3 {text-indent:-3em;margin-left:3em;}
#two p.out4, #two p#first.out4 {text-indent:-4em;margin-left:4em;}
#two p.out5, #two p#first.out5 {text-indent:-5em;margin-left:5em;}
#two p.out6, #two p#first.out6 {text-indent:-6em;margin-left:6em;}

/* Margins */
#two p.mar1 {margin-bottom:1%}
#two p.mar2 {margin-bottom:2%}
#two p.mar3 {margin-bottom:3%}
#two p.mar4 {margin-bottom:4%}
#two p.mar5 {margin-bottom:5%}
#two p.mar6 {margin-bottom:6%}

/* Tracking */
#two p.ls-1	{letter-spacing:-1px;}
#two p.ls0	{letter-spacing:0px;}
#two p.ls1  {letter-spacing:1px;}
#two p.ls2  {letter-spacing:2px;}

/* Options */
p.mock span {color:#ccc;background:#ccc url(../img/line.png) repeat-x left bottom;}
p span.line {border-bottom:1px solid #fcffba;}

p.graphic {position:relative;}
p.graphic:before {content:'¶';position:absolute;margin-left:-14px;}

/*p.rule {border-bottom:3px solid #eee;padding-bottom:2%;}*/
p.rule {background:url(../img/rule.png) no-repeat 103% bottom;padding-bottom:.7em;margin-bottom:.3em;}
.col2 p.rule:last-child {background:none;border:0 none;}

p.initial .firstletter {font-size:200%;margin-top:-10em;line-height:.1;margin:0 0 0 -.1em;}
p.dropcap .firstword {text-transform:uppercase;font-size:300%;line-height:1;float:left;margin:0 .1em 0 -.1em;}


/* - Media queries ------------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#all {width:551px!important;margin:0 0 0 1.6em;}
/*	#all {width:280px;}
	#one {width:280px;padding-top:2em;}
	#two {width:170px;padding-top:2em;}
	#do {overflow:hidden;padding:.5em .4em .3em .4em;margin:0 0 1em 0;}
	a#book {margin:0 1em 2em 0;}
	select {width:60%;float:left;margin:0 0 .4em 0;}
	label {width:40%;float:left;}
	div.note {display:none;}*/
}


@media only screen and (max-width : 1180px) {
	#inner_two_col { display: none; }
	#inner_three_col { display: block; }
	#inner_four_col { display: none; }
	.col3 {
		position: relative;
		margin:0 20px 0 0;
		float:left;
		width:320px;
	}
}

@media only screen and (max-width : 800px) {	
	#all {width:551px!important;}
	#two {width:320px;margin:0;float:right;}
	#three {width:150px;padding:20px 0 0 0;}
	.extra label {width:53px;}
	.extra input {width:52px!important;}
	.extra select {width:70px!important;}
	.tools.exploration select {width:123px;}
	#align .button {margin:0 1px 0 0;}
	.extra input[type="checkbox"], .checkbox {width:20px!important;margin:0 0 .4em 0;}
	label#hyphenate {float:left;width:66px;}
	.imgsw_viewport {height:207px!important;}
	td select {width:170px;}
	#inner_two_col { display: block; }
	#inner_three_col { display: none; }
	#inner_four_col { display: none; }
}

@media only screen and (max-width : 1000px) {
	#all {width:750px;}
	#two {width:320px;}
	#index {width:340px;}
	.col3 {
		position: relative;
		margin:0 20px 0 0;
		float:left;
		width:150px;
	}
	.imgsw_viewport {height:207px;}
	td input {width:68px;}
	td del {display:none;}
	td select {width:170px;}
	
	#inner_two_col { display: block; }
	#inner_three_col { display: none; }
	#inner_four_col { display: none; }
}


@media only screen and (min-width : 1180px) {	
	#all {width:1090px;}
	#two {width:660px;}
	#index {width:680px;}
	.col1 {margin:0 20px 0 0;}
	.col1,.col2 {float:left;width:320px;}
	.col3 {
		position: relative;
		margin:0 20px 0 0;
		float:left;
		width:490px;
	}
	.tt.special {display:block;}
	.imgsw_viewport {height:428px;}
	.col1 p.rule:last-child {background:none;border:0 none;}
	
	#inner_two_col { display: none; }
	#inner_three_col { display: none; }
	#inner_four_col { display: block; }
}

@media only screen and (min-width : 1600px) {
	#inner_two_col { display: none; }
	#inner_three_col { display: none; }
	#inner_four_col { display: block; }

	#all {width:1430px;}
	#two {width:1000px;}
	#index {width:1020px;}
	.col1 {margin:0 20px 0 0;}
	.col1,.col2 {float:left;width:490px;}
	.col3 {
		position: relative;
		margin:0 20px 0 0;
		float:left;
		width:830px;
	}
	.tt.special {display:block;}
	.imgsw_viewport {height:649px;}	
}