wp/wp-includes/css/media-views.css
changeset 5 5e2f62d02dcd
parent 0 d970ebf37754
child 7 cf61fcea0001
equal deleted inserted replaced
4:346c88efed21 5:5e2f62d02dcd
     1 /**
     1 /**
     2  * Base Styles
     2  * Base Styles
     3  */
     3  */
       
     4 .media-modal * {
       
     5 	-webkit-box-sizing: content-box;
       
     6 	-moz-box-sizing: content-box;
       
     7 	box-sizing: content-box;
       
     8 }
       
     9 
       
    10 .media-frame input,
       
    11 .media-frame select,
       
    12 .media-frame textarea {
       
    13     -webkit-box-sizing: border-box;
       
    14     -moz-box-sizing: border-box;
       
    15     box-sizing: border-box;
       
    16 }
       
    17 
     4 .media-modal,
    18 .media-modal,
     5 .media-frame {
    19 .media-frame {
     6 	font-family: sans-serif;
    20 	font-family: "Open Sans", sans-serif;
     7 	font-size: 12px;
    21 	font-size: 12px;
       
    22 	-webkit-overflow-scrolling: touch;
     8 }
    23 }
     9 
    24 
    10 .media-frame input,
    25 .media-frame input,
    11 .media-frame textarea {
    26 .media-frame textarea {
    12 	padding: 6px 8px;
    27 	padding: 6px 8px;
    13 	line-height: 16px;
       
    14 }
    28 }
    15 
    29 
    16 .media-frame select,
    30 .media-frame select,
    17 .wp-admin .media-frame select {
    31 .wp-admin .media-frame select {
    18 	line-height: 28px;
    32 	line-height: 28px;
    27 .media-frame a:hover {
    41 .media-frame a:hover {
    28 	color: #d54e21;
    42 	color: #d54e21;
    29 }
    43 }
    30 
    44 
    31 .media-frame a.button {
    45 .media-frame a.button {
    32 	color: #333;
    46 	color: #32373c;
    33 }
    47 }
    34 
    48 
    35 .media-frame a.button:hover {
    49 .media-frame a.button:hover {
    36 	color: #222;
    50 	color: #23282d;
    37 }
    51 }
    38 
    52 
    39 .media-frame a.button-primary,
    53 .media-frame a.button-primary,
    40 .media-frame a.button-primary:hover {
    54 .media-frame a.button-primary:hover {
    41 	color: #fff;
    55 	color: #fff;
    47 .media-frame input[type="search"],
    61 .media-frame input[type="search"],
    48 .media-frame input[type="email"],
    62 .media-frame input[type="email"],
    49 .media-frame input[type="url"],
    63 .media-frame input[type="url"],
    50 .media-frame textarea,
    64 .media-frame textarea,
    51 .media-frame select {
    65 .media-frame select {
    52 	font-family: sans-serif;
    66 	font-family: "Open Sans", sans-serif;
    53 	font-size: 12px;
    67 	font-size: 12px;
    54 	-moz-box-sizing: border-box;
       
    55 	-webkit-box-sizing: border-box;
       
    56 	-ms-box-sizing: border-box; /* ie8 only */
       
    57 	box-sizing: border-box;
       
    58 	-webkit-border-radius: 3px;
       
    59 	border-radius: 3px;
       
    60 	border-width: 1px;
    68 	border-width: 1px;
    61 	border-style: solid;
    69 	border-style: solid;
    62 	border-color: #dfdfdf;
    70 	border-color: #dfdfdf;
       
    71 }
       
    72 
       
    73 .media-frame input[type="text"]:focus,
       
    74 .media-frame input[type="password"]:focus,
       
    75 .media-frame input[type="number"]:focus,
       
    76 .media-frame input[type="search"]:focus,
       
    77 .media-frame input[type="email"]:focus,
       
    78 .media-frame input[type="url"]:focus,
       
    79 .media-frame textarea:focus,
       
    80 .media-frame select:focus {
       
    81 	border-color: #5b9dd9;
    63 }
    82 }
    64 
    83 
    65 .media-frame select {
    84 .media-frame select {
    66 	height: 24px;
    85 	height: 24px;
    67 	padding: 2px;
    86 	padding: 2px;
    80 
    99 
    81 .media-frame :-moz-placeholder {
   100 .media-frame :-moz-placeholder {
    82    color: #a9a9a9;
   101    color: #a9a9a9;
    83 }
   102 }
    84 
   103 
    85 /* Enable draggable on IE10 touch events until it's rolled into jQuery UI core */
   104 .media-frame .hidden {
    86 .ui-sortable,
   105 	display: none;
    87 .ui-draggable {
   106 }
       
   107 
       
   108 /*!
       
   109  * jQuery UI Draggable/Sortable 1.11.4
       
   110  * http://jqueryui.com
       
   111  *
       
   112  * Copyright jQuery Foundation and other contributors
       
   113  * Released under the MIT license.
       
   114  * http://jquery.org/license
       
   115  */
       
   116 .ui-draggable-handle,
       
   117 .ui-sortable-handle {
    88 	-ms-touch-action: none;
   118 	-ms-touch-action: none;
       
   119 	touch-action: none;
    89 }
   120 }
    90 
   121 
    91 /**
   122 /**
    92  * Modal
   123  * Modal
    93  */
   124  */
    98 	right: 30px;
   129 	right: 30px;
    99 	bottom: 30px;
   130 	bottom: 30px;
   100 	z-index: 160000;
   131 	z-index: 160000;
   101 }
   132 }
   102 
   133 
       
   134 .wp-customizer .media-modal {
       
   135 	z-index: 560000;
       
   136 }
       
   137 
   103 .media-modal-backdrop {
   138 .media-modal-backdrop {
   104 	position: fixed;
   139 	position: fixed;
   105 	top: 0;
   140 	top: 0;
   106 	left: 0;
   141 	left: 0;
   107 	right: 0;
   142 	right: 0;
   110 	background: #000;
   145 	background: #000;
   111 	opacity: 0.7;
   146 	opacity: 0.7;
   112 	z-index: 159900;
   147 	z-index: 159900;
   113 }
   148 }
   114 
   149 
       
   150 .wp-customizer .media-modal-backdrop {
       
   151 	z-index: 559900;
       
   152 }
       
   153 
   115 .media-modal-close {
   154 .media-modal-close {
   116 	position: absolute;
   155 	position: absolute;
   117 	top: 7px;
   156 	text-decoration: none;
   118 	right: 7px;
   157 	top: 10px;
       
   158 	right: 10px;
   119 	width: 30px;
   159 	width: 30px;
   120 	height: 30px;
   160 	height: 30px;
   121 	z-index: 1000;
   161 	z-index: 1000;
   122 }
   162 	-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
   123 .media-modal-close span {
   163 	transition: color .1s ease-in-out, background .1s ease-in-out;
   124 	display: block;
   164 }
   125 	margin: 8px auto 0;
   165 
   126 	width: 15px;
   166 .media-modal-close:active {
       
   167 	-webkit-box-shadow: none;
       
   168 	box-shadow: none;
       
   169 }
       
   170 
       
   171 .media-modal-close span.media-modal-icon {
       
   172 	display: block;
       
   173 	margin-top: 5px;
       
   174 	width: 30px;
   127 	height: 15px;
   175 	height: 15px;
   128 	background-position: -100px 0;
   176 	background-image: none;
       
   177 	text-align: center;
       
   178 }
       
   179 
       
   180 .media-modal-close .media-modal-icon:before {
       
   181 	content: '\f158';
       
   182 	font: normal 20px/1 'dashicons';
       
   183 	speak: none;
       
   184 	vertical-align: middle;
       
   185 	-webkit-font-smoothing: antialiased;
       
   186 	-moz-osx-font-smoothing: grayscale;
       
   187 	color: #666;
       
   188 }
       
   189 
       
   190 .media-modal-close:hover .media-modal-icon:before {
       
   191 	color: #00a0d2;
   129 }
   192 }
   130 
   193 
   131 .media-modal-close:active {
   194 .media-modal-close:active {
   132 	outline: 0;
   195 	outline: 0;
   133 }
   196 }
   138 	left: 0;
   201 	left: 0;
   139 	right: 0;
   202 	right: 0;
   140 	bottom: 0;
   203 	bottom: 0;
   141 	overflow: auto;
   204 	overflow: auto;
   142 	min-height: 300px;
   205 	min-height: 300px;
   143 	background: #fff;
   206 	-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.7);
       
   207 	box-shadow: 0 5px 15px rgba(0,0,0,0.7);
       
   208 	background: #fcfcfc;
       
   209 	-webkit-font-smoothing: subpixel-antialiased;
   144 }
   210 }
   145 
   211 
   146 .media-modal-icon {
   212 .media-modal-icon {
   147 	background-image: url(../images/uploader-icons.png);
   213 	background-image: url(../images/uploader-icons.png);
   148 	background-repeat: no-repeat;
   214 	background-repeat: no-repeat;
   181 }
   247 }
   182 
   248 
   183 .media-toolbar-secondary > .media-button,
   249 .media-toolbar-secondary > .media-button,
   184 .media-toolbar-secondary > .media-button-group {
   250 .media-toolbar-secondary > .media-button-group {
   185 	margin-right: 10px;
   251 	margin-right: 10px;
   186 	float: left;
       
   187 	margin-top: 15px;
   252 	margin-top: 15px;
   188 }
   253 }
   189 
   254 
   190 /**
   255 /**
   191  * Sidebar
   256  * Sidebar
   196 	right: 0;
   261 	right: 0;
   197 	bottom: 0;
   262 	bottom: 0;
   198 	width: 267px;
   263 	width: 267px;
   199 	padding: 0 16px 24px;
   264 	padding: 0 16px 24px;
   200 	z-index: 75;
   265 	z-index: 75;
   201 	background: #f5f5f5;
   266 	background: #f3f3f3;
   202 	border-left: 1px solid #dfdfdf;
   267 	border-left: 1px solid #ddd;
   203 	overflow: auto;
   268 	overflow: auto;
   204 	-webkit-overflow-scrolling: touch;
   269 	-webkit-overflow-scrolling: touch;
   205 }
   270 }
   206 
   271 
   207 .hide-toolbar .media-sidebar {
   272 .hide-toolbar .media-sidebar {
   208 	bottom: 0;
   273 	bottom: 0;
   209 }
   274 }
   210 
   275 
   211 .media-sidebar .sidebar-title {
   276 .media-sidebar .sidebar-title {
   212 	font-weight: 200;
       
   213 	font-size: 20px;
   277 	font-size: 20px;
   214 	margin: 0;
   278 	margin: 0;
   215 	padding: 12px 10px 10px;
   279 	padding: 12px 10px 10px;
   216 	line-height: 28px;
   280 	line-height: 28px;
   217 }
   281 }
   224 .media-sidebar .search {
   288 .media-sidebar .search {
   225 	display: block;
   289 	display: block;
   226 	width: 100%;
   290 	width: 100%;
   227 }
   291 }
   228 
   292 
   229 .media-sidebar h3 {
   293 .media-sidebar h3,
       
   294 .image-details h3 {
   230 	position: relative;
   295 	position: relative;
   231 	font-weight: bold;
   296 	font-weight: bold;
   232 	text-transform: uppercase;
   297 	text-transform: uppercase;
   233 	font-size: 12px;
   298 	font-size: 12px;
   234 	color: #777;
   299 	color: #666;
   235 	text-shadow: 0 1px 0 #fff;
       
   236 	margin: 24px 0 8px;
   300 	margin: 24px 0 8px;
   237 }
   301 }
   238 
   302 
   239 .media-sidebar .setting {
   303 .media-sidebar .setting,
       
   304 .attachment-details .setting {
   240 	display: block;
   305 	display: block;
   241 	float: left;
   306 	float: left;
   242 	width: 100%;
   307 	width: 100%;
   243 	margin: 1px 0;
   308 	margin: 1px 0;
   244 }
   309 }
   245 
   310 
   246 .media-sidebar .setting label {
   311 .media-sidebar .setting label,
   247 	display: block;
   312 .attachment-details .setting label {
   248 }
   313 	display: block;
   249 
   314 }
   250 .media-sidebar .setting .link-to-custom {
   315 
   251 	margin: 3px 0;
   316 .media-sidebar .setting .link-to-custom,
   252 }
   317 .attachment-details .setting .link-to-custom {
   253 
   318 	margin: 3px 2px 0;
   254 .media-sidebar .setting span {
   319 }
       
   320 
       
   321 .media-sidebar .setting span,
       
   322 .attachment-details .setting span {
   255 	min-width: 30%;
   323 	min-width: 30%;
   256 	margin-right: 4%;
   324 	margin-right: 4%;
   257 	font-size: 12px;
   325 	font-size: 12px;
   258 }
   326 	text-align: right;
   259 
   327 	word-wrap: break-word;
   260 .media-sidebar .setting select {
   328 }
       
   329 
       
   330 .media-sidebar .setting .name {
       
   331 	max-width: 80px;
       
   332 }
       
   333 
       
   334 .media-sidebar .setting select,
       
   335 .attachment-details .setting select {
   261 	max-width: 65%;
   336 	max-width: 65%;
   262 }
   337 }
   263 
   338 
   264 .media-sidebar .setting input[type="checkbox"] {
   339 .media-sidebar .setting input[type="checkbox"],
   265 	width: auto;
   340 .media-sidebar .field input[type="checkbox"],
       
   341 .media-sidebar .setting input[type="radio"],
       
   342 .media-sidebar .field input[type="radio"],
       
   343 .attachment-details .setting input[type="checkbox"],
       
   344 .attachment-details .field input[type="checkbox"],
       
   345 .attachment-details .setting input[type="radio"],
       
   346 .attachment-details .field input[type="radio"] {
   266 	float: none;
   347 	float: none;
   267 	margin-top: 8px;
   348 	margin: 8px 3px 0;
   268 	padding: 0;
   349 	padding: 0;
   269 }
   350 }
   270 
   351 
   271 .media-sidebar .setting span,
   352 .media-sidebar .setting span,
       
   353 .attachment-details .setting span,
   272 .compat-item label span {
   354 .compat-item label span {
   273 	float: left;
   355 	float: left;
   274 	min-height: 22px;
   356 	min-height: 22px;
   275 	padding-top: 8px;
   357 	padding-top: 8px;
   276 	line-height: 16px;
   358 	line-height: 16px;
       
   359 	font-weight: normal;
       
   360 	color: #666;
       
   361 }
       
   362 
       
   363 .compat-item label span  {
   277 	text-align: right;
   364 	text-align: right;
   278 	font-weight: normal;
   365 }
   279 	color: #999;
   366 
   280 	text-shadow: 0 1px 0 #fff;
   367 .media-sidebar .setting input[type="text"],
   281 }
   368 .media-sidebar .setting input[type="password"],
   282 
   369 .media-sidebar .setting input[type="email"],
   283 .media-sidebar .setting input,
   370 .media-sidebar .setting input[type="number"],
   284 .media-sidebar .setting textarea {
   371 .media-sidebar .setting input[type="search"],
       
   372 .media-sidebar .setting input[type="tel"],
       
   373 .media-sidebar .setting input[type="url"],
       
   374 .media-sidebar .setting textarea,
       
   375 .media-sidebar .setting .value,
       
   376 .attachment-details .setting input[type="text"],
       
   377 .attachment-details .setting input[type="password"],
       
   378 .attachment-details .setting input[type="email"],
       
   379 .attachment-details .setting input[type="number"],
       
   380 .attachment-details .setting input[type="search"],
       
   381 .attachment-details .setting input[type="tel"],
       
   382 .attachment-details .setting input[type="url"],
       
   383 .attachment-details .setting textarea,
       
   384 .attachment-details .setting .value {
       
   385 	-webkit-box-sizing: border-box;
       
   386 	-moz-box-sizing: border-box;
       
   387 	box-sizing: border-box;
       
   388 	margin: 1px;
   285 	width: 65%;
   389 	width: 65%;
   286 	float: right;
   390 	float: right;
   287 }
   391 }
   288 
   392 
       
   393 .media-sidebar .setting .value,
       
   394 .attachment-details .setting .value {
       
   395 	margin: 0 1px;
       
   396 	text-align: left;
       
   397 }
       
   398 
   289 .media-sidebar .setting textarea,
   399 .media-sidebar .setting textarea,
       
   400 .attachment-details .setting textarea,
   290 .compat-item .field textarea {
   401 .compat-item .field textarea {
   291 	height: 62px;
   402 	height: 62px;
   292 	resize: vertical;
   403 	resize: vertical;
   293 }
   404 }
   294 
   405 
   295 .media-sidebar select {
   406 .media-sidebar select,
       
   407 .attachment-details select {
   296 	margin-top: 3px;
   408 	margin-top: 3px;
   297 }
   409 }
   298 
   410 
   299 .compat-item {
   411 .compat-item {
   300 	float: left;
   412 	float: left;
   335 }
   447 }
   336 
   448 
   337 .compat-item .field {
   449 .compat-item .field {
   338 	float: right;
   450 	float: right;
   339 	width: 65%;
   451 	width: 65%;
   340 	padding-right: 1px;
   452 	margin: 1px;
   341 }
   453 }
   342 
   454 
   343 .compat-item .field input {
   455 .compat-item .field input[type="text"],
       
   456 .compat-item .field input[type="password"],
       
   457 .compat-item .field input[type="email"],
       
   458 .compat-item .field input[type="number"],
       
   459 .compat-item .field input[type="search"],
       
   460 .compat-item .field input[type="tel"],
       
   461 .compat-item .field input[type="url"],
       
   462 .compat-item .field textarea {
   344 	width: 100%;
   463 	width: 100%;
   345 	margin: 0;
   464 	margin: 0;
   346 }
   465 	-webkit-box-sizing: border-box;
   347 
   466 	-moz-box-sizing: border-box;
       
   467 	box-sizing: border-box;
       
   468 }
       
   469 
       
   470 .sidebar-for-errors .attachment-details,
       
   471 .sidebar-for-errors .compat-item,
       
   472 .sidebar-for-errors .media-sidebar .media-progress-bar,
       
   473 .sidebar-for-errors .upload-details {
       
   474 	display: none !important;
       
   475 }
   348 
   476 
   349 /**
   477 /**
   350  * Menu
   478  * Menu
   351  */
   479  */
   352 .media-menu {
   480 .media-menu {
   354 	top: 0;
   482 	top: 0;
   355 	left: 0;
   483 	left: 0;
   356 	right: 0;
   484 	right: 0;
   357 	bottom: 0;
   485 	bottom: 0;
   358 	margin: 0;
   486 	margin: 0;
   359 	padding: 16px 0;
   487 	padding: 10px 0;
   360 	border-right: 1px solid #d9d9d9;
   488 	background: #f3f3f3;
   361 	box-shadow: inset -6px 0 6px -6px rgba( 0, 0, 0, 0.2 );
   489 	border-right-width: 1px;
       
   490 	border-right-style: solid;
       
   491 	border-right-color: #ccc;
   362 	-webkit-user-select: none;
   492 	-webkit-user-select: none;
   363 	-moz-user-select: none;
   493 	-moz-user-select: none;
   364 	-ms-user-select: none;
   494 	-ms-user-select: none;
   365 	user-select: none;
   495 	user-select: none;
   366 }
   496 }
   367 
   497 
   368 .media-menu > a {
   498 .media-menu > a {
   369 	display: block;
   499 	display: block;
   370 	position: relative;
   500 	position: relative;
   371 	padding: 4px 20px;
   501 	padding: 8px 20px;
   372 	margin: 0;
   502 	margin: 0;
   373 	line-height: 18px;
   503 	line-height: 18px;
   374 	font-size: 14px;
   504 	font-size: 14px;
   375 	color: #21759B;
   505 	color: #0073aa;
   376 	text-shadow: 0 1px 0 #fff;
       
   377 	text-decoration: none;
   506 	text-decoration: none;
   378 }
   507 }
   379 
   508 
   380 .media-menu > a:hover {
   509 .media-menu > a:hover {
   381 	color: #21759B;
   510 	color: #21759B;
   386 	outline: none;
   515 	outline: none;
   387 }
   516 }
   388 
   517 
   389 .media-menu .active,
   518 .media-menu .active,
   390 .media-menu .active:hover {
   519 .media-menu .active:hover {
   391 	color: #333;
   520 	color: #23282d;
   392 	font-weight: bold;
   521 	font-weight: bold;
   393 }
   522 }
   394 
   523 
   395 .media-menu .separator {
   524 .media-menu .separator {
   396 	height: 0;
   525 	height: 0;
   397 	margin: 12px 20px;
   526 	margin: 12px 20px;
   398 	padding: 0;
   527 	padding: 0;
   399 	border-top: 1px solid #dfdfdf;
   528 	border-top: 1px solid #ddd;
   400 	border-bottom: 1px solid #fff;
       
   401 }
   529 }
   402 
   530 
   403 /**
   531 /**
   404  * Menu
   532  * Menu
   405  */
   533  */
   412 	-moz-user-select: none;
   540 	-moz-user-select: none;
   413 	-ms-user-select: none;
   541 	-ms-user-select: none;
   414 	user-select: none;
   542 	user-select: none;
   415 }
   543 }
   416 
   544 
       
   545 .media-router a {
       
   546 	-webkit-transition: none;
       
   547 	transition: none;
       
   548 }
       
   549 
   417 .media-router > a {
   550 .media-router > a {
   418 	position: relative;
   551 	position: relative;
   419 	float: left;
   552 	float: left;
   420 	padding: 2px 10px;
   553 	padding: 8px 10px 9px;
   421 	margin: 0;
   554 	margin: 0;
   422 	height: 18px;
   555 	height: 18px;
   423 	line-height: 18px;
   556 	line-height: 18px;
   424 	font-size: 14px;
   557 	font-size: 14px;
   425 	border-right: 1px solid #dfdfdf;
       
   426 	text-shadow: 0 1px 0 #fff;
       
   427 	text-decoration: none;
   558 	text-decoration: none;
   428 }
   559 }
   429 
   560 
   430 .media-router > a:last-child {
   561 .media-router > a:last-child {
   431 	border-right: 0;
   562 	border-right: 0;
   432 }
   563 }
   433 
   564 
   434 .media-router > a:active,
   565 .media-router > a:active {
   435 .media-router > a:focus {
       
   436 	outline: none;
   566 	outline: none;
   437 }
   567 }
   438 
   568 
   439 .media-router .active,
   569 .media-router .active,
   440 .media-router .active:hover {
   570 .media-router .active:hover {
   441 	color: #333;
   571 	color: #32373c;
       
   572 }
       
   573 
       
   574 .media-router .active,
       
   575 .media-router > a.active:last-child {
       
   576 	margin: -1px -1px 0;
       
   577 	background: #fff;
       
   578 	border: 1px solid #ddd;
       
   579 	border-bottom: none;
   442 }
   580 }
   443 
   581 
   444 .media-router .active:after {
   582 .media-router .active:after {
   445 	content: '';
   583 	display: none;
   446 	display: block;
       
   447 	margin: -100px auto 0;
       
   448 	width: 7px;
       
   449 	height: 7px;
       
   450 	background: #fff;
       
   451 	box-shadow: 1px 1px 1px rgba( 0, 0, 0, 0.2 );
       
   452 	z-index: 300;
       
   453 
       
   454 	-webkit-transform: rotate( 45deg ) translate( 75px, 75px );
       
   455 	-moz-transform:    rotate( 45deg ) translate( 75px, 75px );
       
   456 	-ms-transform:     rotate( 45deg ) translate( 75px, 75px );
       
   457 	-o-transform:      rotate( 45deg ) translate( 75px, 75px );
       
   458 	transform:         rotate( 45deg ) translate( 75px, 75px );
       
   459 }
   584 }
   460 
   585 
   461 /**
   586 /**
   462  * Frame
   587  * Frame
   463  */
   588  */
   473 .media-frame-menu {
   598 .media-frame-menu {
   474 	position: absolute;
   599 	position: absolute;
   475 	top: 0;
   600 	top: 0;
   476 	left: 0;
   601 	left: 0;
   477 	bottom: 0;
   602 	bottom: 0;
   478 	width: 199px;
   603 	width: 200px;
   479 	z-index: 150;
   604 	z-index: 150;
   480 }
   605 }
   481 
   606 
   482 .media-frame-title {
   607 .media-frame-title {
   483 	position: absolute;
   608 	position: absolute;
   484 	top: 0;
   609 	top: 0;
   485 	left: 200px;
   610 	left: 200px;
   486 	right: 0;
   611 	right: 0;
   487 	height: 45px;
   612 	height: 50px;
   488 	z-index: 200;
   613 	z-index: 200;
   489 }
   614 }
   490 
   615 
   491 .media-frame-router {
   616 .media-frame-router {
   492 	position: absolute;
   617 	position: absolute;
   493 	top: 45px;
   618 	top: 50px;
   494 	left: 200px;
   619 	left: 200px;
   495 	right: 0;
   620 	right: 0;
   496 	height: 30px;
   621 	height: 36px;
   497 	z-index: 200;
   622 	z-index: 200;
   498 	border-bottom: 1px solid #dfdfdf;
       
   499 	box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
       
   500 }
   623 }
   501 
   624 
   502 .media-frame-content {
   625 .media-frame-content {
   503 	position: absolute;
   626 	position: absolute;
   504 	top: 75px;
   627 	top: 84px;
   505 	left: 200px;
   628 	left: 200px;
   506 	right: 0;
   629 	right: 0;
   507 	bottom: 61px;
   630 	bottom: 61px;
   508 	height: auto;
   631 	height: auto;
   509 	width: auto;
   632 	width: auto;
   510 	margin: 0;
   633 	margin: 0;
   511 	overflow: auto;
   634 	overflow: auto;
       
   635 	background: #fff;
       
   636 	border-top: 1px solid #ddd;
       
   637 	border-bottom: 1px solid #ddd;
   512 }
   638 }
   513 
   639 
   514 .media-frame-toolbar {
   640 .media-frame-toolbar {
   515 	position: absolute;
   641 	position: absolute;
   516 	left: 200px;
   642 	left: 200px;
   517 	right: 0;
   643 	right: 0;
   518 	bottom: 0;
   644 	bottom: 0;
   519 	height: 60px;
   645 	height: 60px;
   520 	z-index: 100;
   646 	z-index: 100;
   521 	border: 0 solid #dfdfdf;
       
   522 	border-width: 1px 0 0 0;
       
   523 	box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.1 );
       
   524 }
   647 }
   525 
   648 
   526 .media-frame.hide-menu .media-frame-title,
   649 .media-frame.hide-menu .media-frame-title,
   527 .media-frame.hide-menu .media-frame-router,
   650 .media-frame.hide-menu .media-frame-router,
   528 .media-frame.hide-menu .media-frame-toolbar,
   651 .media-frame.hide-menu .media-frame-toolbar,
   541 .media-frame.hide-toolbar .media-frame-toolbar {
   664 .media-frame.hide-toolbar .media-frame-toolbar {
   542 	bottom: -61px;
   665 	bottom: -61px;
   543 }
   666 }
   544 
   667 
   545 .media-frame.hide-router .media-frame-content {
   668 .media-frame.hide-router .media-frame-content {
   546 	top: 45px;
   669 	top: 50px;
   547 }
   670 }
   548 
   671 
   549 .media-frame.hide-router .media-frame-router {
   672 .media-frame.hide-router .media-frame-router {
   550 	display: none;
   673 	display: none;
   551 }
   674 }
   552 
   675 
   553 .media-frame.hide-router .media-frame-title {
   676 .media-frame.hide-router .media-frame-title {
   554 	border-bottom: 1px solid #dfdfdf;
   677 	border-bottom: 1px solid #dfdfdf;
       
   678 	-webkit-box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
   555 	box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
   679 	box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
   556 }
   680 }
   557 
   681 
   558 .media-frame .media-toolbar .add-to-gallery {
   682 .media-frame-title .dashicons {
   559 	display: none;
   683 	display: none;
   560 }
   684 }
   561 
   685 
   562 .media-frame-title h1 {
   686 .media-frame-title h1 {
   563 	padding: 0 16px;
   687 	padding: 0 16px;
   564 	font-size: 22px;
   688 	font-size: 22px;
   565 	font-weight: 200;
   689 	line-height: 50px;
   566 	line-height: 45px;
       
   567 	margin: 0;
   690 	margin: 0;
       
   691 }
       
   692 
       
   693 .media-frame-title .suggested-dimensions {
       
   694 	font-size: 14px;
       
   695 	float: right;
       
   696 	margin-right: 20px;
       
   697 }
       
   698 
       
   699 .media-frame-content .crop-content {
       
   700 	height: 100%;
       
   701 }
       
   702 
       
   703 .media-frame-content .crop-content .crop-image {
       
   704 	display: block;
       
   705 	margin: auto;
       
   706 	max-width: 100%;
       
   707 	max-height: 100%;
       
   708 }
       
   709 
       
   710 .media-frame-content .crop-content .upload-errors
       
   711 {
       
   712 	position: absolute;
       
   713 	width: 300px;
       
   714 	top: 50%;
       
   715 	left: 50%;
       
   716 	margin-left: -150px;
       
   717 	margin-right: -150px;
       
   718 	z-index: 600000;
   568 }
   719 }
   569 
   720 
   570 /**
   721 /**
   571  * Iframes
   722  * Iframes
   572  */
   723  */
   584 /**
   735 /**
   585  * Attachment Browser Filters
   736  * Attachment Browser Filters
   586  */
   737  */
   587 .media-frame select.attachment-filters {
   738 .media-frame select.attachment-filters {
   588 	margin-top: 11px;
   739 	margin-top: 11px;
   589 	margin-right: 10px;
   740 	margin-right: 2%;
       
   741 	max-width: 42%;
       
   742 	max-width: -webkit-calc(48% - 12px);
       
   743 	max-width: calc(48% - 12px);
       
   744 }
       
   745 
       
   746 .media-frame select.attachment-filters:last-of-type {
       
   747 	margin-right: 0;
   590 }
   748 }
   591 
   749 
   592 /**
   750 /**
   593  * Search
   751  * Search
   594  */
   752  */
   595 .media-frame .search {
   753 .media-frame .search {
   596 	margin-top: 11px;
   754 	margin-top: 11px;
   597 	padding: 4px;
   755 	padding: 4px;
   598 	line-height: 18px;
       
   599 	font-size: 13px;
   756 	font-size: 13px;
   600 	color: #464646;
   757 	color: #464646;
   601 	font-family: sans-serif;
   758 	font-family: "Open Sans", sans-serif;
   602 	-webkit-appearance: none;
   759 	-webkit-appearance: none;
   603 }
   760 }
   604 
   761 
   605 .media-toolbar-secondary .search {
   762 .media-toolbar-primary .search {
   606 	margin-right: 16px;
   763 	max-width: 100%;
   607 }
   764 }
   608 
   765 
   609 /**
   766 /**
   610  * Attachments
   767  * Attachments
   611  */
   768  */
   612 .attachments {
   769 .wp-core-ui .attachments {
   613 	margin: 0;
   770 	margin: 0;
   614 	padding-right: 16px;
       
   615 	-webkit-overflow-scrolling: touch;
   771 	-webkit-overflow-scrolling: touch;
   616 }
   772 }
   617 
   773 
   618 /**
   774 /**
   619  * Attachment
   775  * Attachment
   620  */
   776  */
   621 .attachment {
   777 .wp-core-ui .attachment {
   622 	position: relative;
   778 	position: relative;
   623 	float: left;
   779 	float: left;
   624 
   780 	padding: 8px;
   625 	padding: 0;
   781 	margin: 0;
   626 	margin: 0 10px 20px;
       
   627 	color: #464646;
   782 	color: #464646;
       
   783 	cursor: pointer;
   628 	list-style: none;
   784 	list-style: none;
   629 	text-align: center;
   785 	text-align: center;
   630 
       
   631 	-webkit-user-select: none;
   786 	-webkit-user-select: none;
   632 	-moz-user-select:    none;
   787 	-moz-user-select: none;
   633 	-ms-user-select:     none;
   788 	-ms-user-select: none;
   634 	-o-user-select:      none;
   789 	user-select: none;
   635 	user-select:         none;
   790 	width: 25%;
   636 }
   791 	-webkit-box-sizing: border-box;
   637 
   792 	-moz-box-sizing: border-box;
   638 .selected.attachment {
   793 	box-sizing: border-box;
       
   794 }
       
   795 
       
   796 .wp-core-ui .attachment:focus,
       
   797 .wp-core-ui .selected.attachment:focus,
       
   798 .wp-core-ui .attachment.details:focus {
       
   799 	-webkit-box-shadow:
       
   800 		inset 0 0 2px 3px #fff,
       
   801 		inset 0 0 0 7px #5b9dd9;
   639 	box-shadow:
   802 	box-shadow:
   640 		0 0 0 1px #fff,
   803 		inset 0 0 2px 3px #fff,
   641 		0 0 0 3px #ccc;
   804 		inset 0 0 0 7px #5b9dd9;
   642 }
   805 	outline: none;
   643 
   806 }
   644 .details.attachment {
   807 
       
   808 .wp-core-ui .selected.attachment {
       
   809 	-webkit-box-shadow:
       
   810 		inset 0 0 0 5px #fff,
       
   811 		inset 0 0 0 7px #ccc;
   645 	box-shadow:
   812 	box-shadow:
   646 		0 0 0 1px #fff,
   813 		inset 0 0 0 5px #fff,
   647 		0 0 0 5px #1e8cbe;
   814 		inset 0 0 0 7px #ccc;
   648 }
   815 }
   649 
   816 
   650 .attachment-preview {
   817 .wp-core-ui .attachment.details {
       
   818 	-webkit-box-shadow:
       
   819 		inset 0 0 0 3px #fff,
       
   820 		inset 0 0 0 7px #1e8cbe;
       
   821 	box-shadow:
       
   822 		inset 0 0 0 3px #fff,
       
   823 		inset 0 0 0 7px #1e8cbe;
       
   824 }
       
   825 
       
   826 .wp-core-ui .attachment-preview {
   651 	position: relative;
   827 	position: relative;
   652 	width: 199px;
   828 	-webkit-box-shadow:
   653 	height: 199px;
   829 		inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
       
   830 		inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
   654 	box-shadow:
   831 	box-shadow:
   655 		inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
   832 		inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
   656 		inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
   833 		inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
   657 	background: #eee;
   834 	background: #eee;
   658 	cursor: pointer;
   835 	cursor: pointer;
   659 }
   836 }
   660 
   837 
   661 .attachment .icon {
   838 .wp-core-ui .attachment-preview:before {
       
   839 	content: '';
       
   840 	display: block;
       
   841 	padding-top: 100%;
       
   842 }
       
   843 
       
   844 .wp-core-ui .attachment .icon {
   662 	margin: 0 auto;
   845 	margin: 0 auto;
   663 	overflow: hidden;
   846 	overflow: hidden;
   664 	padding-top: 20%;
   847 }
   665 }
   848 
   666 
   849 .wp-core-ui .attachment .thumbnail {
   667 .attachment .thumbnail {
   850 	overflow: hidden;
   668 	display: block;
   851 	position: absolute;
   669 	position: absolute;
   852 	top: 0;
   670 	top: 0;
   853 	right: 0;
       
   854 	bottom: 0;
   671 	left: 0;
   855 	left: 0;
   672 	margin: 0 auto;
   856 	opacity: 1;
   673 	overflow: hidden;
   857 	-webkit-transition: opacity .1s;
       
   858 	transition: opacity .1s;
       
   859 }
       
   860 
       
   861 .wp-core-ui .attachment .portrait img {
   674 	max-width: 100%;
   862 	max-width: 100%;
       
   863 }
       
   864 
       
   865 .wp-core-ui .attachment .landscape img {
   675 	max-height: 100%;
   866 	max-height: 100%;
   676 }
   867 }
   677 
   868 
   678 .attachment-preview .thumbnail:after {
   869 .wp-core-ui .attachment .thumbnail:after {
   679 	content: '';
   870 	content: '';
   680 	display: block;
   871 	display: block;
   681 	position: absolute;
   872 	position: absolute;
   682 	top: 0;
   873 	top: 0;
   683 	left: 0;
   874 	left: 0;
   684 	right: 0;
   875 	right: 0;
   685 	bottom: 0;
   876 	bottom: 0;
       
   877 	-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
   686 	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
   878 	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
   687 	overflow: hidden;
   879 	overflow: hidden;
   688 }
   880 }
   689 
   881 
   690 .attachment .thumbnail img {
   882 .wp-core-ui .attachment .thumbnail img {
   691 	top: 0;
   883 	top: 0;
   692 	left: 0;
   884 	left: 0;
   693 }
   885 }
   694 
   886 
   695 .attachment .thumbnail .centered {
   887 .wp-core-ui .attachment .thumbnail .centered {
   696 	position: absolute;
   888 	position: absolute;
   697 	top: 0;
   889 	top: 0;
   698 	left: 0;
   890 	left: 0;
   699 	width: 100%;
   891 	width: 100%;
   700 	height: 100%;
   892 	height: 100%;
   701 	-webkit-transform: translate( 50%, 50% );
   893 	-webkit-transform: translate( 50%, 50% );
   702 	-moz-transform:    translate( 50%, 50% );
   894 	-ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
   703 	-ms-transform:     translate( 50%, 50% );
   895 	transform: translate( 50%, 50% );
   704 	-o-transform:      translate( 50%, 50% );
   896 }
   705 	transform:         translate( 50%, 50% );
   897 
   706 }
   898 .wp-core-ui .attachment .thumbnail .centered img {
   707 
       
   708 .attachment .thumbnail .centered img {
       
   709 	-webkit-transform: translate( -50%, -50% );
   899 	-webkit-transform: translate( -50%, -50% );
   710 	-moz-transform:    translate( -50%, -50% );
   900 	-ms-transform: translate(-50%,-50%);
   711 	-ms-transform:     translate( -50%, -50% );
   901 	transform: translate( -50%, -50% );
   712 	-o-transform:      translate( -50%, -50% );
   902 }
   713 	transform:         translate( -50%, -50% );
   903 
   714 }
   904 .wp-core-ui .attachments-browser .attachment .thumbnail .centered img.icon {
   715 
   905 	-webkit-transform: translate( -50%, -70% );
   716 .attachment .filename {
   906 	-ms-transform: translate(-50%,-70%);
       
   907 	transform: translate( -50%, -70% );
       
   908 }
       
   909 
       
   910 .ie8 .wp-core-ui .attachment img.icon {
       
   911 	top: 20%;
       
   912 	position: relative;
       
   913 }
       
   914 
       
   915 .wp-core-ui .attachment .filename {
   717 	position: absolute;
   916 	position: absolute;
   718 	left: 0;
   917 	left: 0;
   719 	right: 0;
   918 	right: 0;
   720 	bottom: 0;
   919 	bottom: 0;
   721 	overflow: hidden;
   920 	overflow: hidden;
   722 	max-height: 100%;
   921 	max-height: 100%;
   723 
       
   724 	word-wrap: break-word;
   922 	word-wrap: break-word;
   725 	text-align: center;
   923 	text-align: center;
   726 	font-weight: bold;
   924 	font-weight: bold;
   727 	background: rgba( 255, 255, 255, 0.8 );
   925 	background: rgba( 255, 255, 255, 0.8 );
       
   926 	-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
   728 	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
   927 	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
   729 }
   928 }
   730 
   929 
   731 .attachment .filename div {
   930 .wp-core-ui .attachment .filename div {
   732 	padding: 5px 10px;
   931 	padding: 5px 10px;
   733 }
   932 }
   734 
   933 
   735 .attachment-preview .thumbnail {
   934 .wp-core-ui .attachment .thumbnail img {
   736 	width: 199px;
   935 	position: absolute;
   737 	height: 199px;
   936 }
   738 }
   937 
   739 
   938 .wp-core-ui .attachment .close {
   740 .attachment .thumbnail img {
   939 	display: block;
   741 	position: absolute;
       
   742 }
       
   743 
       
   744 .attachment .close {
       
   745 	display: none;
       
   746 	position: absolute;
   940 	position: absolute;
   747 	top: 5px;
   941 	top: 5px;
   748 	right: 5px;
   942 	right: 5px;
   749 	height: 22px;
   943 	height: 22px;
   750 	width: 22px;
   944 	width: 22px;
   755 	text-decoration: none;
   949 	text-decoration: none;
   756 	color: #464646;
   950 	color: #464646;
   757 	background-color: #fff;
   951 	background-color: #fff;
   758 	background-position: -96px 4px;
   952 	background-position: -96px 4px;
   759 	border-width: 0;
   953 	border-width: 0;
       
   954 	-webkit-border-radius: 3px;
   760 	border-radius: 3px;
   955 	border-radius: 3px;
       
   956 	-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
   761 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
   957 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
   762 }
   958 	-webkit-transition-duration: none;
   763 
   959 	transition-duration: none;
   764 .attachment .close:hover {
   960 	-webkit-transition-property: none;
       
   961 	transition-property: none;
       
   962 }
       
   963 
       
   964 .wp-core-ui .attachment a.close:hover,
       
   965 .wp-core-ui .attachment a.close:focus {
       
   966 	-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
   765 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
   967 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
   766 }
   968 	background-position: -36px 4px;
   767 
   969 
   768 .attachment:hover .close {
   970 }
   769 	display: block;
   971 
   770 }
   972 .wp-core-ui .attachment .check {
   771 
       
   772 .attachment .check {
       
   773 	display: none;
   973 	display: none;
   774 	height: 24px;
   974 	height: 24px;
   775 	width: 24px;
   975 	width: 24px;
   776 	position: absolute;
   976 	position: absolute;
   777 	top: -7px;
   977 	z-index: 10;
   778 	right: -7px;
   978 	top: 0;
       
   979 	right: 0;
   779 	outline: none;
   980 	outline: none;
   780 
   981 	background: #eee;
   781 	border: 1px solid #fff;
   982 	-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
   782 	border-radius: 3px;
   983 	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 );
   783 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.4 );
   984 }
   784 
   985 
   785 	background: #f1f1f1;
   986 .wp-core-ui .attachment .check div {
   786 	background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#e1e1e1));
       
   787 	background-image: -webkit-linear-gradient(top, #f1f1f1, #e1e1e1);
       
   788 	background-image:    -moz-linear-gradient(top, #f1f1f1, #e1e1e1);
       
   789 	background-image:      -o-linear-gradient(top, #f1f1f1, #e1e1e1);
       
   790 	background-image:   linear-gradient(to bottom, #f1f1f1, #e1e1e1);
       
   791 }
       
   792 
       
   793 .attachment .check div {
       
   794 	background-position: -1px 0;
   987 	background-position: -1px 0;
   795 	height: 15px;
   988 	height: 15px;
   796 	width: 15px;
   989 	width: 15px;
   797 	margin: 5px;
   990 	margin: 5px;
   798 }
   991 }
   799 
   992 
   800 .attachment .check:hover div {
   993 .wp-core-ui .attachment .check:hover div {
   801 	background-position: -40px 0;
   994 	background-position: -40px 0;
   802 }
   995 }
   803 
   996 
   804 .attachment.selected .check {
   997 .wp-core-ui .attachment.selected .check {
   805 	display: block;
   998 	display: block;
   806 }
   999 }
   807 
  1000 
   808 .attachment.details .check {
  1001 .wp-core-ui .attachment.details .check,
   809 	box-shadow: 0 0 0 1px #1e8cbe;
  1002 .wp-core-ui .attachment.selected .check:focus,
   810 
  1003 .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
   811 	background: #1e8cbe;
  1004 	background-color: #1e8cbe;
   812 	background-image: -webkit-gradient(linear, left top, left bottom, from(#1e8cbe), to(#0074a2));
  1005 	-webkit-box-shadow:
   813 	background-image: -webkit-linear-gradient(top, #1e8cbe, #0074a2);
  1006 		0 0 0 1px #fff,
   814 	background-image:    -moz-linear-gradient(top, #1e8cbe, #0074a2);
  1007 		0 0 0 2px #1e8cbe;
   815 	background-image:      -o-linear-gradient(top, #1e8cbe, #0074a2);
  1008 	box-shadow:
   816 	background-image:   linear-gradient(to bottom, #1e8cbe, #0074a2);
  1009 		0 0 0 1px #fff,
   817 }
  1010 		0 0 0 2px #1e8cbe;
   818 
  1011 }
   819 .attachment.details .check div {
  1012 
       
  1013 .wp-core-ui .attachment.details .check div,
       
  1014 .wp-core-ui .media-frame.mode-grid .attachment.selected .check div {
   820 	background-position: -21px 0;
  1015 	background-position: -21px 0;
   821 }
  1016 }
   822 
  1017 
   823 .attachment.details .check:hover div {
  1018 .wp-core-ui .attachment.details .check:hover div,
       
  1019 .wp-core-ui .attachment.selected .check:focus div,
       
  1020 .wp-core-ui .media-frame.mode-grid .attachment.selected .check:hover div {
   824 	background-position: -60px 0;
  1021 	background-position: -60px 0;
   825 }
  1022 }
   826 
  1023 
   827 .media-frame .attachment .describe {
  1024 .wp-core-ui .media-frame .attachment .describe {
   828 	position: relative;
  1025 	position: relative;
   829 	display: block;
  1026 	display: block;
   830 	width: 100%;
  1027 	width: 100%;
   831 	margin: -1px 0 0;
  1028 	margin: 0;
   832 	padding: 8px;
  1029 	padding: 8px;
   833 	font-size: 12px;
  1030 	font-size: 12px;
       
  1031 	-webkit-border-radius: 0;
   834 	border-radius: 0;
  1032 	border-radius: 0;
   835 }
  1033 }
   836 
  1034 
   837 /**
  1035 /**
   838  * Attachments Browser
  1036  * Attachments Browser
   847 .attachments-browser .media-toolbar {
  1045 .attachments-browser .media-toolbar {
   848 	right: 300px;
  1046 	right: 300px;
   849 	height: 50px;
  1047 	height: 50px;
   850 }
  1048 }
   851 
  1049 
       
  1050 .attachments-browser.hide-sidebar .media-toolbar {
       
  1051 	right: 0;
       
  1052 }
       
  1053 
   852 .attachments-browser .media-toolbar-primary > .media-button,
  1054 .attachments-browser .media-toolbar-primary > .media-button,
   853 .attachments-browser .media-toolbar-primary > .media-button-group,
  1055 .attachments-browser .media-toolbar-primary > .media-button-group,
   854 .attachments-browser .media-toolbar-secondary > .media-button,
  1056 .attachments-browser .media-toolbar-secondary > .media-button,
   855 .attachments-browser .media-toolbar-secondary > .media-button-group {
  1057 .attachments-browser .media-toolbar-secondary > .media-button-group {
   856 	margin-top: 10px;
  1058 	margin: 11px 0;
       
  1059 }
       
  1060 
       
  1061 .attachments-browser .attachments {
       
  1062 	padding: 2px 8px 8px;
   857 }
  1063 }
   858 
  1064 
   859 .attachments-browser .attachments,
  1065 .attachments-browser .attachments,
   860 .attachments-browser .uploader-inline {
  1066 .attachments-browser .uploader-inline {
   861 	position: absolute;
  1067 	position: absolute;
   862 	top: 50px;
  1068 	top: 50px;
   863 	left: 0;
  1069 	left: 0;
   864 	right: 300px;
  1070 	right: 300px;
   865 	bottom: 0;
  1071 	bottom: 0;
   866 	overflow: auto;
  1072 	overflow: auto;
       
  1073 	outline: none;
       
  1074 }
       
  1075 
       
  1076 .attachments-browser .uploader-inline.hidden {
       
  1077 	display: none;
       
  1078 }
       
  1079 
       
  1080 .attachments-browser .media-toolbar-primary {
       
  1081 	max-width: 33%;
       
  1082 }
       
  1083 
       
  1084 .attachments-browser .media-toolbar-secondary {
       
  1085 	max-width: 66%;
       
  1086 }
       
  1087 
       
  1088 .uploader-inline .close {
       
  1089 	background-color: transparent;
       
  1090 	border: 0;
       
  1091 	cursor: pointer;
       
  1092 	height: 48px;
       
  1093 	position: absolute;
       
  1094 	right: 0;
       
  1095 	text-align: center;
       
  1096 	top: 0;
       
  1097 	width: 50px;
       
  1098 	z-index: 1;
       
  1099 }
       
  1100 
       
  1101 .uploader-inline .close:before {
       
  1102 	font: normal 30px/50px 'dashicons' !important;
       
  1103 	color: #777;
       
  1104 	display: inline-block;
       
  1105 	content: '\f335';
       
  1106 	font-weight: 300;
       
  1107 }
       
  1108 
       
  1109 .attachments-browser.hide-sidebar .attachments,
       
  1110 .attachments-browser.hide-sidebar .uploader-inline {
       
  1111 	right: 0;
       
  1112 	margin-right: 0;
   867 }
  1113 }
   868 
  1114 
   869 .attachments-browser .instructions {
  1115 .attachments-browser .instructions {
   870 	display: inline-block;
  1116 	display: inline-block;
   871 	margin-top: 16px;
  1117 	margin-top: 16px;
   872 	line-height: 18px;
  1118 	line-height: 18px;
   873 	font-size: 13px;
  1119 	font-size: 13px;
   874 	color: #999;
  1120 	color: #666;
       
  1121 	margin-right: 0.5em;
       
  1122 }
       
  1123 
       
  1124 .attachments-browser .no-media {
       
  1125 	padding: 2em 0 0 2em;
   875 }
  1126 }
   876 
  1127 
   877 /**
  1128 /**
   878  * Progress Bar
  1129  * Progress Bar
   879  */
  1130  */
   880 .media-progress-bar {
  1131 .media-progress-bar {
   881 	position: relative;
  1132 	position: relative;
   882 	height: 10px;
  1133 	height: 10px;
   883 	width: 70%;
  1134 	width: 70%;
   884 	margin: 10px auto;
  1135 	margin: 10px auto;
       
  1136 	-webkit-border-radius: 10px;
   885 	border-radius: 10px;
  1137 	border-radius: 10px;
   886 	background: #dfdfdf;
  1138 	background: #dfdfdf;
   887 	background: rgba( 0, 0, 0, 0.1 );
  1139 	background: rgba( 0, 0, 0, 0.1 );
   888 }
  1140 }
   889 
  1141 
   890 .media-progress-bar div {
  1142 .media-progress-bar div {
   891 	height: 10px;
  1143 	height: 10px;
   892 	min-width: 20px;
  1144 	min-width: 20px;
   893 	width: 0;
  1145 	width: 0;
   894 	background: #aaa;
  1146 	background: #1e8cbe;
   895 	background: rgba( 0, 0, 0, 0.2 );
  1147 	-webkit-border-radius: 10px;
   896 	border-radius: 10px;
  1148 	border-radius: 10px;
   897 	-webkit-transition: width 300ms;
  1149 	-webkit-transition: width 300ms;
   898 	-moz-transition:    width 300ms;
  1150 	transition: width 300ms;
   899 	-ms-transition:     width 300ms;
       
   900 	-o-transition:      width 300ms;
       
   901 	transition:         width 300ms;
       
   902 }
  1151 }
   903 
  1152 
   904 .media-uploader-status .media-progress-bar {
  1153 .media-uploader-status .media-progress-bar {
   905 	display: none;
  1154 	display: none;
   906 	width: 100%;
  1155 	width: 100%;
   925 	max-width: 400px;
  1174 	max-width: 400px;
   926 }
  1175 }
   927 
  1176 
   928 .media-sidebar .media-uploader-status {
  1177 .media-sidebar .media-uploader-status {
   929 	border-bottom: 1px solid #dfdfdf;
  1178 	border-bottom: 1px solid #dfdfdf;
   930 	box-shadow: 0 1px 0 #fff;
       
   931 }
  1179 }
   932 
  1180 
   933 .uploader-inline .media-uploader-status h3 {
  1181 .uploader-inline .media-uploader-status h3 {
   934 	display: none;
  1182 	display: none;
   935 }
  1183 }
   936 
  1184 
   937 .media-uploader-status .upload-details {
  1185 .media-uploader-status .upload-details {
   938 	display: none;
  1186 	display: none;
   939 	font-size: 12px;
  1187 	font-size: 12px;
   940 	color: #666;
  1188 	color: #666;
   941 	text-shadow: 0 1px 0 #fff;
       
   942 }
  1189 }
   943 
  1190 
   944 .uploading.media-uploader-status .upload-details {
  1191 .uploading.media-uploader-status .upload-details {
   945 	display: block;
  1192 	display: block;
   946 }
  1193 }
   976 .upload-errors .upload-error {
  1223 .upload-errors .upload-error {
   977 	margin: 8px auto 0 auto;
  1224 	margin: 8px auto 0 auto;
   978 	padding: 8px;
  1225 	padding: 8px;
   979 	border: 1px #c00 solid;
  1226 	border: 1px #c00 solid;
   980 	background: #ffebe8;
  1227 	background: #ffebe8;
       
  1228 	-webkit-border-radius: 3px;
   981 	border-radius: 3px;
  1229 	border-radius: 3px;
   982 }
  1230 }
   983 
  1231 
   984 .upload-errors .upload-error-label {
  1232 .upload-errors .upload-error-label {
   985 	padding: 2px 4px;
  1233 	padding: 2px 4px;
   987 	font-weight: bold;
  1235 	font-weight: bold;
   988 	color: #fff;
  1236 	color: #fff;
   989 	background: #e00;
  1237 	background: #e00;
   990 	background-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#a00));
  1238 	background-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#a00));
   991 	background-image: -webkit-linear-gradient(top, #e00, #a00);
  1239 	background-image: -webkit-linear-gradient(top, #e00, #a00);
   992 	background-image:    -moz-linear-gradient(top, #e00, #a00);
  1240 	background-image: linear-gradient(to bottom, #e00, #a00);
   993 	background-image:      -o-linear-gradient(top, #e00, #a00);
  1241 	-webkit-border-radius: 3px;
   994 	background-image:   linear-gradient(to bottom, #e00, #a00);
       
   995 	border-radius: 3px;
  1242 	border-radius: 3px;
   996 }
  1243 }
   997 
  1244 
   998 .upload-errors .upload-error-message {
  1245 .upload-errors .upload-error-message {
   999 	display: block;
  1246 	display: block;
  1007 	top: 0;
  1254 	top: 0;
  1008 	left: 0;
  1255 	left: 0;
  1009 	right: 0;
  1256 	right: 0;
  1010 	bottom: 0;
  1257 	bottom: 0;
  1011 	background: rgba( 0, 86, 132, 0.9 );
  1258 	background: rgba( 0, 86, 132, 0.9 );
  1012 
       
  1013 	z-index: 250000;
  1259 	z-index: 250000;
  1014 	display: none;
  1260 	display: none;
  1015 	text-align: center;
  1261 	text-align: center;
  1016 	opacity: 0;
  1262 	opacity: 0;
  1017 
       
  1018 	-webkit-transition: opacity 250ms;
  1263 	-webkit-transition: opacity 250ms;
  1019 	-moz-transition:    opacity 250ms;
  1264 	transition: opacity 250ms;
  1020 	-ms-transition:     opacity 250ms;
       
  1021 	-o-transition:      opacity 250ms;
       
  1022 	transition:         opacity 250ms;
       
  1023 }
  1265 }
  1024 
  1266 
  1025 .uploader-window-content {
  1267 .uploader-window-content {
  1026 	position: absolute;
  1268 	position: absolute;
  1027 	top: 10px;
  1269 	top: 10px;
  1030 	bottom: 10px;
  1272 	bottom: 10px;
  1031 	border: 1px dashed #fff;
  1273 	border: 1px dashed #fff;
  1032 }
  1274 }
  1033 
  1275 
  1034 .uploader-window h3 {
  1276 .uploader-window h3 {
       
  1277 	margin: -0.5em 0 0;
  1035 	position: absolute;
  1278 	position: absolute;
  1036 	top: 50%;
  1279 	top: 50%;
  1037 	left: 0;
  1280 	left: 0;
  1038 	right: 0;
  1281 	right: 0;
  1039 	-webkit-transform: translateY( -50% );
  1282 	-webkit-transform: translateY( -50% );
  1040 	-moz-transform:    translateY( -50% );
  1283 	-ms-transform: translateY(-50%);
  1041 	-ms-transform:     translateY( -50% );
  1284 	transform: translateY( -50% );
  1042 	-o-transform:      translateY( -50% );
  1285 	font-size: 40px;
  1043 	transform:         translateY( -50% );
       
  1044 
       
  1045 	font-size: 20px;
       
  1046 	font-weight: 200;
       
  1047 	color: #fff;
  1286 	color: #fff;
  1048 	padding: 0;
  1287 	padding: 0;
  1049 }
  1288 }
  1050 
  1289 
  1051 .uploader-window .media-progress-bar {
  1290 .uploader-window .media-progress-bar {
  1063 .uploading .uploader-window .media-progress-bar {
  1302 .uploading .uploader-window .media-progress-bar {
  1064 	display: block;
  1303 	display: block;
  1065 }
  1304 }
  1066 
  1305 
  1067 .media-frame .uploader-inline {
  1306 .media-frame .uploader-inline {
  1068 	margin: 20px;
  1307 	margin-bottom: 20px;
  1069 	padding: 20px;
  1308 	padding: 0;
  1070 	text-align: center;
  1309 	text-align: center;
  1071 }
  1310 }
  1072 
  1311 
  1073 .uploader-inline-content {
  1312 .uploader-inline-content {
  1074 	position: absolute;
  1313 	position: absolute;
  1076 	left: 0;
  1315 	left: 0;
  1077 	right: 0;
  1316 	right: 0;
  1078 }
  1317 }
  1079 
  1318 
  1080 .uploader-inline-content .upload-ui {
  1319 .uploader-inline-content .upload-ui {
  1081 	margin: 4em 0;
  1320 	margin: 2em 0;
  1082 }
  1321 }
  1083 
  1322 
  1084 .uploader-inline-content .post-upload-ui {
  1323 .uploader-inline-content .post-upload-ui {
  1085 	margin-bottom: 2em;
  1324 	margin-bottom: 2em;
  1086 }
  1325 }
  1090 }
  1329 }
  1091 
  1330 
  1092 .uploader-inline h3 {
  1331 .uploader-inline h3 {
  1093 	font-size: 20px;
  1332 	font-size: 20px;
  1094 	line-height: 28px;
  1333 	line-height: 28px;
  1095 	font-weight: 200;
  1334 	font-weight: 400;
  1096 	margin-bottom: 1.6em;
  1335 	margin: 0;
  1097 }
  1336 }
  1098 
  1337 
  1099 .uploader-inline .has-upload-message .upload-instructions {
  1338 .uploader-inline .has-upload-message .upload-instructions {
  1100 	font-size: 14px;
  1339 	font-size: 14px;
  1101 	color: #464646;
  1340 	color: #464646;
  1110 	display: block;
  1349 	display: block;
  1111 }
  1350 }
  1112 
  1351 
  1113 .uploader-inline p {
  1352 .uploader-inline p {
  1114 	font-size: 12px;
  1353 	font-size: 12px;
       
  1354 	margin: 0.5em 0;
  1115 }
  1355 }
  1116 
  1356 
  1117 .uploader-inline .media-progress-bar {
  1357 .uploader-inline .media-progress-bar {
  1118 	display: none;
  1358 	display: none;
  1119 }
  1359 }
  1201 }
  1441 }
  1202 
  1442 
  1203 .media-selection .attachments {
  1443 .media-selection .attachments {
  1204 	display: inline-block;
  1444 	display: inline-block;
  1205 	height: 48px;
  1445 	height: 48px;
  1206 	margin-top: 5px;
  1446 	margin: 6px;
       
  1447 	padding: 0;
  1207 	overflow: hidden;
  1448 	overflow: hidden;
  1208 	vertical-align: top;
  1449 	vertical-align: top;
  1209 }
  1450 }
  1210 
  1451 
       
  1452 .media-selection .attachment {
       
  1453 	width: 40px;
       
  1454 	padding: 0;
       
  1455 	margin: 4px;
       
  1456 }
       
  1457 
       
  1458 .media-selection .attachment .thumbnail {
       
  1459 	top: 0;
       
  1460 	right: 0;
       
  1461 	bottom: 0;
       
  1462 	left: 0;
       
  1463 }
       
  1464 
  1211 .media-selection .attachment .icon {
  1465 .media-selection .attachment .icon {
  1212 	width: 50%;
  1466 	width: 50%;
  1213 }
  1467 }
  1214 
  1468 
  1215 .attachment.selection.selected {
  1469 .media-selection .attachment-preview {
       
  1470 	-webkit-box-shadow: none;
  1216 	box-shadow: none;
  1471 	box-shadow: none;
  1217 }
  1472 	background: none;
  1218 
  1473 }
  1219 .attachment.selection.details {
  1474 
       
  1475 .wp-core-ui .media-selection .attachment:focus,
       
  1476 .wp-core-ui .media-selection .selected.attachment:focus,
       
  1477 .wp-core-ui .media-selection .attachment.details:focus {
       
  1478 	-webkit-box-shadow:
       
  1479 		0 0 0 1px #fff,
       
  1480 		0 0 2px 3px #5b9dd9;
  1220 	box-shadow:
  1481 	box-shadow:
  1221 		0 0 0 1px #fff,
  1482 		0 0 0 1px #fff,
  1222 		0 0 0 4px #1e8cbe;
  1483 		0 0 2px 3px #5b9dd9;
  1223 }
  1484 }
  1224 
  1485 
  1225 .media-selection .attachment.selection.details {
  1486 .wp-core-ui .media-selection .selected.attachment {
       
  1487 	-webkit-box-shadow: none;
       
  1488 	box-shadow: none;
       
  1489 }
       
  1490 
       
  1491 .wp-core-ui .media-selection .attachment.details {
       
  1492 	-webkit-box-shadow:
       
  1493 		0 0 0 1px #fff,
       
  1494 		0 0 0 3px #1e8cbe;
  1226 	box-shadow:
  1495 	box-shadow:
  1227 		0 0 0 1px #fff,
  1496 		0 0 0 1px #fff,
  1228 		0 0 0 3px #1e8cbe;
  1497 		0 0 0 3px #1e8cbe;
  1229 }
  1498 }
  1230 
  1499 
  1234 	position: absolute;
  1503 	position: absolute;
  1235 	top: 0;
  1504 	top: 0;
  1236 	right: 0;
  1505 	right: 0;
  1237 	bottom: 0;
  1506 	bottom: 0;
  1238 	width: 25px;
  1507 	width: 25px;
  1239 	background-image: -webkit-gradient(linear, right top, left top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
  1508 	background-image: -webkit-gradient(linear, right top, left top, from(rgba( 255, 255, 255, 1 )), to(rgba( 255, 255, 255, 0 )));
  1240 	background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
  1509 	background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ), rgba( 255, 255, 255, 0 ));
  1241 	background-image:    -moz-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
  1510 	background-image: linear-gradient(to left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
  1242 	background-image:      -o-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
       
  1243 	background-image:   linear-gradient(to left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
       
  1244 }
  1511 }
  1245 
  1512 
  1246 .media-selection .attachment .filename {
  1513 .media-selection .attachment .filename {
  1247 	display: none;
  1514 	display: none;
  1248 }
  1515 }
  1249 
  1516 
  1250 /**
  1517 /**
  1251  * Spinner
  1518  * Spinner
  1252  */
  1519  */
  1253 
       
  1254 .media-frame .spinner {
  1520 .media-frame .spinner {
  1255 	background: url(../images/wpspin.gif) no-repeat;
  1521 	background: url(../images/spinner.gif) no-repeat;
  1256 	background-size: 16px 16px;
  1522 	-webkit-background-size: 20px 20px;
  1257 	display: none;
  1523 	background-size: 20px 20px;
       
  1524 	float: right;
       
  1525 	display: inline-block;
       
  1526 	visibility: hidden;
  1258 	opacity: 0.7;
  1527 	opacity: 0.7;
  1259 	filter: alpha(opacity=70);
  1528 	filter: alpha(opacity=70);
  1260 	width: 16px;
  1529 	width: 20px;
  1261 	height: 16px;
  1530 	height: 20px;
  1262 	margin: 0;
  1531 	margin: 0;
  1263 }
  1532 	vertical-align: middle;
  1264 
  1533 }
  1265 .media-sidebar .settings-save-status {
  1534 
  1266 	background: #f5f5f5;
  1535 .media-frame .spinner.is-active {
  1267 	float: right;
  1536 	visibility: visible;
  1268 	text-transform: none;
  1537 }
  1269 	z-index: 10;
  1538 
  1270 }
  1539 .media-toolbar .spinner {
  1271 
  1540 	margin-top: 14px;
  1272 .media-sidebar .settings-save-status .spinner {
       
  1273 	margin: 0 5px 0;
       
  1274 }
       
  1275 
       
  1276 .media-sidebar .settings-save-status .saved {
       
  1277 	float: right;
       
  1278 	display: none;
       
  1279 }
       
  1280 
       
  1281 .media-sidebar .save-waiting .settings-save-status .spinner,
       
  1282 .media-sidebar .save-complete .settings-save-status .saved {
       
  1283 	display: block;
       
  1284 }
  1541 }
  1285 
  1542 
  1286 /**
  1543 /**
  1287  * Attachment Details
  1544  * Attachment Details
  1288  */
  1545  */
  1289 .attachment-details {
  1546 .attachment-details {
  1290 	position: relative;
  1547 	position: relative;
  1291 	overflow: auto;
  1548 	overflow: auto;
  1292 }
  1549 }
  1293 
  1550 
       
  1551 .attachment-details .settings-save-status {
       
  1552 	float: right;
       
  1553 	text-transform: none;
       
  1554 	z-index: 10;
       
  1555 }
       
  1556 
       
  1557 .attachment-details .settings-save-status .spinner {
       
  1558 	margin-left: 5px;
       
  1559 }
       
  1560 
       
  1561 .attachment-details .settings-save-status .saved {
       
  1562 	float: right;
       
  1563 	display: none;
       
  1564 }
       
  1565 
       
  1566 .attachment-details.save-waiting .settings-save-status .spinner {
       
  1567 	visibility: visible;
       
  1568 }
       
  1569 
       
  1570 .attachment-details.save-complete .settings-save-status .saved {
       
  1571 	display: block;
       
  1572 }
       
  1573 
  1294 .attachment-info {
  1574 .attachment-info {
  1295 	overflow: hidden;
  1575 	overflow: hidden;
  1296 	min-height: 60px;
  1576 	min-height: 60px;
  1297 	margin-bottom: 16px;
  1577 	margin-bottom: 16px;
  1298 	line-height: 18px;
  1578 	line-height: 18px;
  1299 	color: #999;
  1579 	color: #666;
  1300 	border-bottom: 1px solid #e5e5e5;
  1580 	border-bottom: 1px solid #ddd;
  1301 	box-shadow: 0 1px 0 #fff;
       
  1302 	padding-bottom: 11px;
  1581 	padding-bottom: 11px;
  1303 }
  1582 }
  1304 
  1583 
  1305 .attachment-info .filename {
  1584 .attachment-info .filename {
  1306 	font-weight: bold;
  1585 	font-weight: bold;
  1319 }
  1598 }
  1320 
  1599 
  1321 .uploading .attachment-info .thumbnail {
  1600 .uploading .attachment-info .thumbnail {
  1322 	width: 120px;
  1601 	width: 120px;
  1323 	height: 80px;
  1602 	height: 80px;
       
  1603 	-webkit-box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
  1324 	box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
  1604 	box-shadow: inset 0 0 15px rgba( 0, 0, 0, 0.1 );
  1325 }
  1605 }
  1326 
  1606 
  1327 .uploading .attachment-info .media-progress-bar {
  1607 .uploading .attachment-info .media-progress-bar {
  1328 	margin-top: 35px;
  1608 	margin-top: 35px;
  1329 }
  1609 }
  1330 
  1610 
  1331 .attachment-info .thumbnail:after {
  1611 .attachment-info .thumbnail-image:after {
  1332 	content: '';
  1612 	content: '';
  1333 	display: block;
  1613 	display: block;
  1334 	position: absolute;
  1614 	position: absolute;
  1335 	top: 0;
  1615 	top: 0;
  1336 	left: 0;
  1616 	left: 0;
  1337 	right: 0;
  1617 	right: 0;
  1338 	bottom: 0;
  1618 	bottom: 0;
       
  1619 	-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
  1339 	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
  1620 	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
  1340 	overflow: hidden;
  1621 	overflow: hidden;
  1341 }
  1622 }
  1342 
  1623 
  1343 .attachment-info .thumbnail img {
  1624 .attachment-info .thumbnail img {
  1353 	max-width: 100%;
  1634 	max-width: 100%;
  1354 }
  1635 }
  1355 
  1636 
  1356 .attachment-info .edit-attachment,
  1637 .attachment-info .edit-attachment,
  1357 .attachment-info .refresh-attachment,
  1638 .attachment-info .refresh-attachment,
  1358 .attachment-info .delete-attachment {
  1639 .attachment-info .delete-attachment,
       
  1640 .attachment-info .trash-attachment,
       
  1641 .attachment-info .untrash-attachment {
  1359 	display: block;
  1642 	display: block;
  1360 	text-decoration: none;
  1643 	text-decoration: none;
  1361 	white-space: nowrap;
  1644 	white-space: nowrap;
  1362 }
  1645 }
  1363 
  1646 
  1369 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
  1652 .attachment-details.needs-refresh .attachment-info .refresh-attachment,
  1370 .attachment-info .edit-attachment {
  1653 .attachment-info .edit-attachment {
  1371 	display: block;
  1654 	display: block;
  1372 }
  1655 }
  1373 
  1656 
  1374 .attachment-info .delete-attachment {
  1657 .media-modal .delete-attachment,
       
  1658 .media-modal .trash-attachment,
       
  1659 .media-modal .untrash-attachment {
  1375 	color: #bc0b0b;
  1660 	color: #bc0b0b;
  1376 }
  1661 }
  1377 
  1662 
  1378 .attachment-info .delete-attachment:hover {
  1663 .media-modal .delete-attachment:hover,
       
  1664 .media-modal .trash-attachment:hover,
       
  1665 .media-modal .untrash-attachment:hover {
  1379 	color: red;
  1666 	color: red;
  1380 }
  1667 }
  1381 
  1668 
  1382 /**
  1669 /**
  1383  * Attachment Display Settings
  1670  * Attachment Display Settings
  1390 
  1677 
  1391 .attachment-display-settings h4 {
  1678 .attachment-display-settings h4 {
  1392 	margin: 1.4em 0 0.4em;
  1679 	margin: 1.4em 0 0.4em;
  1393 }
  1680 }
  1394 
  1681 
  1395 .gallery-settings {
  1682 .collection-settings {
  1396 	overflow: hidden;
  1683 	overflow: hidden;
  1397 }
  1684 }
  1398 
  1685 
       
  1686 .collection-settings .setting input[type="checkbox"] {
       
  1687 	float: left;
       
  1688 	margin-right: 8px;
       
  1689 }
       
  1690 
       
  1691 .collection-settings .setting span {
       
  1692 	min-width: inherit;
       
  1693 }
       
  1694 
  1399 /**
  1695 /**
  1400  * Embed from URL
  1696  * Image Editor
       
  1697  */
       
  1698 .media-modal .imgedit-wrap {
       
  1699 	position: static;
       
  1700 }
       
  1701 
       
  1702 .media-modal .imgedit-wait {
       
  1703 	height: auto !important;
       
  1704 	right: 0;
       
  1705 	bottom: 0;
       
  1706 	left: 0;
       
  1707 }
       
  1708 
       
  1709 .media-modal .imgedit-wrap .imgedit-panel-content {
       
  1710 	padding: 16px;
       
  1711 	position: absolute;
       
  1712 	top: 0;
       
  1713 	right: 282px;
       
  1714 	bottom: 0;
       
  1715 	left: 0;
       
  1716 	overflow: auto;
       
  1717 }
       
  1718 
       
  1719 .media-modal .imgedit-wrap .imgedit-settings {
       
  1720 	background: #f3f3f3;
       
  1721 	border-left: 1px solid #ddd;
       
  1722 	padding: 0 16px 16px;
       
  1723 	position: absolute;
       
  1724 	top: 0;
       
  1725 	right: 0;
       
  1726 	bottom: 0;
       
  1727 	width: 250px;
       
  1728 	overflow: auto;
       
  1729 }
       
  1730 
       
  1731 .media-modal .imgedit-group {
       
  1732 	background: none;
       
  1733 	border: none;
       
  1734 	border-bottom: 1px solid #ddd;
       
  1735 	-webkit-box-shadow: none;
       
  1736 	box-shadow: none;
       
  1737 	margin: 0;
       
  1738 	margin-bottom: 16px;
       
  1739 	padding: 0;
       
  1740 	padding-bottom: 16px;
       
  1741 	position: relative; /* RTL fix, #WP29352 */
       
  1742 }
       
  1743 
       
  1744 .media-modal .imgedit-group:last-of-type {
       
  1745 	border: none;
       
  1746 	margin: 0;
       
  1747 	padding: 0;
       
  1748 }
       
  1749 
       
  1750 .media-modal .imgedit-group-top h3 {
       
  1751 	text-transform: uppercase;
       
  1752 	font-size: 12px;
       
  1753 	color: #666;
       
  1754 	margin: 0;
       
  1755 	margin-top: 24px;
       
  1756 }
       
  1757 
       
  1758 .media-modal .imgedit-group-top h3 a {
       
  1759 	text-decoration: none;
       
  1760 	color: #666;
       
  1761 }
       
  1762 
       
  1763 .media-modal .imgedit-help-toggle {
       
  1764 	margin-top: -2px;
       
  1765 	cursor: pointer;
       
  1766 	color: #666;
       
  1767 }
       
  1768 
       
  1769 .media-modal .imgedit-help-toggled span.dashicons:before {
       
  1770 	content: '\f142';
       
  1771 }
       
  1772 
       
  1773 .media-modal .imgedit-group img {
       
  1774 	margin-top: 5px;
       
  1775 }
       
  1776 
       
  1777 .media-modal .imgedit-wrap div.updated {
       
  1778 	margin: 0;
       
  1779 	margin-bottom: 16px;
       
  1780 }
       
  1781 
       
  1782 
       
  1783 /**
       
  1784  * Embed from URL and Image Details
  1401  */
  1785  */
  1402 .embed-url {
  1786 .embed-url {
  1403 	display: block;
  1787 	display: block;
  1404 	position: relative;
  1788 	position: relative;
  1405 	padding: 0 16px 7px;
  1789 	padding: 16px;
  1406 	margin: 0;
  1790 	margin: 0;
  1407 	z-index: 250;
  1791 	z-index: 250;
  1408 	background: #fff;
  1792 	background: #fff;
  1409 	border-bottom: 1px solid #dfdfdf;
       
  1410 	box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
       
  1411 	font-size: 18px;
  1793 	font-size: 18px;
  1412 	font-weight: 200;
       
  1413 }
  1794 }
  1414 
  1795 
  1415 .media-frame .embed-url input {
  1796 .media-frame .embed-url input {
  1416 	font-size: 18px;
  1797 	font-size: 18px;
  1417 	padding: 12px 14px;
  1798 	padding: 12px 14px;
  1418 	width: 100%;
  1799 	width: 100%;
  1419 	min-width: 200px;
  1800 	min-width: 200px;
       
  1801 	-webkit-box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
  1420 	box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
  1802 	box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
  1421 }
  1803 }
  1422 
  1804 
  1423 .media-frame .embed-url .spinner {
  1805 .media-frame .embed-url .spinner {
  1424 	position: absolute;
  1806 	position: absolute;
  1425 	top: 16px;
  1807 	top: 32px;
  1426 	right: 26px;
  1808 	right: 26px;
  1427 }
  1809 }
  1428 
  1810 
  1429 .media-frame .embed-loading .embed-url .spinner {
  1811 .media-frame .embed-loading .embed-url .spinner {
  1430 	display: block;
  1812 	visibility: visible;
  1431 }
  1813 }
  1432 
  1814 
  1433 .embed-link-settings,
  1815 .embed-link-settings,
  1434 .embed-image-settings {
  1816 .embed-media-settings {
  1435 	position: absolute;
  1817 	position: absolute;
  1436 	background: #f5f5f5;
  1818 	top: 70px;
  1437 	top: 57px;
       
  1438 	left: 0;
  1819 	left: 0;
  1439 	right: 0;
  1820 	right: 0;
  1440 	bottom: 0;
  1821 	bottom: 0;
  1441 	padding: 16px 16px 32px;
  1822 	padding: 16px 16px 32px;
  1442 	overflow: auto;
  1823 	overflow: auto;
       
  1824 }
       
  1825 
       
  1826 .embed-preview img,
       
  1827 .embed-preview iframe,
       
  1828 .embed-preview embed {
       
  1829 	max-width: 100%;
       
  1830 }
       
  1831 
       
  1832 .embed-preview a {
       
  1833 	display: inline-block;
       
  1834 }
       
  1835 
       
  1836 .embed-preview img {
       
  1837 	display: block;
       
  1838 	height: auto;
       
  1839 }
       
  1840 
       
  1841 .image-details .media-modal {
       
  1842 	left: 140px;
       
  1843 	right: 140px;
       
  1844 }
       
  1845 
       
  1846 .image-details .media-frame-title,
       
  1847 .image-details .media-frame-content,
       
  1848 .image-details .media-frame-router {
       
  1849 	left: 0;
       
  1850 }
       
  1851 
       
  1852 .image-details .embed-media-settings {
       
  1853 	top: 0;
       
  1854 	overflow: visible;
       
  1855 	padding: 0;
       
  1856 }
       
  1857 
       
  1858 .image-details .embed-media-settings,
       
  1859 .image-details .embed-media-settings div {
       
  1860 	-webkit-box-sizing: border-box;
       
  1861 	-moz-box-sizing: border-box;
       
  1862 	box-sizing: border-box;
       
  1863 }
       
  1864 
       
  1865 .image-details .column-settings {
       
  1866 	background: #f3f3f3;
       
  1867 	border-right: 1px solid #ddd;
       
  1868 	min-height: 100%;
       
  1869 	width: 55%;
       
  1870 	position: absolute;
       
  1871 	top: 0;
       
  1872 	left: 0;
       
  1873 }
       
  1874 
       
  1875 .image-details .column-settings h3 {
       
  1876 	margin: 20px;
       
  1877 	padding-top: 20px;
       
  1878 	border-top: 1px solid #ddd;
       
  1879 }
       
  1880 
       
  1881 .image-details .column-image {
       
  1882 	width: 45%;
       
  1883 	position: absolute;
       
  1884 	left: 55%;
       
  1885 	top: 0;
       
  1886 }
       
  1887 
       
  1888 .image-details .image {
       
  1889 	margin: 20px;
       
  1890 }
       
  1891 
       
  1892 .image-details .image img {
       
  1893 	max-width: 100%;
       
  1894 	max-height: 500px;
       
  1895 }
       
  1896 
       
  1897 .image-details .advanced-toggle {
       
  1898 	color: #666;
       
  1899 	text-decoration: none;
       
  1900 	display: block;
       
  1901 }
       
  1902 
       
  1903 .image-details .advanced-toggle:after {
       
  1904 	font: normal 20px/1 'dashicons';
       
  1905 	speak: none;
       
  1906 	vertical-align: top;
       
  1907 	-webkit-font-smoothing: antialiased;
       
  1908 	-moz-osx-font-smoothing: grayscale;
       
  1909 	content: '\f140';
       
  1910 	display: inline-block;
       
  1911 	margin-top: -2px;
       
  1912 }
       
  1913 
       
  1914 .image-details .advanced-visible .advanced-toggle:after {
       
  1915 	content: '\f142';
       
  1916 }
       
  1917 
       
  1918 .image-details .embed-media-settings .size {
       
  1919 	margin-bottom: 4px;
       
  1920 }
       
  1921 
       
  1922 .image-details .custom-size span {
       
  1923 	display: block;
       
  1924 }
       
  1925 
       
  1926 .image-details .custom-size label {
       
  1927 	display: block;
       
  1928 	float: left;
       
  1929 }
       
  1930 
       
  1931 .image-details .custom-size span small {
       
  1932 	color: #999;
       
  1933 	font-size: inherit;
       
  1934 }
       
  1935 
       
  1936 .image-details .custom-size input {
       
  1937 	width: 5em;
       
  1938 }
       
  1939 
       
  1940 .image-details .custom-size .sep {
       
  1941 	float: left;
       
  1942 	margin: 26px 6px 0 6px;
       
  1943 }
       
  1944 
       
  1945 .image-details .custom-size:after {
       
  1946 	content: '';
       
  1947 	display: table;
       
  1948 	clear: both;
  1443 }
  1949 }
  1444 
  1950 
  1445 .media-embed .thumbnail {
  1951 .media-embed .thumbnail {
  1446 	max-width: 100%;
  1952 	max-width: 100%;
  1447 	max-height: 200px;
  1953 	max-height: 200px;
  1460 	position: absolute;
  1966 	position: absolute;
  1461 	top: 0;
  1967 	top: 0;
  1462 	left: 0;
  1968 	left: 0;
  1463 	right: 0;
  1969 	right: 0;
  1464 	bottom: 0;
  1970 	bottom: 0;
       
  1971 	-webkit-box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
  1465 	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
  1972 	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
  1466 	overflow: hidden;
  1973 	overflow: hidden;
  1467 }
  1974 }
  1468 
  1975 
  1469 .media-embed .setting {
  1976 .media-embed .setting {
  1470 	width: 100%;
  1977 	width: 100%;
  1471 	margin-top: 10px;
  1978 	margin: 10px 0;
  1472 	float: left;
  1979 	float: left;
  1473 	display: block;
  1980 	display: block;
  1474 	clear: both;
  1981 	clear: both;
       
  1982 }
       
  1983 
       
  1984 .image-details .embed-media-settings .setting {
       
  1985 	float: none;
       
  1986 	width: auto;
       
  1987 }
       
  1988 
       
  1989 .image-details .actions {
       
  1990 	margin: 10px 0;
       
  1991 }
       
  1992 
       
  1993 .image-details .hidden {
       
  1994 	display: none;
       
  1995 }
       
  1996 
       
  1997 .media-embed .setting input[type="text"],
       
  1998 .media-embed .setting textarea {
       
  1999 	display: block;
       
  2000 	width: 100%;
       
  2001 	max-width: 400px;
       
  2002 	margin: 1px 0;
       
  2003 }
       
  2004 
       
  2005 .image-details .embed-media-settings .setting input[type="text"],
       
  2006 .image-details .embed-media-settings .setting textarea {
       
  2007 	max-width: inherit;
       
  2008 	width: 70%;
       
  2009 }
       
  2010 
       
  2011 .image-details .embed-media-settings .setting input.link-to-custom,
       
  2012 .image-details .embed-media-settings .link-target,
       
  2013 .image-details .embed-media-settings .custom-size {
       
  2014 	margin-left: 27%;
       
  2015 	width: 70%;
       
  2016 }
       
  2017 
       
  2018 .image-details .embed-media-settings .link-target {
       
  2019 	margin-top: 24px;
       
  2020 }
       
  2021 
       
  2022 .media-embed .setting input.hidden,
       
  2023 .media-embed .setting textarea.hidden {
       
  2024 	display: none;
  1475 }
  2025 }
  1476 
  2026 
  1477 .media-embed .setting span {
  2027 .media-embed .setting span {
  1478 	display: block;
  2028 	display: block;
  1479 	width: 200px;
  2029 	width: 200px;
  1480 	font-size: 13px;
  2030 	font-size: 13px;
  1481 	line-height: 24px;
  2031 	line-height: 24px;
  1482 	color: #999;
  2032 	color: #666;
  1483 	text-shadow: 0 1px 0 #fff;
  2033 }
       
  2034 
       
  2035 .image-details .embed-media-settings .setting span {
       
  2036 	float: left;
       
  2037 	width: 25%;
       
  2038 	text-align: right;
       
  2039 	margin: 8px 1% 0 1%;
       
  2040 	line-height: 1.1;
  1484 }
  2041 }
  1485 
  2042 
  1486 .media-embed .setting .button-group {
  2043 .media-embed .setting .button-group {
  1487 	margin: 2px 0;
  2044 	margin: 2px 0;
  1488 }
  2045 }
  1489 
  2046 
  1490 .media-embed .setting input,
  2047 .media-embed-sidebar {
  1491 .media-embed .setting textarea {
  2048 	position: absolute;
  1492 	display: block;
  2049 	top: 0;
       
  2050 	left: 440px;
       
  2051 }
       
  2052 
       
  2053 .advanced-section,
       
  2054 .link-settings {
       
  2055 	margin-top: 10px;
       
  2056 }
       
  2057 
       
  2058 /* Drag & drop on the editor upload */
       
  2059 #wp-fullscreen-body .uploader-editor,
       
  2060 .wp-editor-wrap .uploader-editor {
       
  2061 	background: rgba( 150, 150, 150, 0.9 );
       
  2062 	position: absolute;
       
  2063 	top: 0;
       
  2064 	left: 0;
  1493 	width: 100%;
  2065 	width: 100%;
  1494 	max-width: 400px;
  2066 	height: 100%;
  1495 	margin: 1px 0;
  2067 	z-index: 99998; /* under the toolbar */
       
  2068 	display: none;
       
  2069 	text-align: center;
       
  2070 }
       
  2071 
       
  2072 #wp-fullscreen-body .uploader-editor {
       
  2073 	background: rgba( 0, 86, 132, 0.9 );
       
  2074 	position: fixed;
       
  2075 	z-index: 100050; /* above the editor toolbar */
       
  2076 }
       
  2077 
       
  2078 .wp-editor-wrap.wp-fullscreen-wrap .uploader-editor {
       
  2079 	opacity: 0;
       
  2080 }
       
  2081 
       
  2082 #wp-fullscreen-body .uploader-editor-content,
       
  2083 .wp-editor-wrap .uploader-editor-content {
       
  2084 	border: 1px dashed #fff;
       
  2085 	position: absolute;
       
  2086 	top: 10px;
       
  2087 	left: 10px;
       
  2088 	right: 10px;
       
  2089 	bottom: 10px;
       
  2090 }
       
  2091 
       
  2092 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
       
  2093 .wp-editor-wrap .uploader-editor .uploader-editor-title {
       
  2094 	position: absolute;
       
  2095 	top: 50%;
       
  2096 	left: 0;
       
  2097 	right: 0;
       
  2098 	-webkit-transform: translateY( -50% );
       
  2099 	-ms-transform: translateY(-50%);
       
  2100 	transform: translateY( -50% );
       
  2101 	font-size: 3em;
       
  2102 	line-height: 1.3;
       
  2103 	font-weight: bold;
       
  2104 	color: #fff;
       
  2105 	padding: 0;
       
  2106 	margin: 0;
       
  2107 	display: none;
       
  2108 }
       
  2109 
       
  2110 .wp-editor-wrap .uploader-editor.droppable {
       
  2111 	background: rgba( 0, 86, 132, 0.9 );
       
  2112 }
       
  2113 
       
  2114 #wp-fullscreen-body .uploader-editor .uploader-editor-title,
       
  2115 .wp-editor-wrap .uploader-editor.droppable .uploader-editor-title {
       
  2116 	display: block;
  1496 }
  2117 }
  1497 
  2118 
  1498 /**
  2119 /**
  1499  * IE7 Fixes
  2120  * IE7 Fixes
  1500  */
  2121  */
  1527 
  2148 
  1528 .ie7 .media-sidebar .setting select {
  2149 .ie7 .media-sidebar .setting select {
  1529 	max-width: 55%;
  2150 	max-width: 55%;
  1530 }
  2151 }
  1531 
  2152 
  1532 .ie7 .media-sidebar .setting input,
  2153 .ie7 .media-sidebar .setting input[type="text"],
       
  2154 .ie7 .media-sidebar .setting input[type="password"],
       
  2155 .ie7 .media-sidebar .setting input[type="email"],
       
  2156 .ie7 .media-sidebar .setting input[type="number"],
       
  2157 .ie7 .media-sidebar .setting input[type="search"],
       
  2158 .ie7 .media-sidebar .setting input[type="tel"],
       
  2159 .ie7 .media-sidebar .setting input[type="url"],
  1533 .ie7 .media-sidebar .setting textarea {
  2160 .ie7 .media-sidebar .setting textarea {
  1534 	width: 55%;
  2161 	width: 55%;
  1535 }
  2162 }
  1536 
  2163 
  1537 .ie7 .media-sidebar .setting .link-to-custom {
  2164 .ie7 .media-sidebar .setting .link-to-custom {
  1538 	float: left;
  2165 	float: left;
  1539 }
  2166 }
  1540 
  2167 
  1541 @media only screen and (max-width: 960px) {
  2168 /**
  1542 	.media-frame-content .media-toolbar-primary .search,
  2169  * Localization
  1543 	.media-frame-content .media-toolbar-secondary .attachment-filters {
  2170  */
  1544 		max-width: 120px;
  2171 .rtl .media-modal,
  1545 	}
  2172 .rtl .media-frame,
       
  2173 .rtl .media-frame .search,
       
  2174 .rtl .media-frame input[type="text"],
       
  2175 .rtl .media-frame input[type="password"],
       
  2176 .rtl .media-frame input[type="number"],
       
  2177 .rtl .media-frame input[type="search"],
       
  2178 .rtl .media-frame input[type="email"],
       
  2179 .rtl .media-frame input[type="url"],
       
  2180 .rtl .media-frame input[type="tel"],
       
  2181 .rtl .media-frame textarea,
       
  2182 .rtl .media-frame select {
       
  2183 	font-family: Tahoma, sans-serif;
       
  2184 }
       
  2185 
       
  2186 :lang(he-il) .rtl .media-modal,
       
  2187 :lang(he-il) .rtl .media-frame,
       
  2188 :lang(he-il) .rtl .media-frame .search,
       
  2189 :lang(he-il) .rtl .media-frame input[type="text"],
       
  2190 :lang(he-il) .rtl .media-frame input[type="password"],
       
  2191 :lang(he-il) .rtl .media-frame input[type="number"],
       
  2192 :lang(he-il) .rtl .media-frame input[type="search"],
       
  2193 :lang(he-il) .rtl .media-frame input[type="email"],
       
  2194 :lang(he-il) .rtl .media-frame input[type="url"],
       
  2195 :lang(he-il) .rtl .media-frame textarea,
       
  2196 :lang(he-il) .rtl .media-frame select {
       
  2197 	font-family: Arial, sans-serif;
  1546 }
  2198 }
  1547 
  2199 
  1548 /**
  2200 /**
  1549  * Responsive layout
  2201  * Responsive layout
  1550  */
  2202  */
  1551 @media only screen and (max-width: 900px) {
  2203 @media only screen and (max-width: 900px) {
  1552 	.media-frame-menu {
  2204 
  1553 		width: 139px;
  2205 	/* Drop-down menu */
  1554 	}
  2206 	.media-frame:not(.hide-menu) .media-frame-title,
  1555 
  2207 	.media-frame:not(.hide-menu) .media-frame-router,
  1556 	.media-menu > a {
  2208 	.media-frame:not(.hide-menu) .media-frame-content,
  1557 		padding: 4px 10px;
  2209 	.media-frame:not(.hide-menu) .media-frame-toolbar {
  1558 	}
  2210 		left: 0;
  1559 
  2211 	}
  1560 	.media-frame-title,
  2212 
  1561 	.media-frame-router,
  2213 	.media-frame:not(.hide-menu) .media-frame-menu {
  1562 	.media-frame-content,
  2214 		position: static;
  1563 	.media-frame-toolbar {
  2215 		width: 0;
  1564 		left: 140px;
  2216 	}
  1565 	}
  2217 
       
  2218 	.media-frame:not(.hide-menu) .media-menu {
       
  2219 		width: auto;
       
  2220 		max-width: 80%;
       
  2221 		overflow: auto;
       
  2222 		z-index: 2000;
       
  2223 		top: 50px;
       
  2224 		left: -300px;
       
  2225 		right: auto;
       
  2226 		bottom: auto;
       
  2227 		padding: 5px 0;
       
  2228 		border: 1px solid #ccc;
       
  2229 	}
       
  2230 
       
  2231 	.media-frame:not(.hide-menu) .media-menu.visible {
       
  2232 		left: 0;
       
  2233 	}
       
  2234 
       
  2235 	.media-frame:not(.hide-menu) .media-menu > a {
       
  2236 		padding: 12px 16px;
       
  2237 		font-size: 16px;
       
  2238 	}
       
  2239 
       
  2240 	.media-frame:not(.hide-menu) .media-menu > a.active {
       
  2241 		display: none;
       
  2242 	}
       
  2243 
       
  2244 	.media-frame:not(.hide-menu) .media-menu .separator {
       
  2245 		margin: 5px 10px;
       
  2246 	}
       
  2247 
       
  2248 	.media-frame:not(.hide-menu) .media-frame-title {
       
  2249 		left: 0;
       
  2250 		color: #21759b;
       
  2251 	}
       
  2252 
       
  2253 	.media-frame:not(.hide-menu) .media-frame-title .dashicons {
       
  2254 		display: inline-block;
       
  2255 		line-height: 50px;
       
  2256 	}
       
  2257 
       
  2258 	.media-frame:not(.hide-menu) .media-frame-title h1 {
       
  2259 		line-height: 3;
       
  2260 		font-size: 18px;
       
  2261 		float: left;
       
  2262 		cursor: pointer;
       
  2263 	}
       
  2264 	/* End drop-down menu */
  1566 
  2265 
  1567 	.media-sidebar {
  2266 	.media-sidebar {
  1568 		width: 159px;
  2267 		width: 230px;
  1569 		padding: 0 10px 24px;
       
  1570 	}
  2268 	}
  1571 
  2269 
  1572 	.attachments-browser .attachments,
  2270 	.attachments-browser .attachments,
  1573 	.attachments-browser .uploader-inline,
  2271 	.attachments-browser .uploader-inline,
  1574 	.attachments-browser .media-toolbar {
  2272 	.attachments-browser .media-toolbar {
  1575 		right: 180px;
  2273 		right: 262px;
       
  2274 	}
       
  2275 
       
  2276 	.media-sidebar .setting,
       
  2277 	.attachment-details .setting {
       
  2278 		margin: 6px 0px;
  1576 	}
  2279 	}
  1577 
  2280 
  1578 	.media-sidebar .setting input,
  2281 	.media-sidebar .setting input,
  1579 	.media-sidebar .setting textarea,
  2282 	.media-sidebar .setting textarea,
  1580 	.media-sidebar .setting span,
  2283 	.media-sidebar .setting span,
       
  2284 	.attachment-details .setting input,
       
  2285 	.attachment-details .setting textarea,
       
  2286 	.attachment-details .setting span,
  1581 	.compat-item label span {
  2287 	.compat-item label span {
  1582 		float: none;
  2288 		float: none;
  1583 	}
  2289 	}
  1584 
  2290 
  1585 	.media-sidebar .setting span,
  2291 	.media-sidebar .setting span,
       
  2292 	.attachment-details .setting span,
  1586 	.compat-item label span {
  2293 	.compat-item label span {
  1587 		text-align: inherit;
  2294 		text-align: inherit;
  1588 		display: block;
       
  1589 		min-height: 16px;
  2295 		min-height: 16px;
  1590 		margin: 0;
  2296 		margin: 0;
  1591 		padding: 8px 2px 0;
  2297 		padding: 8px 2px 0;
  1592 	}
  2298 	}
  1593 
  2299 
  1594 	.media-sidebar .setting input,
  2300 	.media-sidebar .setting .value,
       
  2301 	.attachment-details .setting .value {
       
  2302 		float: none;
       
  2303 		width: auto;
       
  2304 	}
       
  2305 
       
  2306 	.media-sidebar .setting input[type="text"],
       
  2307 	.media-sidebar .setting input[type="password"],
       
  2308 	.media-sidebar .setting input[type="email"],
       
  2309 	.media-sidebar .setting input[type="number"],
       
  2310 	.media-sidebar .setting input[type="search"],
       
  2311 	.media-sidebar .setting input[type="tel"],
       
  2312 	.media-sidebar .setting input[type="url"],
  1595 	.media-sidebar .setting textarea,
  2313 	.media-sidebar .setting textarea,
  1596 	.media-sidebar .setting select {
  2314 	.media-sidebar .setting select,
       
  2315 	.attachment-details .setting input[type="text"],
       
  2316 	.attachment-details .setting input[type="password"],
       
  2317 	.attachment-details .setting input[type="email"],
       
  2318 	.attachment-details .setting input[type="number"],
       
  2319 	.attachment-details .setting input[type="search"],
       
  2320 	.attachment-details .setting input[type="tel"],
       
  2321 	.attachment-details .setting input[type="url"],
       
  2322 	.attachment-details .setting textarea,
       
  2323 	.attachment-details .setting select {
       
  2324 		float: none;
  1597 		width: 98%;
  2325 		width: 98%;
  1598 		max-width: none;
  2326 		max-width: none;
  1599 	}
  2327 		height: auto;
  1600 
  2328 	}
  1601 	.media-sidebar .setting select.columns {
  2329 
       
  2330 	.media-sidebar .setting select.columns,
       
  2331 	.attachment-details .setting select.columns {
  1602 		width: auto;
  2332 		width: auto;
  1603 	}
  2333 	}
  1604 
  2334 
  1605 	.media-frame input,
  2335 	.media-frame input,
  1606 	.media-frame textarea,
  2336 	.media-frame textarea,
  1607 	.media-frame .search {
  2337 	.media-frame .search {
  1608 		padding: 3px 6px;
  2338 		padding: 3px 6px;
  1609 	}
  2339 	}
  1610 
  2340 
  1611 	.media-frame-content .attachment .icon {
  2341 	.image-details .column-image {
  1612 		top: 40%;
  2342 		width: 30%;
       
  2343 		left: 70%;
       
  2344 	}
       
  2345 
       
  2346 	.image-details .column-settings {
       
  2347 		width: 70%;
       
  2348 	}
       
  2349 
       
  2350 	.image-details .media-modal {
       
  2351 		left: 30px;
       
  2352 		right: 30px;
       
  2353 	}
       
  2354 
       
  2355 	.image-details .embed-media-settings .setting {
       
  2356 		margin: 20px;
       
  2357 	}
       
  2358 
       
  2359 	.image-details .embed-media-settings .setting span {
       
  2360 		float: none;
       
  2361 		text-align: left;
       
  2362 		width: 100%;
       
  2363 		margin-bottom: 4px;
       
  2364 	}
       
  2365 
       
  2366 	.image-details .embed-media-settings .setting input.link-to-custom,
       
  2367 	.image-details .embed-media-settings .setting input[type="text"],
       
  2368 	.image-details .embed-media-settings .setting textarea {
       
  2369 		width: 100%;
       
  2370 		margin-left: 0;
       
  2371 	}
       
  2372 
       
  2373 	.image-details .embed-media-settings .custom-size {
       
  2374 		margin-left: 20px;
       
  2375 	}
       
  2376 
       
  2377 	.collection-settings .setting input[type="checkbox"] {
       
  2378 		margin-top: 0;
  1613 	}
  2379 	}
  1614 
  2380 
  1615 	.media-selection {
  2381 	.media-selection {
  1616 		min-width: 120px;
  2382 		min-width: 120px;
  1617 	}
  2383 	}
  1622 
  2388 
  1623 	.media-selection .attachments {
  2389 	.media-selection .attachments {
  1624 		display: none;
  2390 		display: none;
  1625 	}
  2391 	}
  1626 
  2392 
  1627 	.media-menu .separator {
  2393 	.media-modal .attachments-browser .media-toolbar .search {
  1628 		margin: 12px 10px;
  2394 		max-width: 100%;
  1629 	}
  2395 		height: auto;
  1630 }
  2396 		float: right;
  1631 
  2397 	}
  1632 @media only screen and (max-width: 800px) {
  2398 
       
  2399 	.media-modal .attachments-browser .media-toolbar .attachment-filters {
       
  2400 		height: auto;
       
  2401 	}
       
  2402 
       
  2403 	.media-modal .attachments-browser .media-toolbar .spinner {
       
  2404 		margin: 14px 2px 0;
       
  2405 	}
       
  2406 
       
  2407 	/* Text inputs need to be 16px, or they force zooming on iOS */
       
  2408 	.media-frame input[type="text"],
       
  2409 	.media-frame input[type="password"],
       
  2410 	.media-frame input[type="number"],
       
  2411 	.media-frame input[type="search"],
       
  2412 	.media-frame input[type="email"],
       
  2413 	.media-frame input[type="url"],
       
  2414 	.media-frame textarea,
       
  2415 	.media-frame select {
       
  2416 		font-size: 16px;
       
  2417 	}
       
  2418 }
       
  2419 
       
  2420 /* Responsive on portrait and landscape */
       
  2421 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
       
  2422 	/* Full-bleed modal */
       
  2423 	.media-modal,
       
  2424 	.image-details .media-modal {
       
  2425 		position: fixed;
       
  2426 		top: 0;
       
  2427 		left: 0;
       
  2428 		right: 0;
       
  2429 		bottom: 0;
       
  2430 	}
       
  2431 
       
  2432 	.media-modal-backdrop {
       
  2433 		position: fixed;
       
  2434 	}
       
  2435 
       
  2436 	.media-sidebar {
       
  2437 		z-index: 1900;
       
  2438 		max-width: 70%;
       
  2439 		bottom: 120%;
       
  2440 		-webkit-box-sizing: border-box;
       
  2441 		-moz-box-sizing: border-box;
       
  2442 		box-sizing: border-box;
       
  2443 		padding-bottom: 0;
       
  2444 	}
       
  2445 
       
  2446 	.media-sidebar.visible {
       
  2447 		bottom: 0;
       
  2448 	}
       
  2449 
       
  2450 	.attachments-browser .attachments,
       
  2451 	.attachments-browser .uploader-inline,
       
  2452 	.attachments-browser .media-toolbar {
       
  2453 		right: 0;
       
  2454 	}
       
  2455 
       
  2456 	.image-details .media-frame-title {
       
  2457 		display: block;
       
  2458 		top: 0;
       
  2459 		font-size: 14px;
       
  2460 	}
       
  2461 
       
  2462 	.image-details .column-image,
       
  2463 	.image-details .column-settings {
       
  2464 		width: 100%;
       
  2465 		position: relative;
       
  2466 		left: 0;
       
  2467 	}
       
  2468 
       
  2469 	.image-details .column-settings {
       
  2470 		padding: 4px 0;
       
  2471 	}
       
  2472 
       
  2473 	/* Media tabs on the top */
  1633 	.media-frame-content .media-toolbar .instructions {
  2474 	.media-frame-content .media-toolbar .instructions {
  1634 		display: none;
  2475 		display: none;
  1635 	}
  2476 	}
  1636 }
  2477 }
  1637 
  2478 
  1638 @media only screen and (max-width: 680px) {
  2479 /* Landscape specific header override */
  1639 	.media-frame-content .media-toolbar .search,
  2480 @media screen and (max-height: 400px) {
  1640 	.media-frame-content .media-toolbar .attachment-filters {
  2481 	.media-menu {
  1641 		max-width: 85px;
  2482 		padding: 0;
  1642 	}
  2483 	}
  1643 }
  2484 
  1644 
  2485 	.media-frame-router {
  1645 /* Use the same min-width as in the admin */
  2486 		top: 44px;
  1646 @media only screen and (max-width: 600px) {
  2487 	}
  1647 	.media-modal {
  2488 
  1648 		width: 540px;
  2489 	.media-frame-content {
  1649 		position: absolute;
  2490 		top: 78px;
  1650 	}
  2491 	}
  1651 
  2492 
  1652 	.media-modal-backdrop {
  2493 	.attachments-browser .attachments {
  1653 		width: 600px;
  2494 		top: 40px;
  1654 		position: absolute;
  2495 	}
       
  2496 
       
  2497 	/* Prevent unnecessary scrolling on title input */
       
  2498 	.embed-link-settings {
       
  2499 		overflow: visible;
       
  2500 	}
       
  2501 }
       
  2502 
       
  2503 @media only screen and (max-width: 480px) {
       
  2504 	.media-modal-close {
       
  2505 		top: 5px;
       
  2506 		right: 5px;
       
  2507 	}
       
  2508 
       
  2509 	.media-modal .media-frame-title {
       
  2510 		height: 40px;
       
  2511 	}
       
  2512 
       
  2513 	.media-modal .media-frame-title h1,
       
  2514 	.media-frame:not(.hide-menu) .media-frame-title h1 {
       
  2515 		font-size: 18px;
       
  2516 		line-height: 40px;
       
  2517 	}
       
  2518 
       
  2519 	.media-frame:not(.hide-menu) .media-frame-title .dashicons {
       
  2520 		line-height: 40px;
       
  2521 	}
       
  2522 
       
  2523 	.media-frame-router,
       
  2524 	.media-frame:not(.hide-menu) .media-menu {
       
  2525 		top: 40px;
       
  2526 	}
       
  2527 
       
  2528 	.media-frame-content {
       
  2529 		top: 74px;
       
  2530 	}
       
  2531 
       
  2532 	.media-frame.hide-router .media-frame-content {
       
  2533 		top: 40px;
  1655 	}
  2534 	}
  1656 }
  2535 }
  1657 
  2536 
  1658 /**
  2537 /**
  1659  * HiDPI Displays
  2538  * HiDPI Displays
  1660  */
  2539  */
  1661 @media print,
  2540 @media print,
  1662   (-o-min-device-pixel-ratio: 5/4),
       
  1663   (-webkit-min-device-pixel-ratio: 1.25),
  2541   (-webkit-min-device-pixel-ratio: 1.25),
  1664   (min-resolution: 120dpi) {
  2542   (min-resolution: 120dpi) {
  1665   	.media-modal-icon {
  2543 
  1666   		background-image: url(../images/uploader-icons-2x.png);
  2544 	.media-modal-icon {
  1667   		background-size: 134px 15px;
  2545 		background-image: url(../images/uploader-icons-2x.png);
  1668   	}
  2546 		-webkit-background-size: 134px 15px;
  1669 
  2547 		background-size: 134px 15px;
  1670   	.media-frame .spinner {
  2548 	}
  1671   		background-image: url(../images/wpspin-2x.gif);
  2549 
  1672   	}
  2550 	.media-frame .spinner {
  1673 }
  2551 		background-image: url(../images/spinner-2x.gif);
       
  2552 	}
       
  2553 }
       
  2554 
       
  2555 .media-frame-content[data-columns="1"] .attachment {
       
  2556 	width: 100%;
       
  2557 }
       
  2558 
       
  2559 .media-frame-content[data-columns="2"] .attachment {
       
  2560 	width: 50%;
       
  2561 }
       
  2562 
       
  2563 .media-frame-content[data-columns="3"] .attachment {
       
  2564 	width: 33.33%;
       
  2565 }
       
  2566 
       
  2567 .media-frame-content[data-columns="4"] .attachment {
       
  2568 	width: 25%;
       
  2569 }
       
  2570 
       
  2571 .media-frame-content[data-columns="5"] .attachment {
       
  2572 	width: 20%;
       
  2573 }
       
  2574 
       
  2575 .media-frame-content[data-columns="6"] .attachment {
       
  2576 	width: 16.66%;
       
  2577 }
       
  2578 
       
  2579 .media-frame-content[data-columns="7"] .attachment {
       
  2580 	width: 14.28%;
       
  2581 }
       
  2582 
       
  2583 .media-frame-content[data-columns="8"] .attachment {
       
  2584 	width: 12.5%;
       
  2585 }
       
  2586 
       
  2587 .media-frame-content[data-columns="9"] .attachment {
       
  2588 	width: 11.11%;
       
  2589 }
       
  2590 
       
  2591 .media-frame-content[data-columns="10"] .attachment {
       
  2592 	width: 10%;
       
  2593 }
       
  2594 
       
  2595 .media-frame-content[data-columns="11"] .attachment {
       
  2596 	width: 9.09%;
       
  2597 }
       
  2598 
       
  2599 .media-frame-content[data-columns="12"] .attachment {
       
  2600 	width: 8.33%;
       
  2601 }